<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">
                <!-- 名称 -->
                <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 { savePosts } from '/@/api/sys/zhiwei';

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',
        })
        const form = reactive({
            departid: "",
            parentId: "",
            departName: "",
            orderId: '',
            orgId: ""
        });
        const rules = {
            departName: [{
                required: true,
                message: '请输入职位名称',
                trigger: 'blur'
            }],
            orderId: [{
                required: true,
                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 += ''
        })
        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(() => {
                //此处调用新增
                if (title.value === '新增职位') {
                    form.departid = uuidv4()
                } else {
                    form.orgId = null
                }
                form.orderId = parseInt(form.orderId)
                savePosts(form).then(res => {
                    if (res.datas === 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>