<template>
    <div class="addUserDialog">
        <el-dialog width="636px" center @close="cancel()" title="新增用户" v-if="addUserData.dialogVisible"
            :visible.sync="addUserData.dialogVisible">
            <el-form label-width="80px" ref="ruleForm" :rules="rules" :model="addUserForm">
                <el-form-item label="账号名称" prop="userName">
                    <el-input placeholder="请输入账号名称" v-model="addUserForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="nickName">
                    <el-input placeholder="请输入真实姓名" v-model="addUserForm.nickName"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="addUserForm.sex" label="1">男</el-radio>
                    <el-radio v-model="addUserForm.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="所属部门" prop="deptName">
                    <el-select style="width: 365px;" clearable v-model="addUserForm.deptName" placeholder="部门名称"
                        ref="selectTree">
                        <el-option :key="addUserForm.deptId" :value="treeData.id" :label="treeData.label" hidden />
                        <el-tree :data="treeData" :props="defaultProps" :node-key="treeData.id" accordion highlight-current
                            @node-click="handleNodeClick" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属角色" prop="roleIds">
                    <!-- <el-input v-model="addUserForm.roleIds"></el-input> -->
                    <el-select style="width: 365px;" v-model="addUserForm.roleIds" multiple placeholder="请选择">
                        <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话" prop="phoneNum">
                    <el-input placeholder="请输入联系电话" :maxLength="11" v-model="addUserForm.phoneNum"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱" prop="email">
                    <el-input placeholder="请输入联系邮箱" v-model="addUserForm.email"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <!-- <el-switch v-model="addUserForm.status" style="display: block;margin-top: 8px;" active-color="#00974B"
                        inactive-color="#ff4949" active-text="启用" inactive-text="停用">
                    </el-switch> -->
                    <el-switch class="switchStyle" v-model="addUserForm.status" active-text="启用" inactive-text="停用"
                        active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="search" @click="addUser()">保 存</div>
                <div class="reset" @click="cancel()">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getDeptTree, roleList ,getAvailableRoleList} from '@/api/sysManage'
export default {
    name: 'addUserDialog',
    props: {
        addUserData: {
            type: Object,
            default: {}
        }
    },
    created() {
        this.getDeptTree()
        this.getRoleList()
    },
    data() {
        let checkPhone = (rule, value, callback) => {
            if (value) {
                let isPhone = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
                let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
                // if () {
                //   cbfn("");
                // }
                if (!reg.test(value) && !isPhone.test(value) && value) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        // 邮箱校验规则
        const checkEmail = (rule, value, callback) => {
            let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (emailReg.test(value) || value == '') {
                return callback();
            } else {
                callback(new Error("邮箱格式错误"));
            }
        };
        return {
            addUserForm: {
                userName: '',
                // password:'',
                nickName: '',
                sex: '1',
                deptId: '',
                roleIds: '',
                phoneNum: '',
                email: '',
                status: true,
                deptName: ''
            },
            treeData: [],
            roleOptions: [],
            rules: {
                userName: [{ required: true, message: '请输入账号名称', trigger: 'blur' },],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                nickName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' },],
                deptName: [{ required: true, message: '请选择所属部门', trigger: 'blur' },],
                roleIds: [{ required: true, message: '请选择所属角色', trigger: 'blur' },],
                phoneNum: [{ validator: checkPhone, },],
                email: [{required:false, validator: checkEmail, trigger:'blur'},]
            }
        }
    },
    methods: {
        getDeptTree() {
            getDeptTree().then(res => {
                this.treeData = res.data
            })
        },
        handleNodeClick(v) {
            this.addUserForm.deptId = v.id
            this.addUserForm.deptName = v.label
        },
        getRoleList() {
            // roleList({
            //     pageNum: 1,
            //     pageSize: 100000,
            //     roleName: '',
            //     status: '',
            //     roleKey: ''
            // }).then(res => {
            //     this.roleOptions = []
            //     if (res.code == 200) {
            //         res.data.records.forEach(item => {
            //             this.roleOptions.push({
            //                 label: item.roleName,
            //                 value: item.roleId
            //             })
            //         })
            //     }
            // }).catch(err => {
            // })
            let params = {}
            getAvailableRoleList(params).then(res => {            
                this.roleOptions = []
                if (res.code == 200) {                    
                    res.data.forEach(item => {
                        this.roleOptions.push({
                            label: item.roleName,
                            value: item.roleId
                        })
                    })
                }
            })
        },
        cancel() {
            this.addUserData.dialogVisible = false
        },
        addUser() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.addUserForm.sex = parseInt(this.addUserForm.sex)
                    this.$emit('addUser', this.addUserForm)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
    div {
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
    }

    div:hover {
        cursor: pointer;
    }

    .search {
        margin: 0 12px;
        background-color: #2766DD;
        color: #fff;
    }

    .search:hover {
        background-color: #4D85F4;
    }

    .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
    }

    .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
    }
}

::v-deep .el-dialog__body {
    padding: 20px 95px !important;
}

// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #2766DD !important;
    border-color: #2766DD !important;
}
</style>