<template>
    <a-modal :visible="true" :maskClosable="false" centered :destroyOnClose="true" :title="title"
        :wrapClassName="wrapClassName" :width="width" @cancel="onClose" @ok="onSubmit">
        <div class="content">
            <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <!-- 父级id -->
                <a-form-item label="上级机构" name="parentId">
                    <a-tree-select v-model:value="form.parentId" style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData"
                        placeholder="不选择时创建顶层机构"
                        :replaceFields="{ children: 'children', title: 'name', key: 'departid', value: 'departid' }">
                    </a-tree-select>
                </a-form-item>
                <!-- 名称 -->
                <a-form-item label="机构名称" name="departName">
                    <a-input v-model:value="form.departName" style="width: 100%" placeholder="请输入名称" />
                </a-form-item>
                <!-- 排序 -->
                <a-form-item label="机构排序" name="orderId">
                    <a-input v-model:value="form.orderId" style="width: 100%" placeholder="请输入序号" />
                </a-form-item>
            </a-form>
        </div>
        <template #footer>
            <div class="btns" style="display: flex;justify-content: center;">
                <a-button class="btn" @click="onClose"
                    style="width: 64px;height: 34px;margin-right: 25px;color: #333333;">取消</a-button>
                <a-button class="btn" @click="onSubmit"
                    style="width: 64px;height: 34px;background: #0671DD;color: #ffffff;">确定</a-button>
            </div>
        </template>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import moment from 'moment';
import { v4 as uuidv4 } from 'uuid';
import { structureList, saveStructure, structureListRootId } from '/@/api/sys/menu';

const props = {
    formData: {
        type: Object,
        default: {}
    },
    title: {
        type: String,
        default: "新增机构"
    }
}
export default defineComponent({
    name: 'modal',
    components: {},
    props,
    setup(props, { emit }) {
        const data = reactive({
            width: '440px',
            wrapClassName: 'modal-wrap',
            treeData: []
        })
        const form = reactive({
            departid: "",
            departName: "",
            orderId: "",
            parentId: ""
        });
        const rules = {
            parentId: [{
                required: false,
                message: '请选择父级',
                trigger: 'blur'
            }],
            departName: [{
                required: true,
                message: '请输入名称',
                trigger: 'blur'
            }],
            orderId: [{
                required: true, pattern: /(^[0-9]\d*$)/, message: "请输入正确序号", trigger: 'change'
            }]
        };
        const title = ref(props.title)
        const formRef = ref()

        onMounted(() => {
            if (Object.keys(props.formData).length) {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
            }
            form.orderId += ''
            structureList().then(res => {
                data.treeData = res
            })
        })
        watch(
            () => [props.formData, props.title],
            ([newF, newD]) => {
                for (let key in form) {
                    form[key] = props.formData[key]
                }
                form.orderId += ''
                title.value = newD
            },
            {
                immediate: true,
                deep: true
            }
        )
        // 关闭请求弹窗
        const onClose = () => {
            emit('closeModal')
            resetForm()
        };
        const onSubmit = () => {
            formRef.value.validate().then(async () => {
                if (!form.parentId) {
                    form.parentId = await structureListRootId()
                }
                //此处调用新增
                if (title.value === '新增机构') {
                    form.departid = uuidv4()
                }
                saveStructure(form).then(res => {
                    if (res === 1) {
                        message.success('操作成功')
                        emit('onSubmit', true)
                    } else {
                        message.error('操作失败')
                        emit('onSubmit', false)
                    }
                    onClose()
                })
            }).catch((error) => {
                console.log('error', error);
            });
        };
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            rules,
            title,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
            ...toRefs(data),
            //func
            onClose,
            onSubmit
        };
    },
});
</script>
<style lang="less" scoped>
.modal-wrap {
    .content {
        padding: 20px 10px 10px 20px;
        margin-top: 10px;
    }

    ::v-deep .ant-modal-footer {
        .btn {
            width: 64px;
            height: 34px;
            background-color: red;
        }
    }
}
</style>