<script setup lang="ts">
import { useDocApi } from "./index";
const {
  isMarkdown,
  isDoc,
  docDetail,
  commonParams,
  dataNodeType,
  resultData,
  handleChangeDocApp,
  docAppId,
  docAppList,
  docTree,
  handleNodeClick,
  showUrl,
  showProdUrl,
  showSandBoxUrl,
  showDoc,
  defaultExpandedKeys,
  currentNodeKey
} = useDocApi();
import { ApiParamTable } from "@/components/ApiParamTable";
const defaultProps = {
  children: "children",
  label: "docTitle"
};
</script>
<template>
  <el-container class="doc-view">
    <el-aside width="300px">
      <el-select
        v-show="docAppId > 0"
        v-model="docAppId"
        placeholder="Select"
        size="large"
        @change="handleChangeDocApp"
      >
        <el-option
          v-for="item in docAppList"
          :key="item.id"
          :label="item.appName"
          :value="item.id"
        />
      </el-select>
      <el-tree
        :data="docTree"
        :props="defaultProps"
        node-key="docId"
        :default-expanded-keys="defaultExpandedKeys"
        :current-node-key="currentNodeKey"
        style="margin-top: 10px"
        highlight-current
        @node-click="handleNodeClick"
      />
    </el-aside>
    <el-main v-show="showDoc" style="padding-top: 0">
      <div v-show="isMarkdown">1</div>
      <div v-show="!isDoc">
        <h2>
          {{
            docDetail.docInfoView.url + `(${docDetail.docInfoView.docTitle})`
          }}
        </h2>
        <div v-if="docDetail.docInfoView.description">
          <h3>接口说明</h3>
          <div
            class="api-description"
            v-html="docDetail.docInfoView.description"
          />
        </div>
        <el-descriptions border style="margin-top: 20px">
          <el-descriptions-item label="接口名称">
            {{ docDetail.docInfoView.url }}
          </el-descriptions-item>
          <el-descriptions-item label="版本号">
            {{ docDetail.docInfoView.version }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          v-show="showUrl"
          :column="1"
          title="请求地址"
          border
          style="margin-top: 20px"
        >
          <el-descriptions-item v-show="showProdUrl">
            <template #label>
              <div class="cell-item">生产环境</div>
            </template>
            {{ docDetail.docInfoConfig.openProdUrl }}
          </el-descriptions-item>
          <el-descriptions-item v-show="showSandBoxUrl">
            <template #label>
              <div class="cell-item">沙箱环境</div>
            </template>
            {{ docDetail.docInfoConfig.openSandboxUrl }}
          </el-descriptions-item>
        </el-descriptions>
        <h3>公共请求参数</h3>
        <el-table :data="commonParams" border highlight-current-row>
          <el-table-column prop="name" label="名称" width="200" />
          <el-table-column prop="type" label="类型" width="100" />
          <el-table-column prop="required" label="必须" width="60">
            <template #default="scope">
              <span :class="scope.row.required ? 'danger' : ''">
                {{ scope.row.required ? `是` : `否` }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="maxLength" label="最大长度" width="85" />
          <el-table-column prop="description" label="描述">
            <template #default="scope">
              <span v-if="scope.row.name === 'sign'">
                商户请求参数的签名串，详见
                <router-link :to="{ name: 'DocSign' }" target="_blank">
                  签名算法
                </router-link>
              </span>
              <span v-else>
                {{ scope.row.description }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="example" label="示例值" width="200" />
        </el-table>
        <h3>业务请求参数</h3>
        <ApiParamTable :data="docDetail.docInfoView.requestParams" />
        <h3>公共返回参数</h3>
        <el-table :data="resultData" border highlight-current-row>
          <el-table-column label="名称" prop="name" width="200" />
          <el-table-column label="类型" prop="type" width="100">
            <template #default="scope">
              <span v-if="scope.row.name === 'data'">
                {{ dataNodeType }}
              </span>
              <span v-else>
                {{ scope.row.type }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description">
            <template #default="scope">
              <span v-if="scope.row.name === 'code'">
                网关返回码，详见
                <router-link :to="{ name: 'DocCode' }" target="_blank">
                  公共错误码
                </router-link>
              </span>
              <span v-else>
                {{ scope.row.description }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="示例值" prop="example" width="200" />
        </el-table>
        <h4>业务返回参数</h4>
        <ApiParamTable :data="docDetail.docInfoView.responseParams" />
      </div>
    </el-main>
  </el-container>
</template>
<style lang="scss" scoped>
h3 {
  margin: 20px 0;
}
h4 {
  margin: 10px 0;
}
</style>
