<!-- MQ -->
<template>
  <div>
    <div class="baseInfo_box">
      <div class="baseInfo">
        <bg-info :data="apiBaseInfo" />
      </div>
      <div class="apaas_button test_btn">
        <el-button type="primary" class="refresh_btn" @click="refresh" v-if="showRefreshBtn">
          <bg-icon style="font-size: 10px; color: #fff; margin-right: 10px" icon="#bg-ic-refresh"></bg-icon>
          刷新
        </el-button>
        <el-button type="primary" @click="serviceTest">
          <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-checklist"></bg-icon>
          服务测试
        </el-button>
      </div>
    </div>
    <div class="req_box">
      <p class="input-title">
        <span class="before_title"></span>
          主题
        <span class="after_icon" @click="topic_open=!topic_open">
          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="topic_open"></bg-icon>
          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
        </span>
      </p>
      <div v-if="topic_open">
        <div class="topic_box" v-if="uiInfo && uiInfo.length > 0">
          <div class="left">
            <div class="items">
              <div 
                v-for="(item,idx) in uiInfo" 
                :key="idx" 
                class="topic_item" 
                :class="currentUi.id == item.id ? 'current' : ''"
                @click="changeCurrentTopic(item)"  
              >
                <el-tooltip
                  effect="dark"
                  :content="iconTipInfo[item.test_state]"
                  placement="top"
                >
                  <bg-icon
                    class="tree-icon"
                    :class="classArr[item.test_state]"
                    :icon="iconArr[item.test_state]"
                  ></bg-icon>
                </el-tooltip>
                {{item.theme}}
              </div>
            </div>
          </div>
          <div class="right">
            <img :src="currentUi.image[0].url" alt="">
          </div>
        </div>
        <div class="no_data" v-else>
          <img src="../../assets/imgs/img-no-data.png" alt="">
          <div class="text">无参数</div>
        </div>
      </div>
      <p class="input-title mt">
        <span class="before_title"></span>
          接口文档介绍
        <span class="after_icon" @click="res_body_open=!res_body_open">
          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="res_body_open"></bg-icon>
          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-down" v-else></bg-icon>
        </span>
      </p>
      <div v-if="res_body_open">
        <div v-html="detail_data.doc_desc" class="doc_desc"></div>
      </div>
    </div>

    <!-- 测试结果弹窗 -->
    <el-dialog
      custom-class="dialog_box result_box"
      title="提示"
      v-model="showDialog"
      width="400px"
      :before-close="
        () => {
          showDialog = false;
        }
      "
    >
      <div class="dialog_info">
        <bg-icon v-if="dialogInfo.state" style="font-size: 26px; color: #429e8a; margin-right: 10px" icon="#bg-ic-circle-check"></bg-icon>
        <bg-icon v-else style="font-size: 26px; color: #d75138; margin-right: 10px" icon="#bg-ic-circle-close"></bg-icon>
        <span>{{dialogInfo.msg}}</span>
      </div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="showDialog = false">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref,onBeforeMount,toRefs,getCurrentInstance  } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
const { $axios,$message } = proxy
const props = defineProps({
  data: {
    type: Object,
    default: null
  }
})
const router = useRouter()
const route = useRoute()
const detailData = reactive({
  apiBaseInfo: [
    {
      name: "能力名称",
      value: "",
      nameWidth: 104
    },
    {
      name: "调用地址",
      value: "",
      nameWidth: 104
    },
  ], // 基本信息
  uiInfo: [],
  detail_data: {},
  res_body_open: true,
  showDialog: false,
  dialogInfo: {
    msg: "该服务地址正常",
    state: true
  },
  topic_open: true,
  currentUi: {},
  classArr: [
    "question",
    "success",
    "close",
  ],
  iconArr: [
    "#bg-ic-s-circle-question",
    "#bg-ic-s-circle-check",
    "#bg-ic-s-circle-close"
  ],
  iconTipInfo: [
    "该主题还未进行测试",
    "该主题测试通过",
    "该主题测试不通过"
  ],
  showRefreshBtn: false
})
const emit = defineEmits(['refresh'])
const detail = props.data
detailData.detail_data = props.data
if (detail) {
  detailData.apiBaseInfo[0].value = detail.service_name
  detailData.apiBaseInfo[1].value = detail.req_url
  detailData.uiInfo = detail.ui_theme || []
  if (detailData.uiInfo.length > 0) {
    detailData.uiInfo.forEach(e => {
      e.image = JSON.parse(e.image)
    })
  }
  detailData.currentUi = detailData.uiInfo[0] || {}
}
const changeCurrentTopic = (item) => {
  detailData.currentUi = item
}
const serviceTest = () => {
  let params = {
    ui_id: detailData.currentUi.id,
    id: detail.id.toString(),
    url: detail.req_url,
    parameters: detailData.currentUi.parameters
  }
  localStorage.setItem('params',JSON.stringify(params))
  let routeData = router.resolve({
    path: "/ui-example",
  });
  window.open(routeData.href, "_blank");
  detailData.showRefreshBtn = true
}
const refresh = () => {
  emit('refresh',detail.ability_tree_code)
}
const {
  apiBaseInfo,
  detail_data,
  res_body_open,
  showDialog,
  dialogInfo,
  uiInfo,
  topic_open,
  currentUi,
  classArr,
  iconArr,
  iconTipInfo,
  showRefreshBtn,
} = toRefs(detailData)
</script>

<style lang="scss" scoped>
.baseInfo_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .baseInfo {
    width: 872px;
  }
  .refresh_btn {
    background-color: #404a62;
  }
}
.req_box {
  width: 872px;
  margin-top: 30px;
  .input-title {
    font-size: 16px;
    color: #202531;
    margin-top: 9px;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1;
    .before_title {
      display: inline-block;
      width: 4px;
      height: 14px;
      background-color: #2b4695;
      margin-right: 8px;
      border-radius: 2px;
    }
    .after_icon {
      float: right;
      cursor: pointer;
    }
  }
  .mt {
    margin-top: 24px;
  }
  .no_data {
    text-align: center;
    .text {
      font-size: 16px;
      color: #616f94;
      line-height: 1;
    }
  }
  .doc_desc {
    width: 100%;
    height: 406px;
    padding: 16px 24px;
    background-color: #fafafa;
    border-radius: 4px;
    color: #202531;
    font-size: 14px;
  }
  .topic_box {
    display: flex;
    .left {
      width: 200px;
      margin-right: 16px;
      font-size: 14px;
      color: #202531;
      .items {
        border: 1px solid #dadee7;
        padding: 4px 0;
        .topic_item {
          height: 34px;
          line-height: 34px;
          padding: 0 8px;
          cursor: pointer;
          display: flex;
          align-items: center;
          .tree-icon {
            font-size: 12px;
            color: #909bb6;
            margin-right: 6px;
          }
          .success {
            color: #48ad97;
          }
          .close {
            color: #dd6955;
          }
        }
        .current {
          background-color: #eff2fa;
          color: #3759be;
        }
      }
    } 
    .right {
      flex: 1;
      height: 332px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.dialog_info {
  padding: 27px 0 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>