<template>
    <a-modal :title="title" :visible="true" :width="600" :footer-style="{ textAlign: 'right' }" @cancel="onClose" centered>
        <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="pName">
                    <a-input v-model:value="form.pName" disabled />
                </a-form-item>
                <!-- 节点名称 -->
                <a-form-item label="节点名称" name="name">
                    <a-input v-model:value="form.name" />
                </a-form-item>
                <!-- 节点别名 -->
                <a-form-item label="节点别名" name="alaisename">
                    <a-input v-model:value="form.alaisename" />
                </a-form-item>
                <!-- 节点编码 -->
                <!-- <a-form-item label="节点编码" name="code">
                <a-input v-model:value="form.code" />
            </a-form-item> -->
                <!-- 节点分类 -->
                <a-form-item label="节点分类" name="type">
                    <a-input v-model:value="form.type" disabled />
                </a-form-item>
                <!-- 节点描述 -->
                <a-form-item label="节点描述" name="remark">
                    <a-textarea v-model:value="form.remark" />
                </a-form-item>
            </a-form>
            <div :style="{
                position: 'absolute',
                right: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
                zIndex: 1,
            }">
                <a-button style="margin-right: 8px" @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 { addNode } from '/@/api/sys/dirManager';
import { session } from '/@/utils/Memory';
import { v4 as uuidv4 } from 'uuid';

const props = {
    formData: {
        type: Object,
        default: () => {
            return {}
        }
    },
    drawerTitle: {
        type: String,
        default: "新增岗位"
    }
}
export default defineComponent({
    name: 'DirManagerDrawer',
    components: {},
    props,
    setup(props, { emit }) {
        const form = reactive({
            id: "",
            pid: "",
            pName: "",
            name: "",
            alaisename: "",
            sortindex: 0,
            // code: "",
            type: "",
            remark: ""
        });
        const rules = {
            name: [{
                required: true,
                message: '请输入节点名称',
                trigger: 'blur'
            }],
            // code: [{
            //     required: true,
            //     message: '请输入节点编码',
            //     trigger: 'blur'
            // }],
            alaisename: [{
                required: true,
                message: '请选择节点别名',
                trigger: 'blur'
            }],
            remark: [{
                required: true,
                message: '请输入节点描述',
                trigger: 'blur'
            }]
        };
        const title = ref(props.drawerTitle)
        const formRef = ref()

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

        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 onClose = () => {
            emit('closeDialog')
            resetForm()
        };
        // 提交信息
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                form.id = uuidv4();
                form.pName = undefined;
                form.updateuser = session.getItem('userInfo').EMPLOYEE.NAME || '';
                form.userid = session.getItem('userInfo').EMPLOYEE.EMPLOYEE_ID || '';
                let param = {
                    1: session.getItem('tokenV2'),
                    2: JSON.stringify(form)
                }
                addNode(param).then(res => {
                    if (res.status === '0') {
                        message.success('添加成功')
                        emit('onSubmit', true, form.name)
                    }
                    onClose();
                })
            }).catch((error) => {
                console.log('error', error);
            });
        };
        // 重置表单
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            rules,
            title,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
            onClose,
            onSubmit,
            resetForm
        };
    },
});
</script>