<template>  
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">  
        <!-- 表单，使用dataForm作为模型，进行用户信息的新增或修改 -->  
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">  
            <!-- 用户名输入框 -->  
            <el-form-item label="用户名" prop="userName">  
                <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>  
            </el-form-item>  
            <!-- 密码输入框，若为新增则必填 -->  
            <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">  
                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>  
            </el-form-item>  
            <!-- 确认密码输入框，若为新增则必填 -->  
            <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">  
                <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>  
            </el-form-item>  
            <!-- 邮箱输入框 -->  
            <el-form-item label="邮箱" prop="email">  
                <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>  
            </el-form-item>  
            <!-- 手机号输入框 -->  
            <el-form-item label="手机号" prop="mobile">  
                <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>  
            </el-form-item>  
            <!-- 角色选择 -->  
            <el-form-item label="角色" size="mini" prop="roleIdList">  
                <el-checkbox-group v-model="dataForm.roleIdList">  
                    <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>  
                </el-checkbox-group>  
            </el-form-item>  
            <!-- 状态选择 -->  
            <el-form-item label="状态" size="mini" prop="status">  
                <el-radio-group v-model="dataForm.status">  
                    <el-radio :label="0">禁用</el-radio>  
                    <el-radio :label="1">正常</el-radio>  
                </el-radio-group>  
            </el-form-item>  
        </el-form>  
        <!-- 对话框底部按钮 -->  
        <span slot="footer" class="dialog-footer">  
            <el-button @click="visible = false">取消</el-button>  
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
        </span>  
    </el-dialog>  
</template>  

<script>  
import { isEmail, isMobile } from '@/utils/validate' // 导入验证函数  

export default {  
    data() {  
        // 表单验证规则  
        var validatePassword = (rule, value, callback) => {  
            if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且密码为空  
                callback(new Error('密码不能为空'))  
            } else {  
                callback() // 验证通过  
            }  
        }  
        var validateComfirmPassword = (rule, value, callback) => {  
            if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且确认密码为空  
                callback(new Error('确认密码不能为空'))  
            } else if (this.dataForm.password !== value) { // 确认密码与密码不一致  
                callback(new Error('确认密码与密码输入不一致'))  
            } else {  
                callback() // 验证通过  
            }  
        }  
        // 验证邮箱格式  
        var validateEmail = (rule, value, callback) => {  
            if (!isEmail(value)) {  
                callback(new Error('邮箱格式错误'))  
            } else {  
                callback() // 验证通过  
            }  
        }  
        // 验证手机格式  
        var validateMobile = (rule, value, callback) => {  
            if (!isMobile(value)) {  
                callback(new Error('手机号格式错误'))  
            } else {  
                callback() // 验证通过  
            }  
        }  
        return {  
            visible: false, // 控制对话框可见性  
            roleList: [], // 角色列表  
            // 表单数据  
            dataForm: {  
                id: 0, // 用户ID  
                userName: '', // 用户名  
                password: '', // 密码  
                comfirmPassword: '', // 确认密码  
                salt: '', // 盐值  
                email: '', // 邮箱  
                mobile: '', // 手机号  
                roleIdList: [], // 角色ID列表  
                status: 1 // 状态（1: 正常, 0: 禁用）  
            },  
            // 表单验证规则  
            dataRule: {  
                userName: [  
                    { required: true, message: '用户名不能为空', trigger: 'blur' }  
                ],  
                password: [  
                    { validator: validatePassword, trigger: 'blur' }  
                ],  
                comfirmPassword: [  
                    { validator: validateComfirmPassword, trigger: 'blur' }  
                ],  
                email: [  
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },  
                    { validator: validateEmail, trigger: 'blur' }  
                ],  
                mobile: [  
                    { required: true, message: '手机号不能为空', trigger: 'blur' },  
                    { validator: validateMobile, trigger: 'blur' }  
                ]  
            }  
        }  
    },  
    methods: {  
        // 初始化表单，加载角色列表和用户信息  
        init(id) {  
            this.dataForm.id = id || 0 // 设置用户ID  
            // 获取角色列表  
            this.$http({  
                url: this.$http.adornUrl('/sys/role/select'),  
                method: 'get',  
                params: this.$http.adornParams() // 获取请求参数  
            }).then(({ data }) => {  
                this.roleList = data && data.code === 200 ? data.list : [] // 更新角色列表  
            }).then(() => {  
                this.visible = true // 显示对话框  
                this.$nextTick(() => {  
                    this.$refs['dataForm'].resetFields() // 重置表单  
                })  
            }).then(() => {  
                // 如果为修改状态，则加载用户信息  
                if (this.dataForm.id) {  
                    this.$http({  
                        url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),  
                        method: 'get',  
                        params: this.$http.adornParams()  
                    }).then(({ data }) => {  
                        if (data && data.code === 200) {  
                            // 填充表单数据  
                                                        this.dataForm.userName = data.user.username // 设置用户名  
                            this.dataForm.salt = data.user.salt // 设置盐值（如果需要，这部分可以在保存时再使用）  
                            this.dataForm.email = data.user.email // 设置邮箱  
                            this.dataForm.mobile = data.user.mobile // 设置手机号  
                            this.dataForm.roleIdList = data.user.roleIdList // 设置角色ID列表  
                            this.dataForm.status = data.user.status // 设置用户状态  
                        }  
                    })  
                }  
            })  
        },  
        // 表单提交处理  
        dataFormSubmit() {  
            // 验证表单  
            this.$refs['dataForm'].validate((valid) => {  
                if (valid) { // 如果表单验证通过  
                    this.$http({  
                        // 根据是否存在ID选择保存或更新接口  
                        url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),  
                        method: 'post',  
                        data: this.$http.adornData({  
                            // 提交表单数据  
                            'userId': this.dataForm.id || undefined,  
                            'username': this.dataForm.userName,  
                            'password': this.dataForm.password,  
                            'salt': this.dataForm.salt,  
                            'email': this.dataForm.email,  
                            'mobile': this.dataForm.mobile,  
                            'status': this.dataForm.status,  
                            'roleIdList': this.dataForm.roleIdList  
                        })  
                    }).then(({ data }) => {  
                        // 处理接口返回的数据  
                        if (data && data.code === 200) {  
                            // 操作成功的提示  
                            this.$message({  
                                message: '操作成功',  
                                type: 'success',  
                                duration: 1500,  
                                onClose: () => {  
                                    this.visible = false // 关闭对话框  
                                    this.$emit('refreshDataList') // 触发刷新数据列表事件  
                                }  
                            })  
                        } else {  
                            // 操作失败的提示  
                            this.$message.error(data.msg) // 显示错误信息  
                        }  
                    })  
                }  
            })  
        }  
    }  
}  
</script>