<template>
    <div>
        <el-dialog
            :title="addOrEditUserConfig.title"
            :visible="true"
            width="400px"
            append-to-body
            :close-on-click-modal="false"
            @close="handleClose"
        >
        <el-scrollbar class="bor">
            <div class="dialog-content">
                <el-form ref="ruleForm" 
                    :model="userInfo" 
                    :rules="rulesClient" 
                    label-width="100px" 
                    class="demo-ruleForm">
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="员工姓名" prop="realName">
                            <el-input
                            v-model.trim="userInfo.realName"
                            placeholder="请输入"
                            clearable
                            maxlength="11"
                            ></el-input>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="电话号码" prop="phone">
                            <el-input
                            v-model.trim="userInfo.phone"
                            placeholder="请输入"
                            clearable
                            maxlength="11"
                            ></el-input>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="电子邮箱" prop="email">
                            <el-input
                            v-model.trim="userInfo.email"
                            placeholder="请输入"
                            clearable
                            maxlength="30"
                            ></el-input>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="员工角色" prop="roleIds">
                            <el-select v-model="userInfo.roleIds" multiple placeholder="请选择" class="width100">
                                <el-option
                                v-for="item in userRoleOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="选择部门" prop="deptId">
                            <el-select v-model="userInfo.deptId" placeholder="请选择" class="width100">
                                <el-option
                                v-for="item in deptOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  type="flex" align="middle">
                        <el-col :span="24">
                        <el-form-item label="部门负责人" prop="deptFlag">
                            <el-switch
                                v-model="userInfo.identity"
                                active-color="#535AFF"
                                inactive-color="#dcdfe6"
                                :active-value="2"
                                :inactive-value="3">
                            </el-switch>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  type="flex" align="middle">
                        <el-col :span="24" v-if="Object.keys(addOrEditUserConfig.data).length == 0">
                            <el-form-item label="用户密码" prop="password">
                                <el-input v-model="userInfo.password" maxlength="18" type="password"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                
                </el-form>
            </div>
        </el-scrollbar>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取消</el-button>
            <el-button type="primary" @click="handleSubmit()">确认</el-button>
        </span>
        </el-dialog>
        
    </div>
</template>
<script>
import api from '@/services/systemManage'
export default {
    components: {
        
    },
    props: {
        addOrEditUserConfig: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    data() {
        return {
            userId:'',
            userInfo:{
                username:'',
                phone:'',
                email:'',
                realName:'',
                roleIds:[],
                deptId:'',
                type: 2,
                status:1,
                identity:3
            },
            rulesClient: {
                password: [
                    { required: true, message: '请输入用户密码', trigger: 'blur' },
                    { pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W_]).{6,18}$/, message: '只能输入由6-18个字母、数字、特殊字符组成的密码', trigger: ['blur', 'change']}
                ],
                realName: [
                    { required: true, message: '请输入员工姓名', trigger: ['blur','change'] }
                ],
                roleIds: [
                    { required: true, message: '请选择员工角色', trigger: ['blur','change'] }
                ],
                deptId: [
                    { required: true, message: '请选择部门', trigger: ['blur','change'] }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确手机号码', trigger: ['blur', 'change']}
                ],
                email: [
                    { required: false, message: '请输入邮箱地址', trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确邮箱地址', trigger: ['blur', 'change']}
                ],
                
            },
            userRoleOptions: [],
            deptOptions: []
            
        };
    },
    methods: {
        handleSubmit(){
            if(!this.$clickThrottle()) { return }
            let _this=this;
            this.$refs.ruleForm.validate(async(valid) => {
                if (valid) {
                    _this.userInfo.username = _this.userInfo.phone;
                    if(Object.keys(this.addOrEditUserConfig.data).length>0)
                    {
                        api.updateUserById(_this.userInfo).then(res => {
                            this.$message({
                                showClose: true,
                                message: '编辑用户成功！',
                                type: 'success'
                            });
                            this.handleClose()
                            this.$parent.getUserList(1)
                        })
                    }
                    else
                    {
                        api.addUser(_this.userInfo).then(res => {
                            this.$message({
                                showClose: true,
                                message: '新增用户成功！',
                                type: 'success'
                            });
                            this.handleClose()
                            this.$parent.getUserList(1)
                        })
                    }
                } 
                else 
                {
                    return false;
                }
            });
        },
        handleClose() {
            this.$emit('update:addOrEditUserConfig', null)
        },
    },
    async created()
    {
        if(JSON.parse(sessionStorage.getItem('userInfo'))){
            this.userId = JSON.parse(sessionStorage.getItem('userInfo')).id
        }

        api.getRoleListByUserId({userId:this.userId}).then(res => {
            res.forEach(element => {
                this.userRoleOptions.push({name:element.name,id:element.id})
            });
        })

        api.getDeptList({current: 1,size: 100,companyId:this.$store.state.userinfo.companyId}).then(res => {
            res.records.forEach(element => {
                this.deptOptions.push({name:element.name,id:String(element.id)})
            });
        })
        
        if(Object.keys(this.addOrEditUserConfig.data).length>0)
        {
            // api.getUserById({id:this.addOrEditUserConfig.data.id}).then(res => {
                
            // })
            
            this.userInfo = JSON.parse(JSON.stringify(this.addOrEditUserConfig.data));
        }

    }
};
</script>
<style lang="scss" scoped>
.dialog-content{
    padding: $size16;
    max-height:500px
}

::v-deep .el-dialog__header{
    border-bottom: 1px solid $border-color-lighter !important;
}
::v-deep  .el-dialog__footer{
    border-top: 1px solid $border-color-lighter !important;
}
</style>