<template>
    <div class="employee-info">
        <div class="info-cell">
            <p class="title">员工信息</p>
            <el-form
                class="employee-info-form"
                :rules="rules"
                :model="info"
                label-width="70px"
            >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="info.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="info.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="departmentId">
                    <el-input v-model="info.departmentName" @focus="callGroupSelector" :disabled="disabled" suffix-icon="el-icon-arrow-down"></el-input>
                </el-form-item>
                <el-form-item label="职位" prop="positionName">
                    <el-input v-model="info.positionName"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="info-cell">
            <p class="title">隐私设置</p>
            <p class="tip">开启后所有员工不可见手机号码，不可发起电话、短信管理层之间不受影响</p>
            <div class="set-manager-mode">
                管理层模式
                <el-switch
                    v-model="info.managerMode"
                    @change="switchManagerMode"
                    active-color="#409EFF"
                    inactive-color="#DCDFE6">
                </el-switch>
            </div>
        </div>
        <vue-select-employee ref="parentSelector" :treeSet="treeSet" @handleSelectedList="handleSelectedList" :treeData="treeData"></vue-select-employee>
    </div>
</template>
<script>
    import { getRequest, postRequest, postJsonRequest } from '@/api/api';
    import vueSelectEmployee from "components/common/vueSelectEmployee";
    export default {
        name: "employeeInfo",
        components: {
            vueSelectEmployee
        },
        props: {
            // info: {
            //     type: Object,
            //     required: true
            // }
            isNew: {
                type: Boolean,
                default: false
            }
        },
        data() {
            let validatePhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入手机号'));
                } else {
                    let reg = /^1[34578]\d{9}$/;
                    if (!reg.test(value)) {
                        return callback(new Error("手机号格式不正确"));
                    }
                }
            }
            return {
                info: {
                    name: "",
                    phoneNumber: "",
                    departmentId: "",
                    departmentName: "",
                    managerMode: false
                },
                treeData: {},
                disabled: true,
                employeeInfo: {
                    name: "",
                    phoneNumber: "",
                    departmentName: ""
                },
                rules: {
                    name: [
                        { required: true, message: '请输入员工姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    phoneNumber: [
                        { required:true, validator: validatePhone, trigger: "blur"}
                    ],
                    departmentId: [
                        { required: true, message: '请选择部门', trigger: 'change' }
                    ]
                },
                treeSet: {
                    isSelectPerson: false,
                    dialogVisible: false,
                    isSingle: true // 是否单选
                }
            };
        },
        methods: {
            getGroupData() {
                let _this = this;
                let params = {
                    isStoreGroup: 0
                };
                getRequest("/haoban-manage-web/dept/deptListForCompany", params)
                .then(res => {
                    let treeData = [];
                    let personData = [];
                    if (res.data.errorCode == 1) {
                        treeData = res.data.result.departmentList || [];
                        personData = res.data.result.searchList || []
                    }
                    // _this.formatGroupData(treeData, personData);
                    _this.treeData = {
                        treeData,
                        personData
                    };
                    _this.disabled = false;
                })
                .catch(e => {
                    console.log(e, "error");
                });
            },
            switchManagerMode() {
                console.log(this.info.managerMode);
            },
            callGroupSelector() {
                this.treeSet.dialogVisible = true;
            },
            handleSelectedList(obj) {
                console.log(obj);
                this.info.departmentId = obj.id;
                this.info.departmentName = obj.label;
                // console.log(this.info);
            },
            getEmployInfo() {
                let that = this;
                let params = {
                    id: that.$route.query.employeeClerkId
                };
                getRequest("/haoban-manage-web/emp/findOne", params)
                .then(res => {
                    console.log(res, "employeeDetail");
                    that.info = res.data.result;
                    that.info.managerMode = !!res.data.result.managerMode;
                })
                .catch(e => {
                    console.log(e, "error");
                });
            }
        },
        beforeMount() {
            this.getGroupData();
            if (!this.isNew) {
                this.getEmployInfo();
            }
        }
    };
</script>
<style lang="scss">
    .employee-info {
        flex: 1;
        .info-cell {
            margin-bottom: 24px;
            background: #fff;
            padding-bottom: 24px;
            >.title {
                line-height: 55px;
                text-indent: 32px;
                border-bottom: 1px solid #E4E7ED;
            }
            .tip {
                color: #909399;
                text-indent: 32px;
                font-size: 14px;
                margin-top: 24px;
            }
            .set-manager-mode {
                text-indent: 52px;
                color: #606266;
                margin-top: 35px;
            }
            .employee-info-form {
                padding: 24px 60px 0;
                .el-input {
                    width: 380px;
                }
            }
        }
    }
</style>


