<!-- webSDK -->
<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>
          使用示例
        <span class="after_icon" @click="example_open=!example_open">
          <bg-icon style="font-size: 8px; color: #000;" icon="#bg-ic-arrow-up" v-if="example_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="example_open">
        <video id="video" style="width: 100%" controls autoplay>
          <source :src="wsdk_use_doc" />
        </video>
      </div>
      <p class="input-title">
        <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: "",
      full: true,
      nameWidth: 104
    },
    {
      name: "安全密钥",
      value: "",
      nameWidth: 104,
      full: true,
      password: true,
      realValue: "",
    },
  ], // 基本信息
  detail_data: {},
  res_body_open: true,
  showDialog: false,
  dialogInfo: {
    msg: "该服务地址正常",
    state: true
  },
  example_open: true,
  wsdk_use_doc: ""
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
  detailData.apiBaseInfo[0].value = detail.service_name
  detailData.apiBaseInfo[1].value = detail.sdk_version
  detailData.apiBaseInfo[2].value = detail.req_url
  detailData.apiBaseInfo[3].value = "***************"
  detailData.apiBaseInfo[3].realValue = detail.wsdk_secret_key
  detailData.wsdk_use_doc = detail.wsdk_use_doc
}
const serviceTest = () => {
  let params = {
    interface_type: 1,
    method: 1,
    url: detail.req_url,
    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,
  example_open,
  wsdk_use_doc,
} = 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;
    }
  }
  .doc_desc {
    width: 100%;
    height: 406px;
    padding: 16px 24px;
    background-color: #fafafa;
    border-radius: 4px;
    color: #202531;
    font-size: 14px;
  }
}
.dialog_info {
  padding: 27px 0 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>