<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <a-drawer v-model:visible="visible" width="700px" :footer="false">
        <template #title>{{ row.name }}</template>
        <a-tabs type="rounded" v-model:active-key="activeTab">
            <a-tab-pane key="paramsList" title="参数列表">
                <div class="pl-2 pr-2">
                    <a-divider orientation="left">接口信息</a-divider>
                    <a-descriptions :column="1" bordered>
                        <a-descriptions-item label="接口地址">/api/v1/{{ row.access_name }}</a-descriptions-item>
                        <a-descriptions-item label="认证模式">
                            <a-tag v-if="row.auth_mode === 1" color="green" bordered>简易模式</a-tag>
                            <a-tag v-else color="red" bordered>复杂模式</a-tag>
                        </a-descriptions-item>
                        <a-descriptions-item label="认证说明">
                            <div v-if="row.auth_mode === 1">
                                简易模式下，只需要在接口后面带上 <a-tag color="orangered">app_id</a-tag> 和<a-tag
                                    color="orangered"
                                    >identity</a-tag
                                >
                            </div>
                            <div v-else>
                                复杂模式下，先需要获取 <a-tag color="blue">AccessToken</a-tag>，再以此请求接口
                            </div>
                        </a-descriptions-item>
                    </a-descriptions>
                    <a-divider orientation="left">请求参数</a-divider>
                    <a-table :data="requestData" :columns="requestCols">
                        <template #dataType="{ record }">
                            <template v-for="dic in dictData" :key="dic.id">
                                <a-tag color="blue" v-if="dic.key == record.data_type">{{ dic.title }}</a-tag>
                            </template>
                        </template>
                        <template #required="{ record }">
                            <a-tag color="red" v-if="record.is_required === 2">是</a-tag>
                            <a-tag color="green" v-else>否</a-tag>
                        </template>
                    </a-table>
                    <a-divider orientation="left">响应参数</a-divider>
                    <a-table :data="responseData" :columns="responseCols">
                        <template #dataType="{ record }">
                            <template v-for="dic in dictData" :key="dic.id">
                                <a-tag color="blue" v-if="dic.key == record.data_type">{{ dic.title }}</a-tag>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-tab-pane>
            <a-tab-pane key="simRequest" title="模拟请求">
                <sim-request :row="row" />
            </a-tab-pane>
        </a-tabs>
    </a-drawer>
</template>

<script setup>
import { reactive, ref, h } from "vue"
import doc from "@/api/doc"
import commonApi from "@/api/common"
import SimRequest from "./simRequest.vue"

const visible = ref(false)
const row = ref({})
const activeTab = ref("paramsList")

const dictData = ref([])
const requestData = ref([])
const responseData = ref([])

const requestCols = reactive([
    { title: "参数名", dataIndex: "name" },
    { title: "数据类型", dataIndex: "data_type", slotName: "dataType" },
    { title: "是否必填", dataIndex: "is_required", slotName: "required" },
    { title: "默认值", dataIndex: "default_value" }
])
const responseCols = reactive([
    { title: "参数名", dataIndex: "name" },
    { title: "数据类型", dataIndex: "data_type", slotName: "dataType" },
    { title: "更新时间", dataIndex: "updated_at" }
])

const open = async (record) => {
    row.value = record
    await getColumnList()
    const response = await commonApi.getDict("api_data_type")
    dictData.value = response.data
    visible.value = true
}

const getColumnList = async () => {
    const res = await doc.getColumnList(row.value.id)
    requestData.value = []
    responseData.value = []
    res.data.api_column.map((item) => {
        item.type === 1 ? requestData.value.push(item) : responseData.value.push(item)
    })
}

defineExpose({ open })
</script>
