<!-- 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" @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>
          Topic
        <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="topicInfo && topicInfo.length > 0">
          <div class="left">
            <div class="items">
              <div 
                v-for="(item,idx) in topicInfo" 
                :key="idx" 
                class="topic_item" 
                :class="currentTopic.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.name}}
              </div>
            </div>
          </div>
          <div class="right">
            {{currentTopic.desc}}
          </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="
        () => {
          dialogClose()
        }
      "
    >
      <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="dialogClose">取 消</el-button>
          <el-button type="primary" @click="dialogClose">确 定</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 emit = defineEmits(["dialogClose"])
const router = useRouter()
const route = useRoute()
const detailData = reactive({
  apiBaseInfo: [
    {
      name: "能力名称",
      value: "",
      nameWidth: 104
    },
    {
      name: "调用地址",
      value: "",
      nameWidth: 104
    },
    {
      name: "平台协议",
      value: "",
      nameWidth: 104
    },
    {
      name: "平台版本号",
      value: "",
      nameWidth: 104,
    },
    {
      name: "用户名",
      value: "",
      nameWidth: 104
    },
    {
      name: "密码",
      value: "",
      nameWidth: 104,
      password: true,
      realValue: "",
    },
  ], // 基本信息
  topicInfo: [],
  detail_data: {},
  res_body_open: true,
  showDialog: false,
  dialogInfo: {
    msg: "该服务地址正常",
    state: true
  },
  topic_open: true,
  currentTopic: {},
  classArr: [
    "question",
    "success",
    "close",
  ],
  iconArr: [
    "#bg-ic-s-circle-question",
    "#bg-ic-s-circle-check",
    "#bg-ic-s-circle-close"
  ],
  iconTipInfo: [
    "该主题还未进行测试",
    "该主题测试通过",
    "该主题测试不通过"
  ],
})
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.apiBaseInfo[2].value = ["","kafka","rocketMQ","rabbitMQ"][detail.mq_protocol]
  detailData.apiBaseInfo[3].value = detail.mq_version
  detailData.apiBaseInfo[4].value = detail.mq_user_name
  detailData.apiBaseInfo[5].value = "***************"
  detailData.apiBaseInfo[5].realValue = detail.mq_password
  detailData.topicInfo = detail.mq_topic || []
  detailData.currentTopic = detailData.topicInfo[0] || {}
}
const changeCurrentTopic = (item) => {
  detailData.currentTopic = item
}
const serviceTest = () => {
  let params = {
    interface_type: 4,
    url: detail.req_url,
    mq_protocol: detail.mq_protocol,
    mq_exchange: detailData.currentTopic.name,
    mq_password: detail.mq_password,
    mq_user: detail.mq_user,
    mq_id: detailData.currentTopic.id,
    id: detail.id.toString()
  }
  $axios
    .post(`/apaas/service/v5/service/test`,params)
    .then((res) => {
      if (res.data.code !== 200) {
        $message.error(res.data.data)
      } else {
        detailData.showDialog = true
        if (res.data.data.response_code == 200) { 
          detailData.dialogInfo = {
            msg: "该服务地址正常",
            state: true
          }
        }else {
          detailData.dialogInfo = {
            msg: "该服务地址异常",
            state: false
          }
        }
      }
    })
}
const dialogClose = () => {
  detailData.showDialog = false
  emit("refresh",detail.ability_tree_code)
}
const {
  apiBaseInfo,
  detail_data,
  res_body_open,
  showDialog,
  dialogInfo,
  topicInfo,
  topic_open,
  currentTopic,
  classArr,
  iconArr,
  iconTipInfo,
} = toRefs(detailData)
</script>

<style lang="scss" scoped>
.baseInfo_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .baseInfo {
    width: 872px;
  }
}
.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;
      background-color: #fafafa;
      border-radius: 4px;
      padding: 15px 24px;
    }
  }
}
.dialog_info {
  padding: 27px 0 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>