<template>
    <a-modal :title="title" :visible="true" :width="540" centered :footer="null" @cancel="onClose">
        <div class="content" style="padding: 10px;">
            <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <!-- 名称 -->
                <a-form-item label="字典名称" name="name">
                    <a-input v-model:value="form.name" style="width: 100%" placeholder="请输入名称" />
                </a-form-item>
                <!-- 编码 -->
                <a-form-item label="字典编码" name="code">
                    <a-input v-model:value="form.code" style="width: 100%" placeholder="根据名称生成" disabled />
                </a-form-item>
                <!-- 类型 -->
                <a-form-item label="字典类型" name="type">
                    <a-select v-model:value="form.type" style="width: 100%" :options="selectOptions">
                    </a-select>
                </a-form-item>
                <!-- 排序 -->
                <a-form-item label="字典排序" name="px">
                    <a-input v-model:value="form.px" style="width: 100%" placeholder="请输入序号" />
                </a-form-item>
            </a-form>
            <div :style="{
                paddingTop:'10px',
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                display:'flex',
                justifyContent:'center',
            }">
                <a-button style="margin-right: 35px" @click="onClose">取消</a-button>
                <a-button type="primary" @click="onSubmit">确定</a-button>
            </div>
        </div>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';
import { getAllTagsType, generateCodeByName, addTag, updateTag, checkTagCode } from '/@/api/sys/tag';
import { session } from '/@/utils/Memory';

const props = {
    formData: {
        type: Object,
        default: () => {
            return {}
        }
    },
    drawerTitle: {
        type: String,
        default: "新增岗位"
    }
}
export default defineComponent({
    name: 'TagDrawer',
    components: {},
    props,
    setup(props, { emit }) {
        const form = reactive({
            id: "",
            name: "",
            code: "",
            codeName: "",
            type: "",
            px: "",
        });
        const rules = {
            name: [{
                required: true,
                message: '请输入字典名称',
                trigger: 'blur'
            }],
            // code: [{
            //     required: true,
            //     message: '请输入字典编码',
            //     trigger: 'blur'
            // }],
            type: [{
                required: true,
                message: '请选择字典类型',
                trigger: 'blur'
            }],
            px: [{
                required: true,
                message: '请输入字典排序',
                trigger: 'blur'
            }]
        };
        const title = ref(props.drawerTitle)
        const formRef = ref()
        const selectOptions = ref([])

        onMounted(() => {
            if (Object.keys(props.formData).length) {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
            };
            getTagsType();
        })

        watch(
            () => [props.formData, props.drawerTitle],
            ([newF, newD]) => {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
                title.value = newD
            },
            {
                immediate: true,
                deep: true
            }
        )
        //获取所有字典类型
        const getTagsType = () => {
            let param = {
                1: session.getItem('tokenV2')
            }
            getAllTagsType(param).then(res => {
                let resData = JSON.parse(res.result)
                resData.forEach((item, index) => {
                    selectOptions.value.push({
                        value: item.TYPE,
                        label: item.TYPE
                    })
                })
            })
        }
        // 关闭弹窗
        const onClose = () => {
            emit('closeDialog')
            resetForm()
        };
        // 提交信息
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                //此处调用新增
                if (title.value === '新增字典') {
                    form.id = undefined;
                    form.codeName = undefined;
                    //名称生成code
                    let param1 = {
                        1: session.getItem('tokenV2'),
                        2: form.name
                    }
                    generateCodeByName(param1).then(res1 => {
                        form.code = res1.result
                        //检查code是否重复
                        let param2 = {
                            1: session.getItem('tokenV2'),
                            2: form.code
                        }
                        checkTagCode(param2).then(res2 => {
                            if (res2.result === 'true') {
                                // 添加字典
                                let param3 = {
                                    1: session.getItem('tokenV2'),
                                    2: JSON.stringify([form])
                                }
                                addTag(param3).then(res3 => {
                                    message.success('操作成功')
                                    resetForm()
                                    emit('onSubmit', true)
                                })
                            } else {
                                message.error('code重复')
                                resetForm()
                            }
                        })
                    })
                } else {
                    let param = {
                        1: session.getItem('tokenV2'),
                        2: JSON.stringify([form])
                    }
                    updateTag(param).then(res => {
                        message.success('操作成功')
                        resetForm()
                        emit('onSubmit', true)
                    })
                }
            }).catch((error) => {
                console.log('error', error);
            });
        };
        // 重置表单
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            rules,
            title,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
            selectOptions,
            onClose,
            onSubmit,
            resetForm
        };
    },
});
</script>