<template>
    <el-dialog :visible.sync="isAddUserDialogShow" :close-on-click-modal="false" :modal-append-to-body='false' class="add-user-dialog-wrap"
        @close="$emit('close')" center width="886px" v-dialogDrag>
        <div slot="title" style="display:flex;alignItems:center;">
            <img :src="userForm.title=='添加用户'?$icons.add:$icons.edit"
                style="color:#fff;width:16px;height:16px;marginRight:5px;">
            <span style="fontSize:16px;">{{userForm.title}}</span>
        </div>
        <el-form @submit.native.prevent :model="userForm" :rules="userRule" ref="userForm" label-width="100px"
            class="demo-ruleForm" style="marginTop:15px;">
            <el-form-item label="登录账号" prop="account">
                <el-input v-model="userForm.account" placeholder="建议使用邮箱前缀或者手机号码" clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="pwd" v-if="userForm.title == '添加用户'">
                <el-input v-model="userForm.pwd" placeholder="6-12位数字与字母的组合" 
                    :type="userForm.title == '添加用户' ? 'text' : 'password' " clearable></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="userForm.name" placeholder="请输入用户名称"  clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="userForm.mobile" placeholder="请输入手机号码" clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="depart" v-if="userForm.title == '添加用户'">
                <el-cascader :options="departArr" v-model="userForm.depart" :props="form_departProp"
                    placeholder="请选择部门分组" clearable>
                </el-cascader>
            </el-form-item>
            <el-form-item label="工号" prop="employeeNumber">
                <el-input :disabled="hasEmployeeNo" v-model="userForm.employeeNumber" placeholder="请输入工号"></el-input>
            </el-form-item>
            <el-form-item label="分配角色" prop="role">
                <el-select v-model="userForm.role" placeholder="分配角色" @change="roleChange">
                    <el-option v-for="item in roleArr" :key="item.RoleId" :label="item.RoleName" :value="item.RoleId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="研究方向" prop="direct">
                <el-cascader collapse-tags :show-all-levels="false" :options="researchGroup" v-model="userForm.direct"
                    :props="form_directProp" placeholder="请选择研究方向" clearable></el-cascader>
            </el-form-item>
            <el-form-item label="职务" prop="post">
                <el-input v-model="userForm.post" placeholder="请输入职务" clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="工作地点" prop="city"
                :rules="[2,6,18].includes(userForm.role)?{ required: true, message: '工作地点不能为空', trigger: 'change' }:{}">
                    <search-dist-picker 
                        :provinceInfo="userForm.province"
                        :cityInfo="userForm.city"
                        @selected="selectRegion"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="userForm.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div style="display:flex;justify-content:center;margin:0 0 26px;">
            <el-button type="primary" style="width:80px;marginRight:24px;" @click="$emit('save')">保存</el-button>
            <el-button style="width:80px;" @click="$emit('close')">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import searchDistPicker from '@/components/searchDistPicker.vue'
    export default {
        props: {
            isAddUserDialogShow: {
                type: Boolean,
                default: false,
            },
            userForm: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            roleArr:{
                type:Array,
                default:()=>{return []}
            },
            departArr:{
                type:Array,
                default:()=>{return []}
            },
            hasEmployeeNo:{
                type:Boolean,
                default:false
            },
            researchGroup:{
                type:Array,
                default:()=>{return []}
            }
        },
        components:{searchDistPicker},
        data() {
            return {
                userRule: {
                    account:[{required: true, message: '登录账号不能为空', trigger: 'blur'}],
                    pwd:[{ required: true, message: '登录密码不能为空', trigger: 'blur' }],
                    name:[{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                    mobile:[{ validator: (rule, value, callback) => {
                        if (value === '') {
                            callback(new Error('手机号码不能为空'));
                        }else if(isNaN(value.trim())) {
                            callback(new Error('请输入正确的手机号格式'));
                        } else {
                            callback();
                        }
                    }, trigger: 'blur'}],
                    depart:[{ required: true, message: '部门分组不能为空', trigger: 'change' }],
                    employeeNumber:[{validator:(rule,value,callback)=>{
                        if(!value){
                            callback()
                            return 
                        }
                        // 取消空格
                        let tempValue = parseInt(value.replaceAll(' ',''))
                        if(!tempValue || value.replaceAll(' ','').length!=4){
                            callback(new Error('请输入四位数字'))
                        }else{
                            callback()
                        }
                    },trigger:'blur'}],
                    role:[{ required: true, message: '角色不能为空', trigger: 'change' }],
                },
                form_departProp:{
                    value:'DepartmentId',
                    label:'DepartmentName',
                    children:'Child',
                    checkStrictly:true
                },//部门分组选择配置
                form_directProp: {
                    value:'tag_id',
                    label:'tag_name',
                    children:'tags',
                    multiple: true
                }, //研究方向选择配置
            };
        },
        methods: {
            selectRegion(data){
                this.$emit('selectRegion',data)
            },
            roleChange(value){
                if([2,6,18].includes(value)) return 
                this.$refs.userForm && this.$refs.userForm.clearValidate(['city'])
            },
        },
    };
</script>

<style lang="scss">
.add-user-dialog-wrap{
    .select-dist-picker{
        .el-select{
            width:145px;
        }
    }
}
</style>
<style scoped lang="scss">
.add-user-dialog-wrap{
    .demo-ruleForm{
        display: flex;
        flex-wrap: wrap;
        gap:0 10px;
        .el-form-item{
            .el-input,.el-cascader,.el-select{
                width:300px;
            }
        }
    }
}
</style>