<!-- 接口详情弹窗 -->
<template>
    <div class="assembly-detail">
        <!-- 基本信息 -->
        <div class="detail-item">
            <div class="item-header">
                <div class="title">基本信息</div>
                <div class="btns">
                    <div class="btn" @click="openActionRemark">调试说明</div>
                    <div class="btn" @click="openActionMock">在线调试</div>
                </div>
            </div>
            <div class="item-body">
                <div class="des" v-for="(item, index) of baseData" :key="index">
                    <div class="des-label">{{ item.label }}:</div>
                    <div v-if="item.label!=='接口描述'">{{ item.value }}</div>
                    <div v-else v-html="item.value"></div>
                </div>
            </div>
        </div>
        <!-- 请求参数 -->
        <div class="detail-item">
            <div class="item-header">
                <div class="title">请求参数</div>
            </div>
            <div class="item-body">
                <a-table :data-source="reqData" :columns="reqColumns" :pagination="{ hideOnSinglePage: true }">
                    <template #required="{ record }">
                        <div>{{ record.required ? '是' : '否' }}</div>
                    </template>
                </a-table>
            </div>
        </div>
        <!-- 返回参数 -->
        <div class="detail-item">
            <div class="item-header">
                <div class="title">返回参数</div>
            </div>
            <div class="item-body">
                <a-table :data-source="resData" :columns="resColumns" :pagination="{ hideOnSinglePage: true }">
                </a-table>
            </div>
        </div>
        <!-- 返回示例 -->
        <div class="detail-item">
            <div class="item-header">
                <div class="title">返回示例</div>
            </div>
            <div class="item-body">
                <a-textarea v-model:value="resExample" placeholder="" :autoSize="true" />
            </div>
        </div>
    </div>
    <a-modal v-model:visible="visible" centered title="调用说明"  width="700px" :footer="null">
        <div class="content" style="padding: 20px 10px 10px;font-size: 16px;">
            <p>· 使用需鉴权的接口要在网络请求头（Http Headers）中添加参数（Authorization）项，设置已授权的令牌（JWT：JSON Web Tokens）</p>
            <p>· 获取授权的JWT如下:</p>
            <p>1). 首先拥有成都市规划和自然资源局门户的账号和密码</p>
            <p>2). 其次由信息中心管理员配置client_id、client_secret、username、password参数值</p>
            <p>3). 然后获取access_token</p>
            <p>4). 最后通过access_token访问需鉴权的资源</p>
            <p>5). 注意:access_token有效期为:30分钟,过期需重新获取</p>
        </div>
    </a-modal>
    <ActionMock v-if="showActionMock" @closeModal="showActionMock = false" :action="actionData"/>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
import { getInterfaceDetail } from '/@/api/interface/interface.ts';
import ActionMock from './ActionMock.vue';

const props = {
    action: {
        type: Object,
        default: {}
    }
}

export default defineComponent({
    name: 'assemblyDetail',
    components: {ActionMock},
    props,
    setup(props) {
        //action数据，初始化时使用这个数据去组装需要的数据
        const actionData = ref(null)

        // 四类数据
        const baseData = ref(null)
        const reqData = ref(null)
        const resData = ref(null)
        const resExample = ref(null)

        const visible = ref(false)
        const showActionMock = ref(false)

        //请求参数表
        const reqColumns = [
            {
                title: '参数名称',
                align: 'center',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '说明',
                align: 'center',
                dataIndex: 'description',
                key: 'description'
            },
            {
                title: '参数位置',
                align: 'center',
                dataIndex: 'in',
                key: 'in'
            },
            {
                title: '是否必填',
                align: 'center',
                dataIndex: 'required',
                slots: {
                    customRender: 'required',
                }
            },
            {
                title: '数据类型',
                align: 'center',
                dataIndex: 'type',
                key: 'type'
            }
        ]
        //返回参数列表
        const resColumns = [
            {
                title: '参数名称',
                align: 'center',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '说明',
                align: 'center',
                dataIndex: 'schema',
                key: 'schema'
            },
            {
                title: '参数位置',
                align: 'center',
                dataIndex: 'in',
                key: 'in'
            },
            {
                title: '数据类型',
                align: 'center',
                dataIndex: 'type',
                key: 'type'
            }
        ]

        onMounted(() => {
            // console.log(props.action);
            props.action && getActionData(props.action.id)
        })
        watch(
            () => props.action,
            (val) => {
                getActionData(val.id)
            }
        )
        const getActionData = (id) => {
            getInterfaceDetail(id).then(res => {
                actionData.value = {
                    ...res,
                    queryParams: JSON.parse(res.queryParams),
                    requestHeaders: JSON.parse(res.requestHeaders),
                    responseParams: JSON.parse(res.responseParams),
                    // successRespExample:JSON.parse(res.successRespExample),
                }
                //组装四个需求的数据
                baseData.value = [
                    {
                        label: '接口名称',
                        value: actionData.value.name || '',
                    },
                    {
                        label: '接口地址',
                        value: actionData.value.requestUrl || '',
                    },
                    {
                        label: '请求方式',
                        value: actionData.value.requestMethod ? actionData.value.requestMethod : '',
                    },
                    {
                        label: '发布日期',
                        value: actionData.value.publishTime || '',
                    },
                    {
                        label: '版本号',
                        value: actionData.value.version || ''
                    },
                    {
                        label: '接口描述',
                        value: actionData.value.remark || ''
                    },
                ]
                reqData.value = actionData.value.queryParams
                reqData.value.unshift({
                    description:'令牌',
                    in:'header',
                    name:'Authorization',
                    required:false,
                    type:'string'
                })
                reqData.value.forEach((item, index) => {
                    item.key = index
                })
                resData.value = actionData.value.responseParams
                resData.value.forEach((item, index) => {
                    item.key = index
                })
                resExample.value = actionData.value.successRespExample
                console.log(actionData.value);
            })
        }
        const openActionRemark = () => {
            visible.value = true;
        }
        const openActionMock = ()=>{
            showActionMock.value = true
        }
        return {
            actionData,
            baseData,
            reqData,
            resData,
            resExample,

            reqColumns,
            resColumns,

            visible,
            showActionMock,

            openActionRemark,
            openActionMock
        };
    },
});
</script>

<style lang="less" scoped>
.assembly-detail {
    .detail-item {
        margin-top: 10px;
        margin-bottom: 20px;

        &:first-child {
            margin-top: 0;
        }

        .item-header {
            padding-left: 20px;
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 2px solid #e6a23c;
            box-sizing: border-box;

            .btns {
                display: flex;

                .btn {
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 5px;
                    background-color: #66b1ff;
                    color: #fff;
                    margin-right: 10px;
                    cursor: pointer;
                    user-select: none;
                }
            }
        }

        .item-body {
            padding-left: 20px;

            .des {
                margin: 10px 0;
                display: flex;

                .des-label {
                    width: 100px;
                }
            }
        }
    }
}
</style>