<template>
    <!-- 注册接口信息 -->
    <div>
        <el-row>
            <el-col :span="22"></el-col>
            <el-col :span="2">
                <el-button v-if="isView" class="el-button el-button--primary el-button--default global-btn-main"
                    @click="submitData()">确定</el-button>
                <el-button @click="cancelData()">取消</el-button>
            </el-col>
        </el-row>
            <el-scrollbar height="77.5vh">
                <y9Form ref="ruleFormRef" :config="ruleFormConfig">
                <template #isLimit>
                    <el-switch :disabled="!isView" v-model="value1" active-text="是"
                        inactive-text="否"></el-switch><el-tooltip v-if="value1" effect="light" content="点击配置限流信息"
                        placement="top-start"><el-icon class="operate" @click="openView('1')">
                            <Warning></Warning>
                        </el-icon></el-tooltip>
                </template>
                <template #isAuth>
                    <el-switch :disabled="!isView" v-model="value2" active-text="是" inactive-text="否"></el-switch>
                    <!-- <el-tooltip effect="light" content="点击配置鉴权信息" placement="top-start"><el-icon class="operate" @click="openView('2')"><Warning></Warning></el-icon></el-tooltip> -->
                </template>
                <template #interfaceType>
                    <el-radio-group v-model="interfaceType" :disabled="!isView">
                        <el-radio-button label="Rest" value="Rest" />
                        <el-radio-button label="webService" value="webService" @click="openWebServiceDialog()" />
                    </el-radio-group>
                </template>
                <template #isOverwrite>
                    <el-radio-group v-model="isOverwrite"
                        @change="(val) => { if (val == 'Y') { openPromptDialog('覆盖更新确认', '覆盖更新将会在接口审批通过后替换原接口') } }">
                        <el-radio-button label="否" value="N" />
                        <el-radio-button label="是" value="Y" />
                    </el-radio-group>
                    <!-- <el-switch :disabled="!isView" v-model="ruleFormConfig.model.isOverwrite" active-text="是" inactive-text="否"></el-switch> -->
                </template>
                <template #parameterHeader>
                    <y9VxeTable ref="editRequestHeaderRef" :config="requestHeaderParameterTable"
                        :filterConfig="requestHeaderParameterTableFilter">
                        <template v-slot:slotBtns>
                            <el-button v-if="isView" :size="fontSizeObj.buttonSize"
                                :style="{ fontSize: fontSizeObj.baseFontSize }" class="global-btn-main" type="primary"
                                @click="addParameter('1')">{{ $t('新增') }}
                            </el-button>
                        </template>
                    </y9VxeTable>
                </template>
                <template #parameter>
                    <el-divider content-position="left" v-if="props.isShow">选择权限范围请求参数，此处选中的参数，字段名称需要在下方请求参数构建中出现</el-divider>
                    <interfaceAuth v-model:isView="isView" v-model:isShow="props.isShow" v-model:isDisabled="value2"
                        ref="authRef" :interfaceId="interfaceId" v-model:selectData="selectData" />
                    <el-divider content-position="left" v-if="props.isShow">请求参数构建</el-divider>
                    <y9VxeTable v-if="reqMethod == 'get' || interfaceType != 'Rest'" ref="editRequestRef"
                        :config="requestParameterTable" :filterConfig="requestHeaderParameterTableFilter">
                        <template v-slot:slotBtns>
                            <el-button v-if="isView" :size="fontSizeObj.buttonSize"
                                :style="{ fontSize: fontSizeObj.baseFontSize }" class="global-btn-main" type="primary"
                                @click="addParameter('2')">{{ $t('新增') }}
                            </el-button>
                        </template>
                    </y9VxeTable>
                    <parameter v-if="reqMethod == 'post' && interfaceType == 'Rest'" ref="requestParameterRef"
                        v-model:parameterStatus="requestStatus" v-model:data="reqData" v-model:isView="isView">
                    </parameter>
                </template>
                <template #parameterResponse>
                    <parameter ref="responseParameterRef" v-model:parameterStatus="responseStatus"
                        v-model:data="resData" v-model:isView="isView"></parameter>
                </template>
            </y9Form>
            </el-scrollbar>
            
    </div>


    <!-- 限流信息 -->
    <el-dialog v-model="limitInfo" :title="limitTitle">
        <el-divider />
        <el-form ref="limitInfoRef" :model="limitInfoForm" label-width="140px" :rules="limitInfoRule">
            <el-form-item label="阈值类型" prop="thresholdType">
                <el-radio-group v-model="limitInfoForm.thresholdType" :disabled="!isView">
                    <el-radio value="0">自定义</el-radio>
                    <el-radio value="1">QPS</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="限定时间" v-if="limitInfoForm.thresholdType==0" prop="limitTime">
                <el-input v-model="limitInfoForm.limitTime" :disabled="!isView" placeholder="请输入，单位：秒" maxlength="7" />
            </el-form-item>
            <el-form-item label="限定时间内访问量" v-if="limitInfoForm.thresholdType==0" prop="limitCount">
                <el-input v-model="limitInfoForm.limitCount" :disabled="!isView" placeholder="请输入次数" maxlength="7" />
            </el-form-item>
            <el-form-item label="阈值" v-if="limitInfoForm.thresholdType==1" prop="thresholdVal">
                <el-input v-model="limitInfoForm.thresholdVal" :disabled="!isView" placeholder="请输入" maxlength="7" />
            </el-form-item>
            <el-form-item label="流控效果" prop="effect">
                <el-radio-group v-model="limitInfoForm.effect" :disabled="!isView">
                    <el-radio value="1">快速失败</el-radio>
                    <el-radio value="3">排队等候</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="超时时间" v-if="limitInfoForm.effect==3" prop="waitTime">
                <el-input v-model="limitInfoForm.waitTime" :disabled="!isView" placeholder="请输入，单位：毫秒" maxlength="9" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button v-if="isView" class="el-button el-button--primary el-button--default global-btn-main"
                @click="confirDialog('1')">确定</el-button>
            <el-button @click="closeDialog('1')">取消</el-button>
        </template>
    </el-dialog>

    <!-- webService -->
    <el-dialog v-model="webService" :title="webServiceTitle">
        <el-divider />
        <el-form ref="webServiceRef" :model="webServiceForm" label-width="155px" :rules="webServiceRule">
            <el-form-item label="webService规范协议" prop="webSpecification">
                <el-select v-model="webServiceForm.webSpecification" placeholder="请选择webService规范协议"
                    :disabled="!isView">
                    <el-option label="JAX-WS" value="JAX-WS"></el-option>
                    <el-option label="JAX-RS" value="JAX-RS"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="命名空间" prop="nameSpace" v-if="webServiceForm.webSpecification=='JAX-WS'">
                <el-input v-model="webServiceForm.nameSpace" :disabled="!isView" placeholder="请输入命名空间"
                    maxlength="300" />
            </el-form-item>
            <el-form-item label="调用方法名" prop="method" v-if="webServiceForm.webSpecification=='JAX-WS'">
                <el-input v-model="webServiceForm.method" :disabled="!isView" placeholder="请输入调用方法名" maxlength="300" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button v-if="isView" class="el-button el-button--primary el-button--default global-btn-main"
                @click="confirDialog('2')">确定</el-button>
            <el-button @click="closeDialog('2')">取消</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { computed, h, ref, inject } from 'vue';
import { useSettingStore } from '@/store/modules/settingStore';
import { useI18n } from 'vue-i18n';
import { $validCheck } from '@/utils/validate'
import {saveUpdateVersionInfo,saveInterfaceInfo,getInterfaceId,getInterfaceInfoById} from '@/api/interface/interface'
import { ElMessage, ElMessageBox,ElLoading } from 'element-plus';
import interfaceAuth from '@/views/auth/interfaceAuth.vue';
import parameter from '../parameter/parameterTable.vue';
import { useRoute } from 'vue-router';
import { nextTick } from 'vue';

// 注入 字体对象
const fontSizeObj: any = inject('sizeObjInfo');
const settingStore = useSettingStore();
const route = useRoute();
const { t } = useI18n();
const query: any = ref({});
const filterRef = ref();
const editRequestHeaderRef = ref();
const editRequestRef = ref();
const editResponseRef = ref();
const limitInfoRef = ref();
const webServiceRef = ref();
const webService = ref(false);
const webServiceTitle = ref("webService信息补充");
const limitInfo = ref(false)
const limitTitle = ref("配置限流信息")
const openDialog = ref(false)
const interfaceId = ref()
const value1 = ref('false')
const value2 = ref('false')
const selectData = ref()
const isView = ref(true)
const discardInterfaceId = ref("0")
const saveType = ref("0")
const isDelData = ref(true)
const authRef = ref()
const responseStatus = ref("3")
const responseParameterRef = ref()
const requestStatus = ref("2")
const requestParameterRef = ref()
const interfaceType = ref("Rest")
const isOverwrite = ref("N")
const resData = ref()
const reqData = ref()
const reqMethod = ref("get")
const router = useRouter();
const emit = defineEmits(['getDataListParent'])
const limitInfoForm = ref({
    thresholdType:"0",
    limitTime:"",
    limitCount:"",
    thresholdVal:"",
    effect:"1",
    waitTime:""
})
const props = defineProps({
    status:{
        type:String,
        default:()=>"其他"
    },
    isShow:{
        type:Boolean,
        default:()=>true
    }
})
//校验数字格式
const validateNumber = (rule: any, value: any, callback: any) => {
    let result = $validCheck('number', value, true);
    if (!result.valid) {
        callback(new Error(result.msg));
    } else {
        callback();
    }
};
const oldLimitInfoForm = ref()
const limitInfoRule = ref({
        //	表单验证规则。类型：FormRules
        thresholdType: [{ required: true, message: computed(() => t('阈值类型不能为空')), trigger: 'blur' }],
        limitTime: [{ required: true, message: computed(() => t('限定时间不能为空')), trigger: 'blur' }
            ,{ validator: validateNumber, trigger: 'blur' }
        ],
        limitCount: [{ required: true, message: computed(() => t('限定访问量不能为空')), trigger: 'blur' }
        ,{ validator: validateNumber, trigger: 'blur' }
        ],
        thresholdVal: [{ required: true, message: computed(() => t('阈值不能为空')), trigger: 'blur' }
        ,{ validator: validateNumber, trigger: 'blur' }
        ],
        effect: [{ required: true, message: computed(() => t('流控效果不能为空')), trigger: 'blur' }],
        waitTime: [{ required: true, message: computed(() => t('超时时间不能为空')), trigger: 'blur' }
        ,{ validator: validateNumber, trigger: 'blur' }
        ],
    })
//webService补充信息规则
const oldWebServiceForm = ref({})
const webServiceForm = ref({})
const webServiceRule = ref({
            //	表单验证规则。类型：FormRules
            webSpecification: [{ required: true, message: computed(() => t('webService规范协议不能为空')), trigger: 'blur' }],
            nameSpace: [{ required: true, message: computed(() => t('命名空间不能为空')), trigger: 'blur' }],
        method: [{ required: true, message: computed(() => t('调用方法名不能为空')), trigger: 'blur' }],
})
// 应用 添加 修改表单ref
const ruleFormRef = ref();
//校验url格式
const validateUrl = (rule: any, value: any, callback: any) => {
    let result = $validCheck('url', value, true);
    if (!result.valid) {
        callback(new Error(result.msg));
    } else {
        callback();
    }
};
//校验版本格式
const validateVersion = (rule: any, value: any, callback: any) => {
    let result = $validCheck('version', value, true);
    if (!result.valid) {
        callback(new Error(result.msg));
    } else {
        callback();
    }
};
//校验手机号
const validatePhone = (rule: any, value: any, callback: any) => {
    let result = $validCheck('phone', value, true);
    if (!result.valid) {
        callback(new Error(result.msg));
    } else {
        callback();
    }
};

// 增加 修改应用 弹框的变量配置 控制
let addDialogConfig = ref({
    show: false,
    title: computed(() => t('新增接口')),
    margin:"5vh auto",
    showFooter:true,
    onOkLoading: true,
    onOk: (newConfig) => {
        return new Promise(async (resolve, reject) => {
            const y9RuleFormInstance = ruleFormRef.value?.elFormRef;
            ruleFormRef.value.model.interfaceType = interfaceType.value;
            await y9RuleFormInstance.validate(async (valid) => {
                if (valid) {
                    let data = ruleFormRef.value.model;
                    try{
                        await webServiceRef.value.validate((valid) => {
                            if (valid) {
                                return
                            } else {
                                openPromptDialog("webService补充信息确认","webService补充信息页面存在未填信息请确认")
                                reject()
                                return false;
                            }
                        })
                    }catch(e){
                        if(!(data.interfaceType=="Rest")){
                            openPromptDialog("webService补充信息确认", "当前接口类型是webService，需要补充webService信息请确认")
                            reject()
                            return;
                        }
                    }
                    if(!(data.interfaceType=="Rest")){
                        data.webSpecification = webServiceForm.value.webSpecification
                        data.nameSpace = webServiceForm.value.nameSpace
                        data.method = webServiceForm.value.method
                    }
                    data.interfaceType = interfaceType.value
                    data.isOverwrite = isOverwrite.value
                    let formData = new FormData();
                    let parameterIds = authRef.value.getCheckData()
                    if(value2.value){
                        if(parameterIds==undefined || parameterIds.length==0){
                            openPromptDialog("权限参数确认","已经开启鉴权，请至少选择一项权限参数")
                            reject()
                            return;
                        }
                    }
                    selectData.value = parameterIds;
                    data.limitInfo = JSON.stringify(limitInfoForm.value);
                    let parameterData = parameterDatas(1,true);
                    if(typeof parameterData == 'boolean'){
                        reject()
                        return;
                    }
                    data.parameters = JSON.stringify(parameterData);
                    //获取请求参数数据
                    let arrData = []
                    let createKeys = ""
                    let reqData
                    if(reqMethod.value == 'post' && interfaceType.value=='Rest'){
                        reqData = requestParameterRef.value.getTableData()
                        //处理数据查看映射权限参数，将多层结构转为一层结构遍历键
                        selectChild(reqData, arrData)
                        for (let it of arrData) {
                            if (!JSON.parse(it.isItems)) {
                                createKeys += it.parameterKey + ","
                            }
                        }
                    }else if(reqMethod.value == 'get' || interfaceType.value!='Rest'){
                        reqData = parameterDatas(2,true);
                        if (typeof reqData == 'boolean') {
                            reject()
                            return;
                        }
                        for (let it of reqData) {
                            createKeys += it.parameterKey + ",";
                        }
                    }

                    let fieldKeys = authRef.value.getCheckDataKeys()
                    let exitKeys = ""
                    for(let it of fieldKeys){
                        if(createKeys.indexOf(it+",")==-1){
                            exitKeys+=it+","
                        }
                    }
                    if(exitKeys.length!=0){
                        exitKeys = exitKeys.substring(0,exitKeys.length-1)
                        ElMessage({ type: 'warning', message: "权限参数："+ exitKeys+"等字段名称，没有在构建参数中体现，字段名称对应参数key",duration:5000})
                        reject()
                        return;
                    }
                    data.reqParameters = JSON.stringify(reqData)

                    //获取返回参数数据
                    let resData = responseParameterRef.value.getTableData()
                    data.resParameters = JSON.stringify(resData)
                    for (let key in data) {
                        if(data[key]!=null && key != "createTime" && key !="updateTime")
                        formData.append(key,data[key])
                    }
                    formData.set('isAuth',value2.value==true?"是":"否")
                    formData.set('isLimit',value1.value==true?"是":"否")
                    formData.set("parameterIds",selectData.value==undefined?"":selectData.value)
                    let res;
                    //正常保存调用接口
                    if(saveType.value == "0"){
                        res = await saveInterfaceInfo(
                            formData
                        )
                    }
                    //版本迭代升级调用接口
                    else if(saveType.value == "1"){
                        res = await saveUpdateVersionInfo(formData)
                    }
                    if(res.code==0){
                        if (res.status == 'success') {
                            ElMessage({
                                message: '数据保存成功',
                                type: 'success'
                            })
                            isDelData.value = false;
                            emit('getDataListParent')
                            resolve();
                        } else {
                            openPromptDialog("数据保存失败确认",res.msg)
                            // ElMessage({
                            //     message: '数据保存失败,' + res.msg,
                            //     type: 'success'
                            // })
                        }
                    }
                    reject();
                } else {
                    reject();
                }
            });
        });
    },
    visibleChange:(visible)=>{
        // if(!visible && isDelData.value){
        //     if(discardInterfaceId.value != "0"){
        //         let para = {
        //             id: discardInterfaceId.value
        //         }
        //         delAuthInfoById(para)
        //     }
        //     discardInterfaceId.value="0"
        // }
        if(visible){
            nextTick(()=>{
                authRef.value.initTableData();
            })
        }else{
            authRef.value.restTable();
        }
    }
});

//请求头参数table配置
const requestHeaderParameterTable = ref({
    headerBackground: true,
    pageConfig: false,
    editConfig:{
        trigger: 'click',
        enable:true,
        mode:"cell"
    },
    editRules:{
        //	表单验证规则。类型：FormRules
        parameterKey: [{ required: true, message: computed(() => t('参数key不能为空')), trigger: 'blur' }],
        parameterType: [{ required: true, message: computed(() => t('参数类型不能为空')), trigger: 'blur' }],
        required: [{ required: true, message: computed(() => t('是否必填不能为空')), trigger: 'blur' }],
    },
    height: 200,
    keepSource: true,
    columns: [
        {
            type: 'index',
            title: computed(() => t('序号')),
            width: 80,
            fixed: 'left'
        },
        {
            title: computed(() => t('参数key')),
            key: 'parameterKey',
            editRender:{
                name:"input",
                useElement: true
            }
        },
        {
            title: computed(() => t('参数类型')),
            key: 'parameterType',
            editRender:{
                name:"select",
                useElement: true,
                options:[
                    { label: computed(() => t('String')), value: 'String' },
                    { label: computed(() => t('integer')), value: 'integer' },
                    { label: computed(() => t('double')), value: 'double' },
                    { label: computed(() => t('boolean')), value: 'boolean' },
                    { label: computed(() => t('number')), value: 'number' },
                ]
            }
        },
        {
            title: computed(() => t('是否必填')),
            key: 'required',
            editRender:{
                name:"select",
                useElement: true,
                options:[
                    {
                        value:"是",
                        label:"是"
                    },
                    {
                        value:"否",
                        label:"否"
                    },
                    
                ]
            }
        },
        // {
        //     title: computed(() => t('默认值')),
        //     key: 'defaultVal',
        //     editRender:{
        //         name:"input",
        //         useElement: true
        //     }
        // },
        {
            title: computed(() => t('参数描述')),
            key: 'notes',
            editRender:{
                name:"input",
                useElement: true
            }
        },
        {
            title: computed(() => t('操作')),
            width: 100,
            fixed: 'right',
            render: (row) => {
                if(isView.value)
                return h('div', [h('span', { onClick: () => { delById(row.parameterStatus,row.id) } ,
                class: 'operate'
            }, t("删除"))]);
            }
        }
    ],
    tableData: [],
}) 

//请求参数table配置
const requestParameterTable = ref({
    headerBackground: true,
    pageConfig: false,
    editConfig:{
        trigger: 'click',
        enable:true,
        mode:"cell"
    },
    height: 200,
    editRules:{
        //	表单验证规则。类型：FormRules
        parameterKey: [{ required: true, message: computed(() => t('参数key不能为空')), trigger: 'blur' }],
        parameterType: [{ required: true, message: computed(() => t('参数类型不能为空')), trigger: 'blur' }],
        required: [{ required: true, message: computed(() => t('是否必填不能为空')), trigger: 'blur' }],
    },
    keepSource: true,
    columns: [
        {
            type: 'index',
            title: computed(() => t('序号')),
            width: 80,
            fixed: 'left'
        },
        {
            title: computed(() => t('参数key')),
            key: 'parameterKey',
            editRender:{
                name:"input",
                useElement: true
            }
        },
        {
            title: computed(() => t('参数类型')),
            key: 'parameterType',
            editRender:{
                name:"select",
                useElement: true,
                options:[
                    { label: computed(() => t('String')), value: 'String'},
                    { label: computed(() => t('integer')), value: 'integer'},
                    { label: computed(() => t('double')), value: 'double'},
                    { label: computed(() => t('boolean')), value: 'boolean'},
                    { label: computed(() => t('number')), value: 'number'},
                ]
            }
        },
        {
            title: computed(() => t('是否必填')),
            key: 'required',
            editRender:{
                name:"select",
                useElement: true,
                options:[
                    {
                        value:"是",
                        label:"是"
                    },
                    {
                        value:"否",
                        label:"否"
                    },
                    
                ]
            }
        },
        // {
        //     title: computed(() => t('默认值')),
        //     key: 'defaultVal',
        //     editRender:{
        //         name:"input",
        //         useElement: true
        //     }
        // },
        {
            title: computed(() => t('参数描述')),
            key: 'notes',
            editRender:{
                name:"input",
                useElement: true
            }
        },
        {
            title: computed(() => t('操作')),
            width: 100,
            fixed: 'right',
            render: (row) => {
                if(isView.value)
                return h('div', [h('span', { onClick: () => { delById(row.parameterStatus,row.id) } ,
                class: 'operate'
            }, t("删除"))]);
            }
        }
    ],
    tableData: [],
}) 
//请求返回参数table配置
const responseParameterTable = ref({
    headerBackground: true,
    pageConfig: false,
    editConfig:{
        trigger: 'click',
        enable:true,
        mode:"cell",
        autoClear:false
    },
    height: 200,
    keepSource: true,
    editRules:{
        //	表单验证规则。类型：FormRules
        parameterKey: [{ required: true, message: computed(() => t('参数key不能为空')), trigger: 'blur' }],
        parameterType: [{ required: true, message: computed(() => t('参数类型不能为空')), trigger: 'blur' }],
        required: [{ required: true, message: computed(() => t('是否必填不能为空')), trigger: 'blur' }],
    },
    columns: [
        {
            type: 'index',
            title: computed(() => t('序号')),
            width: 80,
            fixed: 'left'
        },
        {
            title: computed(() => t('参数key')),
            key: 'parameterKey',
            editRender:{
                name:"input",
                useElement: true
            }
        },
        {
            title: computed(() => t('参数类型')),
            key: 'parameterType',
            editRender:{
                name:"select",
                useElement: true,
                options:[
                    {
                        value:"String",
                        label:"String"
                    },
                    {
                        value:"int",
                        label:"int"
                    },
                    {
                        value:"boolean",
                        label:"boolean"
                    },
                    {
                        value:"double",
                        label:"double"
                    },
                    
                ]
            }
        },
        {
            title: computed(() => t('是否必填')),
            key: 'required',
            editRender:{
                name:"select",
                useElement: true,
                options:[
                    {
                        value:"是",
                        label:"是"
                    },
                    {
                        value:"否",
                        label:"否"
                    },
                    
                ]
            }
        },
        // {
        //     title: computed(() => t('默认值')),
        //     key: 'defaultVal',
        //     editRender:{
        //         name:"input",
        //         useElement: true
        //     }
        // },
        {
            title: computed(() => t('参数描述')),
            key: 'notes',
            editRender:{
                name:"input",
                useElement: true
            }
        },
        {
            title: computed(() => t('操作')),
            width: 100,
            fixed: 'right',
            render: (row) => {
                if(isView.value)
                return h('div', [h('span', { onClick: () => { delById(row.parameterStatus,row.id) } ,
                class: 'operate'
            }, t("删除"))]);
            }
        }
    ],
    tableData: [],
}) 
//参数监听配置
const requestHeaderParameterTableFilter = ref({
    filtersValueCallBack: (filter) => {
        query.value = filter;
    },
    itemList: [
        {
            type: 'slot',
            slotName: 'slotBtns',
            span: 24,
            justify: 'flex-end'
        }

    ],
    showBorder: true
})
// 接口表单
let ruleFormConfig = ref({
    //表单配置
    model: {

    },
    rules: {
        //	表单验证规则。类型：FormRules
        interfaceName: [{ required: true, message: computed(() => t('接口名称不能为空')), trigger: 'blur' }],
        interfaceUrl:[{required: true, message: computed(() => t('接口调用地址不能为空')), trigger: 'blur'}
            ,{ validator: validateUrl, trigger: 'blur' }
        ],
        interfaceType:[{required: true, message: computed(() => t('接口类型不能为空')), trigger: 'blur'}],
        interfaceMethod:[{required: true, message: computed(() => t('请求方式不能为空')), trigger: 'blur'}],
        networkAgreement:[{required: true, message: computed(() => t('网络协议不能为空')), trigger: 'blur'}],
        head:[{required: true, message: computed(() => t('接口负责人不能为空')), trigger: 'blur'}],
        headPhone:[{required: true, message: computed(() => t('接口负责人联系方式不能为空')), trigger: 'blur'}
            ,{ validator: validatePhone, trigger: 'blur' }
        ],
        deptInfo:[{required: true, message: computed(() => t('接口负责单位不能为空')), trigger: 'blur'}],
        isOverwrite:[{required: true, message: computed(() => t('是否覆盖更新不能为空')), trigger: 'blur'}],
        version:[{required: true, message: computed(() => t('版本不能为空')), trigger: 'blur'}
            ,{ validator: validateVersion, trigger: 'blur' }
        ],
        url: [
            { required: true, message: computed(() => t('请输入链接地址')), trigger: 'blur' },
            { validator: validateUrl, trigger: 'blur' }
        ]
    },
    itemList: [
        {
            type: 'input',
            label: computed(() => t('接口名称')),
            prop: 'interfaceName',
            props:{
                maxlength:100
            }
        },
        {
            type: 'slot',
            label: computed(() => t('接口类型')),
            prop: 'interfaceType',
            props: {
                slotName: "interfaceType"
            }
        },
        {
            type: 'input',
            label: computed(() => t('接口地址')),
            prop: 'interfaceUrl',
            required: true,
            props:{
                placeholder:"请输入接口地址，例如http://www.baidu.com或者https://www.baidu.com",
                maxlength: 500
            }
        },
        {
            type: 'select',
            label: computed(() => t('请求方式')),
            prop: 'interfaceMethod',
            props: {
                options: [
                    //选项列表
                    { label: computed(() => t('get')), value: 'get' },
                    { label: computed(() => t('post')), value: 'post' }
                ],
                events:{
                    change:(val)=>{reqMethod.value = val}
                }
            }
        },
        {
            type: 'select',
            label: computed(() => t('网络协议')),
            prop: 'networkAgreement',
            props: {
                options: [
                    //选项列表
                    { label: computed(() => t('http')), value: 'http' },
                    { label: computed(() => t('https')), value: 'https' }
                ]
            }
        },
        {
            type: 'slot',
            label: computed(() => t('是否限流')),
            prop: 'isLimit',
            props:{
                slotName: "isLimit"
            }
        },
        {
            type: 'slot',
            label: computed(() => t('是否鉴权')),
            prop: 'isLimit',
            props:{
                slotName: "isAuth"
            }
        },
        {
            type: 'input',
            label: computed(() => t('接口负责人')),
            prop: 'head',
            props:{
                maxlength:50
            }
        },
        {
            type: 'input',
            label: computed(() => t('接口负责人联系方式')),
            prop: 'headPhone',
            props:{
                placeholder:"请输入11位手机号",
                maxlength:11
            }
        },
        {
            type: 'input',
            label: computed(() => t('接口负责人单位')),
            prop: 'deptInfo',
            props:{
                maxlength:254
            }
        },
        {
            type: 'slot',
            label: computed(() => t('请求头参数')),
            prop: '',
            props:{
                slotName:"parameterHeader"
            }
        },
        {
            type: 'slot',
            label: computed(() => t('请求参数')),
            prop: '',
            props:{
                slotName:"parameter"
            }
        },
        {
            type: 'slot',
            label: computed(() => t('返回参数')),
            prop: '',
            props:{
                slotName:"parameterResponse"
            }
        },
        {
            type: 'input',
            label: computed(() => t('版本')),
            prop: 'version',
            props:{
                placeholder:"请输入版本号。例如V1.1.1",
                maxlength:50
            }
        },
        {
            type: 'textarea',
            label: computed(() => t('说明')),
            prop: 'illustrate',
            props: {
                //文本域类型的属性
                rows: 3, //输入框行数,类型：number,
                maxlength:500
            }
        },
        {
            type: 'textarea',
            label: computed(() => t('备注')),
            prop: 'notes',
            props: {
                //文本域类型的属性
                rows: 3, //输入框行数,类型：number
                maxlength: 254
            }
        }
    ],
    descriptionsFormConfig: {
        labelWidth: '200px',
        labelAlign: 'center',
    }
});

//table参数新增
function addParameter(type){
    let itemData = {
        id: ""+Date.now(),
        parameterKey: "",
        parameterType: "",
        required: "",
        defaultVal: "",
        notes: "",
        parameterStatus: type,
        isItems:false,
        pid:0,
        level:1,
    }
    if(type==1){
        let newData = parameterDatas(type,false);
        itemData.sort = newData.length==0?1:newData[newData.length-1].sort+1
        newData.push(itemData);
        requestHeaderParameterTable.value.tableData = newData;
    }else if(type==2){
        let newData = parameterDatas(type,false);
        itemData.sort = newData.length==0?1:newData[newData.length-1].sort+1
        newData.push(itemData)
        requestParameterTable.value.tableData = newData;
    }else if(type == 3){
        let newData = parameterDatas(type,false);
        newData.push(itemData)
        responseParameterTable.value.tableData = newData;
    }
}
//返回新改变的数据
function parameterDatas(type,isCheck){
    let data = [];
    let oldData = [];
    if(type==1){
        data = editRequestHeaderRef.value.vxeTableRef.getRecordset().updateRecords;
        oldData = requestHeaderParameterTable.value.tableData;
    }else if(type==2){
        data = editRequestRef.value.vxeTableRef.getRecordset().updateRecords;
        oldData = requestParameterTable.value.tableData;
    }else if(type == 3){
        data = editResponseRef.value.vxeTableRef.getRecordset().updateRecords;
        oldData = responseParameterTable.value.tableData;
    }
    let newData = []
    let index = 0;
    for (let it of oldData) {
        if (index<data.length && it.id == data[index].id) {
            newData.push(data[index])
            index++;
        } else {
            newData.push(it)
        }
    }
    if(isCheck){
        let index = 1
        for(let it of newData){
            if(!checkData(it.parameterKey)){
                ElMessage({ type: 'warning', message: (type==1?"请求头参数，":type==2?"请求参数，":type==3?"返回参数":"")+'第'+index+'行，参数key不能为空' })
                return false;
            }
            if(!checkData(it.parameterType)){
                ElMessage({ type: 'warning', message: (type==1?"请求头参数":type==2?"请求参数":type==3?"返回参数":"")+'第'+index+'行，参数类型不能为空' })
                return false;
            }
            if(!checkData(it.required)){
                ElMessage({ type: 'warning', message: (type==1?"请求头参数":type==2?"请求参数":type==3?"返回参数":"")+'第'+index+'行，是否必填不能为空' })
                return false;
            }
            index++;
        }
    }

    return newData;
}
//检查值是否为空
function checkData(data){
    if(data==null || data==undefined || data==""){
        return false;
    }else{
        return true;
    }
}
//删除参数table数据
function delById(type,id){
    let data = []
    let newData = []
    if(type==1){
        data = parameterDatas(type,false);
        for (let it of data) {
            if (it.id != id) {
                newData.push(it)
            }
        }
        requestHeaderParameterTable.value.tableData = newData;
    }else if(type==2){
        data = parameterDatas(type,false);
        for (let it of data) {
            if (it.id != id) {
                newData.push(it)
            }
        }
        requestParameterTable.value.tableData = newData;
    }else if(type == 3){
        data = parameterDatas(type,false);
        for (let it of data) {
            if (it.id != id) {
                newData.push(it)
            }
        }
        responseParameterTable.value.tableData = newData;
    }
}

//打开配置信息
function openView(type){
    if(type==1){
        limitInfo.value = true
        limitInfoForm.value = JSON.parse(JSON.stringify(oldLimitInfoForm.value))
    }else{
        openDialog.value = true
    }
}
//关闭配置信息
function closeDialog(type){
    if(type==1){
        limitInfo.value = false
        limitInfoForm.value = JSON.parse(JSON.stringify(oldLimitInfoForm.value))
    }else if(type==2){
        webService.value = false
        let jsData = JSON.parse(JSON.stringify(oldWebServiceForm.value))
        webServiceForm.value.method = jsData.method
        webServiceForm.value.nameSpace = jsData.nameSpace
        webServiceForm.value.webSpecification = jsData.webSpecification
    }
}
//确定配置信息
function confirDialog(type){
    if(type==1){
        limitInfoRef.value.validate((valid)=>{
            if(valid){
                limitInfo.value = false
                oldLimitInfoForm.value = JSON.parse(JSON.stringify(limitInfoForm.value))
            }else{
                return false
            }
        })
    }else if(type==2){
        webServiceRef.value.validate((valid)=>{
            if(valid){
                webService.value = false
                oldWebServiceForm.value = JSON.parse(JSON.stringify(webServiceForm.value))
            }else{
                return false
            }
        })
    }
}

//新增按钮
async function addDialog(){
    ruleFormConfig.value.model = {}
    initFormData()
    let res = await getInterfaceId()
    ruleFormConfig.value.model.id = res.data
    discardInterfaceId.value = res.data
    interfaceId.value = res.data
    for(let it of ruleFormConfig.value.itemList){
        if(it.props==undefined){
            it.props = {
                disabled: false
            }
        }else{
            it.props.disabled = false
        }
    }
    analysisYableData('[]',false)
    analysisTreeData(res)
    nextTick(()=>{
        authRef.value.initTableData();
    })
}
addDialog()
//编辑按钮
async function edit(id) {
    initFormData()
    let para = {
        id:id
    }
    let res = await getInterfaceInfoById(para)
    ruleFormConfig.value.model=res.data
    for(let it of ruleFormConfig.value.itemList){
        if(it.props==undefined){
            it.props = {
                disabled: false
            }
        }else{
            it.props.disabled = false
        }
    }
    initData(res.data)
    analysisYableData(res.data.parameters,false)
    analysisTreeData(res)
    addDialogConfig.value.title = computed(() => t('编辑接口信息'))
    addDialogConfig.value.okText = "保存"
    addDialogConfig.value.show = true
}
//版本升级按钮
async function updateVersion(id) {
    initFormData()
    let para = {
        id:id
    }
    let res = await getInterfaceInfoById(para)
    ruleFormConfig.value.model=res.data
    for(let it of ruleFormConfig.value.itemList){
        if(it.props==undefined){
            it.props = {
                disabled: false
            }
        }else{
            it.props.disabled = false
        }
    }
    initData(res.data)
    analysisYableData(res.data.parameters,false)
    analysisTreeData(res)
    let response = await getInterfaceId(para)
    ruleFormConfig.value.model.id = response.data
    discardInterfaceId.value = response.data
    interfaceId.value = response.data
    saveType.value = "1"
    let isOverwriteItem = {
            type: 'slot',
            label: computed(() => t('覆盖更新')),
            prop: 'isOverwrite',
            props:{
                slotName: "isOverwrite"
            }
        }
    ruleFormConfig.value.itemList.push(isOverwriteItem)
    addDialogConfig.value.title = computed(() => t('接口版本升级维护信息'))
    addDialogConfig.value.okText = "保存"
    addDialogConfig.value.show = true
}
//详情按钮
async function view(id,show) {
    initFormData()
    let para = {
        id:id
    }
    let res = await getInterfaceInfoById(para)
    ruleFormConfig.value.model=res.data
    for(let it of ruleFormConfig.value.itemList){
        if(it.props==undefined){
            it.props = {
                disabled: true
            }
        }else{
            it.props.disabled = true
        }
    }
    initData(res.data)
    analysisYableData(res.data.parameters,true)
    analysisTreeData(res)
    addDialogConfig.value.okText = false
    addDialogConfig.value.title = computed(() => t('查看接口信息'))
    addDialogConfig.value.show = true
    props.isShow = show
}

//解析请求参数json数据并赋值
function analysisYableData(jsonData,isDisabled){
    let reloadData = JSON.parse(jsonData)
    let jzData1 = []
    let jzData2 = []
    let jzData3 = []
    for (let it of reloadData) {
        if (it.parameterStatus == "1") {
            jzData1.push(it)
        }
        if (it.parameterStatus == "2") {
            jzData2.push(it)
        }
        if (it.parameterStatus == "3") {
            jzData3.push(it)
        }
    }
    isView.value = !isDisabled
    requestHeaderParameterTable.value.editConfig = isView.value?{
        trigger: 'click',
        enable:true,
        mode:"cell"
    }:false
    requestHeaderParameterTable.value.tableData = jzData1

    requestParameterTable.value.editConfig = isView.value?{
        trigger: 'click',
        enable:true,
        mode:"cell"
    }:false
    requestParameterTable.value.tableData = jzData2

    responseParameterTable.value.editConfig = isView.value?{
        trigger: 'click',
        enable:true,
        mode:"cell"
    }:false
    responseParameterTable.value.tableData = jzData3
}

//解析参数json树形数据并赋值
function analysisTreeData(res){
    if(res.data.reqParameters!=undefined){
        reqData.value = JSON.parse(res.data.reqParameters)
    }else{
        reqData.value = []
    }
    if(res.data.resParameters!=undefined){
        resData.value = JSON.parse(res.data.resParameters)
    }else{
        resData.value = []
    }
}
//初始化switch组件的值
function initData(data,isDisabled){
    if (data.isLimit == "是") {
        value1.value = true
    }else{
        value1.value = false
    }
    if (data.isAuth == "是") {
        value2.value = true
    }else{
        value2.value = false
    }
    reqMethod.value = data.interfaceMethod
    interfaceType.value = data.interfaceType
    limitInfoForm.value = JSON.parse(data.limitInfo)
    oldLimitInfoForm.value = JSON.parse(data.limitInfo)
    selectData.value = data.parameterIds
    interfaceId.value = data.id
}

//新增时初始化赋值
function initFormData(){
    interfaceType.value = "Rest"
    limitInfoForm.value = {
        thresholdType: "0",
        limitTime: "",
        limitCount: "",
        thresholdVal: "",
        effect: "1",
        waitTime: ""
    }
    oldLimitInfoForm.value = {
        thresholdType: "0",
        limitTime: "",
        limitCount: "",
        thresholdVal: "",
        effect: "1",
        waitTime: ""
    }
    selectData.value = ""
    isDelData.value = true
    //保存类型，0普通保存，1版本迭代保存
    saveType.value = "0"
    //去除表单的是否覆盖更新
    let newData = []
    for(let it of ruleFormConfig.value.itemList){
        if(it.prop!="isOverwrite"){
            newData.push(it)
        }
    }
    ruleFormConfig.value.itemList = newData
}
//弹出提示信息
function openPromptDialog(title,msg){
    ElMessageBox.alert(msg,title,{
        confirmButtonText:'确认'
    })
}
//递归遍历数据
function selectChild(child,arrayData){
    if(child!=undefined){
        for (let it of child) {
            if (it.children instanceof Array) {
                selectChild(it.children, arrayData)
            }
            arrayData.push(it)
        }
    }
}
//打开webService补充页面
const openWebServiceDialog = ()=>{
    webService.value = true
    console.log(ruleFormRef.value.model)
}
//提交接口注册数据
const submitData = () => {
    const loading = ElLoading.service({
        lock:true,
        text:'加载中...'
    })
    const y9RuleFormInstance = ruleFormRef.value?.elFormRef;
    ruleFormRef.value.model.interfaceType = interfaceType.value;
    y9RuleFormInstance.validate(async (valid) => {
        if (valid) {
            let data = ruleFormRef.value.model;
            try {
                await webServiceRef.value.validate((valid) => {
                    if (valid) {
                        loading.close()
                        return
                    } else {
                        loading.close()
                        openPromptDialog("webService补充信息确认", "webService补充信息页面存在未填信息请确认")
                        return false;
                    }
                })
            } catch (e) {
                if (!(data.interfaceType == "Rest")) {
                    loading.close()
                    openPromptDialog("webService补充信息确认", "当前接口类型是webService，需要补充webService信息请确认")
                    return;
                }
            }
            if (!(data.interfaceType == "Rest")) {
                data.webSpecification = webServiceForm.value.webSpecification
                data.nameSpace = webServiceForm.value.nameSpace
                data.method = webServiceForm.value.method
            }
            data.interfaceType = interfaceType.value
            data.isOverwrite = isOverwrite.value
            let formData = new FormData();
            let parameterIds = authRef.value.getCheckData()
            if (value2.value) {
                if (parameterIds == undefined || parameterIds.length == 0) {
                    openPromptDialog("权限参数确认", "已经开启鉴权，请至少选择一项权限参数")
                    loading.close()
                    return;
                }
            }
            selectData.value = parameterIds;
            data.limitInfo = JSON.stringify(limitInfoForm.value);
            let parameterData = parameterDatas(1, true);
            if (typeof parameterData == 'boolean') {
                loading.close()
                return;
            }
            data.parameters = JSON.stringify(parameterData);
            //获取请求参数数据
            let arrData = []
            let createKeys = ""
            let reqData
            if (reqMethod.value == 'post' && interfaceType.value == 'Rest') {
                reqData = requestParameterRef.value.getTableData()
                //处理数据查看映射权限参数，将多层结构转为一层结构遍历键
                selectChild(reqData, arrData)
                for (let it of arrData) {
                    if (!JSON.parse(it.isItems)) {
                        createKeys += it.parameterKey + ","
                    }
                }
            } else if (reqMethod.value == 'get' || interfaceType.value != 'Rest') {
                reqData = parameterDatas(2, true);
                if (typeof reqData == 'boolean') {
                    loading.close()
                    return;
                }
                for (let it of reqData) {
                    createKeys += it.parameterKey + ",";
                }
            }

            let fieldKeys = authRef.value.getCheckDataKeys()
            let exitKeys = ""
            for (let it of fieldKeys) {
                if (createKeys.indexOf(it + ",") == -1) {
                    exitKeys += it + ","
                }
            }
            if (exitKeys.length != 0) {
                exitKeys = exitKeys.substring(0, exitKeys.length - 1)
                loading.close()
                ElMessage({ type: 'warning', message: "权限参数：" + exitKeys + "等字段名称，没有在构建参数中体现，字段名称对应参数key", duration: 5000 })
                return;
            }
            data.reqParameters = JSON.stringify(reqData)

            //获取返回参数数据
            let resData = responseParameterRef.value.getTableData()
            data.resParameters = JSON.stringify(resData)
            for (let key in data) {
                if (data[key] != null && key != "createTime" && key != "updateTime")
                    formData.append(key, data[key])
            }
            formData.set('isAuth', value2.value == true ? "是" : "否")
            formData.set('isLimit', value1.value == true ? "是" : "否")
            formData.set("parameterIds", selectData.value == undefined ? "" : selectData.value)
            let res;
            //正常保存调用接口
            if (saveType.value == "0") {
                res = await saveInterfaceInfo(
                    formData
                )
            }
            //版本迭代升级调用接口
            else if (saveType.value == "1") {
                res = await saveUpdateVersionInfo(formData)
            }
            if (res.code == 0) {
                if (res.status == 'success') {
                    ElMessage({
                        message: '数据保存成功',
                        type: 'success'
                    })
                    router.push({path:'alreadyInterface'})
                    loading.close()
                    isDelData.value = false;
                } else {
                    openPromptDialog("数据保存失败确认", res.msg)
                    loading.close()
                }
            }

        } else {
            loading.close()
        }
    });
}
//取消接口注册数据
const cancelData = ()=>{
    const loading = ElLoading.service({
        lock:true,
        text:'加载中...'
    })
    router.push({path:'alreadyInterface'})
    loading.close()
}
defineExpose({addDialog,edit,view,updateVersion})
</script>
<style>
.leftMargin {
    margin-left: 5px;
}
.operate{
    cursor: pointer;
}
</style>