<template>
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title" style="width: 700px; padding-bottom: 20px">
        <div class="global_dialog_content">
            <el-form ref="FormDataRef" :model="form.data" :rules="form.rules" label-width="100">
                <el-form-item label="员工姓名" prop="name">
                    <el-input v-model="form.data.name" placeholder="请输入员工姓名" style="width: 320px" :disabled="pageNum == 2" />
                </el-form-item>
                <el-form-item label="岗位" prop="roleId">
                    <el-select v-model="form.data.roleId" placeholder="请选择岗位" style="width: 320px" :disabled="pageNum == 2">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="form.data.mobile" placeholder="请输入手机号" style="width: 320px" :disabled="pageNum == 2" />
                </el-form-item>
                <el-form-item label="初始密码" prop="password" v-if="!pageNum">
                    <el-input v-model="form.data.password" placeholder="请输入初始密码" style="width: 320px" />
                    <p style="color: #dedfe0">提示信息：如果初始密码为空，则默认初始密码为123456</p>
                </el-form-item>
                <el-form-item label="新密码" prop="password" v-else>
                    <el-input v-model="form.data.password" placeholder="请输入新密码" style="width: 320px" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="submitting" type="primary" @click="onClickSave">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { sysPositionList, sysUserSave, updatePassword } from '@/api/sys.js';

const dialogVisible = ref(false);
const FormDataRef = ref(null);
const submitting = ref(false);
const title = ref('');
const pageNum = ref('');
const options = ref([]);
const userId = ref('');
const emits = defineEmits();
const form = reactive({
    data: {
        name: '',
        mobile: '',
        password: '',
        roleId: '',
        type: 1,
    },
    rules: {
        name: [{ required: true, message: '员工姓名不能为空', trigger: 'blur' }],
        mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的手机号',
                trigger: 'blur',
            },
        ],
        roleId: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
    },
});
const getOption = () => {
    const params = {
        pageNum: 1,
        pageSize: 10000,
    };
    sysPositionList(params).then((res) => {
        options.value = res.data.rows;
    });
};
const onShowDialog = (val, page) => {
    if (page) {
        pageNum.value = page;
    } else {
        pageNum.value = '';
    }
    title.value = !val ? '新增员工' : '编辑员工';
    if (page == 2) {
        title.value = '修改密码';
    }
    if (FormDataRef.value) {
        FormDataRef.value.clearValidate();
    }
    dialogVisible.value = true;
    if (val) {
        userId.value = val.id;
        form.data = { ...val };
        // form.data.roleId = val.roleList.map((i) => i.id);
    }
    getOption();
};

const onClickSave = () => {
    FormDataRef.value.validate((valid) => {
        if (valid) {
            submitting.value = true;
            // // return false;
            // if (pageNum.value == 2) {
            // 修改密码时
            // updatePassword({
            //     id: userId.value,
            //     password: form.data.password,
            // })
            //     .then(() => {
            //         ElMessage.success('操作成功');
            //         handleClose();
            //         emits('success');
            //         submitting.value = false;
            //     })
            //     .catch(() => {
            //         submitting.value = false;
            //     });
            // } else {
            // 新增、编辑员工时
            const params = {
                name: form.data.name,
                mobile: form.data.mobile,
                password: form.data.password,
                roleId: form.data.roleId,
                type: 1,
            };
            if (pageNum.value == 1) {
                params.id = userId.value;
            }
            sysUserSave(params)
                .then(() => {
                    ElMessage.success('操作成功');
                    handleClose();
                    emits('success');
                    submitting.value = false;
                })
                .catch(() => {
                    submitting.value = false;
                });
            // }
        }
    });
};

const handleClose = () => {
    form.data = {};
    dialogVisible.value = false;
    if (FormDataRef.value) {
        FormDataRef.value.clearValidate();
    }
};
defineExpose({
    onShowDialog,
});
</script>
<style lang="scss" scoped></style>
