<!-- mobileSDK -->
<template>
  <div>
    <div class="baseInfo_box">
      <div class="baseInfo">
        <bg-info :data="apiBaseInfo" />
      </div>
    </div>
    <div class="req_box">
      <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>
  </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: "",
      full: true,
      nameWidth: 104
    },
    {
      name: "支持类型",
      value: "",
      nameWidth: 104,
    },
    {
      name: "支持系统",
      value: "",
      nameWidth: 104,
    },
    {
      name: "SDK包",
      value: "",
      nameWidth: 104,
      download: true,
      url: ""
    },
    {
      name: "SDK版本号",
      value: "",
      nameWidth: 104,
    },
    {
      name: "承诺书",
      value: "",
      full: true,
      nameWidth: 104,
      download: true,
      url: ""
    },

  ], // 基本信息
  detail_data: {},
  res_body_open: true,
})
const detail = props.data
detailData.detail_data = props.data
if (detail) {
  let sdkFile = detail.msdk_file ? JSON.parse(detail.msdk_file) : []
  let commitment = detail.commitment ? JSON.parse(detail.commitment) : []
  detailData.apiBaseInfo[0].value = detail.service_name
  detailData.apiBaseInfo[1].value = ['','Android','IOS','其它'][detail.msdk_type]
  detailData.apiBaseInfo[2].value = detail.msdk_system
  detailData.apiBaseInfo[3].value = sdkFile[0].name
  detailData.apiBaseInfo[3].url = sdkFile[0].url
  detailData.apiBaseInfo[4].value = detail.sdk_version
  detailData.apiBaseInfo[5].value = commitment[0].name
  detailData.apiBaseInfo[5].url = commitment[0].url
}
const {
  apiBaseInfo,
  detail_data,
  res_body_open,
} = 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 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>