<template>
  <div>
    <el-text size="large" tag="b" v-if="api.deprecated" type="danger">当前接口已过时，建议使用其他接口代替</el-text>
    <el-row style="margin-top: 10px;">
      <el-col :span="24"><div style="font-size: 20px;font-weight: 500;">接口地址：{{ api.method+" /"+api.subsystem+api.url }}</div></el-col>
      <el-col :span="24"><div style="font-size: 20px;font-weight: 500;">接口说明：{{ api.summary }}</div></el-col>
      <el-col :span="24"><div style="font-size: 20px;font-weight: 500;">Content-Type：{{ api.contentType }}</div> </el-col>
    </el-row>
    <!--表单-->
    <div>
      <el-collapse v-model="activeCollapses"  >
        <el-collapse-item name="1">
          <template #title><span style="font-size: 20px;font-weight: 500;">请求参数</span></template>
          <vxe-table :data="api.requests" header-row-class-name="ab-vxetable-row" header-cell-class-name="ab-vxetable-cell">
            <vxe-column type="seq" title="序号" ></vxe-column>
            <vxe-column field="name" title="参数名称">
              <template #default="{ row }">
                <span v-if="'application/json'===api.contentType">无</span>
                <span v-else>{{row.name}}<span v-if="row.required"><font color="red">&nbsp;&nbsp;(必填)</font></span></span>
              </template>
            </vxe-column>
            <vxe-column field="schemaType" title="参数类型"></vxe-column>
            <vxe-column field="description" title="参数说明"></vxe-column>
            <vxe-column field="pattern" title="更多限制"></vxe-column>
            <vxe-column field="defaultVal" title="默认值"></vxe-column>
            <vxe-column field="example" title="示例">
              <template #default="{ row }">
                <span v-if="row.exampleObj">
                  <el-link type="primary" @click="skipAnchorPoint(row.example)" >{{row.example}}</el-link>
                </span>
                <span v-else>{{row.example}}</span>
              </template>
            </vxe-column>
          </vxe-table>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template #title><span style="font-size: 20px;font-weight: 500;">响应参数</span></template>
          <vxe-table :data="api.responses" header-row-class-name="ab-vxetable-row" header-cell-class-name="ab-vxetable-cell">
            <vxe-column type="seq" title="序号" ></vxe-column>
            <vxe-column field="name" title="参数名称"></vxe-column>
            <vxe-column field="type" title="参数类型"></vxe-column>
            <vxe-column field="description" title="参数说明"></vxe-column>
            <vxe-column field="example" title="示例">
              <template #default="{ row }">
                <span v-if="row.exampleObj"><el-link type="primary" @click="skipAnchorPoint(row.example)">{{row.example}}</el-link></span>
                <span v-else>{{row.example}}</span>
              </template>
            </vxe-column>
          </vxe-table>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template #title><span style="font-size: 20px;font-weight: 500;">参数说明</span></template>
          <el-collapse v-model="activeSchemasCollapses" >
            <el-collapse-item v-for="schema in api.schemas" :key="schema.name" :name="schema.name" :id="schema.name+'_schema'">
              <template #title><span style="font-size: 15px;font-weight: 500;">{{ schema.name }}({{ schema.description }})</span></template>
              <vxe-table :data="schema.items" header-row-class-name="ab-vxetable-row" header-cell-class-name="ab-vxetable-cell">
                <vxe-column type="seq" title="序号" ></vxe-column>
                <vxe-column field="name" title="参数名称">
                  <template #default="{ row }">
                    <span>{{row.name}}<span v-if="row.required"><font color="red">&nbsp;&nbsp;(必填)</font></span></span>
                  </template>
                </vxe-column>
                <vxe-column field="type" title="参数类型">
                  <template #default="{ row }">
                    <span v-if="'object'===row.type">JSONObject</span>
                    <span v-else>{{row.type}}</span>
                  </template>
                </vxe-column>
                <vxe-column field="description" title="参数说明"></vxe-column>
                <vxe-column field="pattern" title="更多限制"></vxe-column>
                <vxe-column field="example" title="示例">
                  <template #default="{ row }">
                    <span v-if="row.exampleObj"><el-link type="primary" @click="skipAnchorPoint(row.example)" >{{row.example}}</el-link></span>
                    <span v-else>{{row.example}}</span>
                  </template>
                </vxe-column>
              </vxe-table>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import XEUtils from 'xe-utils'
const props = defineProps(['api'])
/**监听父组件传参，接收列表页面传参 */
const activeCollapses = ref(['1','2','3'])
const activeSchemasCollapses = ref([])
const skipAnchorPoint = (sectionId) => {
  const section = document.getElementById(sectionId+'_schema');
  if (section) {
    section.scrollIntoView({ behavior: 'smooth' });
  }
}

const initData = () => {
  activeCollapses.value=['1','2','3']
  const api=ref(props.api)
  if(!XEUtils.isUndefined(api.value.schemas)){
    api.value.schemas.forEach(schema => {
      activeSchemasCollapses.value.push(schema.name)
      schema.items.forEach(item => {
        if(item.exampleObj){
          let temp=api.value.schemas.find((val:any) => val.name===item.example)
          if(!XEUtils.isUndefined(temp)&&!item.description)
            item.description=temp.description
        }
      })
    })
  }
}
onMounted(() => {
  initData()
})
</script>

<style lang="scss" scoped>
</style>