<template>
    <a-modal :visible="true" :width="width" :maskClosable="false" :destroyOnClose="true" :title="title" :footer="null"
        wrapClassName="modal-wrap" @cancel="onClose">
        <div class="action-content">
            <!-- 请求链接 -->
            <div class="item">
                <div class="item-header">
                    <div class="title">请求链接</div>
                </div>
                <div class="item-body">
                    <a-input :addon-before="action.requestMethod" v-model:value="action.requestUrl" disabled>
                        <template #addonAfter>
                            <div class="submit-btn" @click="onSubmit">发送</div>
                        </template>
                    </a-input>
                </div>
            </div>
            <!-- 请求参数 -->
            <div class="item">
                <div class="item-header">
                    <div class="title">请求参数</div>
                    <div class="btns">
                        <div class="btn" @click="openGetToken">获取token</div>
                    </div>
                </div>
                <div class="item-body">
                    <a-table :data-source="queryParams" :columns="reqColumns" :pagination="{ hideOnSinglePage: true }"
                        bordered>
                        <template #required="{ record }">
                            <div>{{ record.required ? '是' : '否' }}</div>
                        </template>
                        <template #paramsValue="{ record }">
                            <a-textarea v-if="record.in === 'body' || record.type !== 'string'"
                                v-model:value="reqParams[record.key].paramsValue" :rows="3" />
                            <a-input v-else v-model:value="reqParams[record.key].paramsValue" />
                        </template>
                    </a-table>
                </div>
            </div>
            <!-- 返回数据 -->
            <div class="item">
                <div class="item-header">
                    <div class="title">返回数据</div>
                </div>
                <div class="item-body">
                    <a-textarea v-model:value="resData" placeholder="返回数据" :rows="4" disabled />
                </div>
            </div>
        </div>
    </a-modal>
    <a-modal v-model:visible="visible" centered title="获取token" width="600px" :maskClosable="false" @cancel="closeGetToken" :footer="null">
        <div class="content" style="padding: 20px 10px 10px;font-size: 16px;">
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <!-- <a-form-item label="client_id" name="client_id">
                    <a-input v-model:value="tokenFormData.client_id" style="width: 100%" placeholder="" />
                </a-form-item>
                <a-form-item label="client_secret" name="client_secret">
                    <a-input v-model:value="tokenFormData.client_secret" style="width: 100%" placeholder="" />
                </a-form-item>
                <a-form-item label="username" name="username">
                    <a-input v-model:value="tokenFormData.username" style="width: 100%" placeholder="" />
                </a-form-item>
                <a-form-item label="password" name="password">
                    <a-input v-model:value="tokenFormData.password" style="width: 100%" placeholder="" />
                </a-form-item> -->
                <a-form-item label="access_token" name="access_token">
                    <a-textarea v-model:value="accessToken" placeholder="" :rows="8"/>
                </a-form-item>
            </a-form>
        </div>
        <!-- <template #footer>
            <a-button type="primary" :loading="loading" @click="getTokenSubmit">获取token</a-button>
        </template> -->
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import { session } from '/@/utils/Memory';
import axios from 'axios';

const props = {
    action: {
        type: Object,
        default: {}
    }
}
export default defineComponent({
    name: 'modal',
    components: {},
    props,
    setup(props, { emit }) {
        const data = reactive({
            width: '1200px',
            title: '调试接口',
        })

        //获取token相关数据
        // const formRef = ref(null)
        // const tokenFormData = reactive({
        //     client_id: "",
        //     client_secret: "",
        //     username: "",
        //     password: "",
        //     access_token: ""
        // })
        const accessToken = ref('')
        // const rules = {
        //     client_id: [{
        //         required: true,
        //         message: '请输入client_id',
        //         trigger: 'blur'
        //     }],
        //     client_secret: [{
        //         required: true,
        //         message: '请输入client_secret',
        //         trigger: 'blur'
        //     }],
        //     username: [{
        //         required: true,
        //         message: '请输入账号',
        //         trigger: 'blur'
        //     }],
        //     password: [{
        //         required: true,
        //         message: '请输入密码',
        //         trigger: 'blur'
        //     }]
        // };
        const visible = ref(false)
        //请求参数数组
        const reqParams = ref([])
        //返回数据
        const resData = ref('')
        //请求原始数据
        const action = ref(props.action)
        const reqRealUrl = ref(null)
        const reqMethod = ref(null)
        const queryParams = ref(null)
        watch(
            () => props.action,
            (val) => {
                action.value = val;
                reqRealUrl.value = action.value.askUrl;
                queryParams.value = action.value.queryParams;
                queryParams.value.forEach((item, index) => {
                    item.key = index
                })
            },
            {
                deep: true,
                immediate: true
            }
        )
        // 请求参数table
        const reqColumns = [
            {
                title: '是否必填',
                align: 'center',
                dataIndex: 'required',
                slots: {
                    customRender: 'required',
                }
            },
            {
                title: '参数名称',
                align: 'center',
                dataIndex: 'name',
                key: 'name'
            },
            {
                title: '参数位置',
                align: 'center',
                dataIndex: 'in',
                key: 'in'
            },
            {
                title: '数据类型',
                align: 'center',
                dataIndex: 'type',
                key: 'type'
            },
            {
                title: '参数值',
                align: 'center',
                dataIndex: 'paramsValue',
                slots: {
                    customRender: 'paramsValue',
                }
            }
        ]
        // 关闭请求弹窗
        const onClose = (e) => {
            emit('closeModal')
        }
        //发送请求
        const onSubmit = () => {
            // console.log(queryParams.value);
            console.log(reqParams.value);
            let validate = true
            reqParams.value.forEach(item=>{
                if(item.required && item.paramsValue===''){
                    validate = false
                }
            })
            if(!validate){
                message.error('请检查必填项')
                return;
            }
            // 先组装请求参数
            let params = {}, data = null, header={}
            reqParams.value.forEach(item=>{
                if(item.in === 'query'){
                    params[item.name] = item.paramsValue || null
                }else if(item.in === 'header'){
                    header[item.name] = item.paramsValue || null
                }else{
                    data = JSON.parse(item.paramsValue)
                }
            })
            console.log(header);
            axios({
                url:reqRealUrl.value,
                header:header,
                method:reqMethod.value,
                params:params,
                data:data
            }).then(res=>{
                console.log(res);
            })
        }
        //初始化请求所需数据
        onMounted(() => {
            reqRealUrl.value = action.value.askUrl;
            reqMethod.value = action.requestMethod;
            queryParams.value = action.value.queryParams;
            queryParams.value.forEach((item, index) => {
                item.key = index
                reqParams.value.push({
                    required:item.required,
                    name: item.name,
                    in:item.in,
                    paramsValue: ''
                })
            })
            console.log(queryParams.value);
        })
        //打开获取token弹窗
        const openGetToken = () => {
            visible.value = true
            accessToken.value = session.getItem('token')
        }
        // 获取token提交
        // const getTokenSubmit = () => {
        //     formRef.value.validate().then(() => {
        //         message.info('获取token');
        //         visible.value = false;
        //     })
        // }
        //关闭获取token弹窗
        const closeGetToken = () => {
            visible.value = false;
            accessToken.value = ''
        }
        return {
            // formRef,
            ...toRefs(data),
            // tokenFormData,
            // rules,
            accessToken,
            visible,
            reqParams,
            resData,
            reqRealUrl,
            reqMethod,
            queryParams,
            reqColumns,
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
            //func
            onClose,
            onSubmit,
            openGetToken,
            closeGetToken
        };
    },
});
</script>
<style lang="less" scoped>
.modal-wrap {
    .action-content {
        padding: 10px 20px 10px 10px;

        .item {
            margin-top: 10px;
            margin-bottom: 20px;

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

            .item-header {
                padding-left: 10px;
                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;
                        cursor: pointer;
                        user-select: none;
                    }
                }
            }

            .item-body {
                margin-top: 10px;
                padding-left: 10px;

                .submit-btn {
                    cursor: pointer;
                    user-select: none;
                }

                ::v-deep td{
                    padding: 5px 5px;
                }
            }
        }
    }
}
</style>