<template>
    <div class="employee-info">
        <div class="info-cell">
            <p class="title">员工信息</p>
            <el-form
                class="employee-info-form"
                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="departmentName">
                    <el-input v-model="info.departmentName"></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>
    </div>
</template>
<script>
    export default {
        name: "employeeInfo",
        props: {
            info: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                employeeInfo: {
                    name: "",
                    phoneNumber: "",
                    departmentName: ""
                }
            };
        },
        methods: {
            switchManagerMode() {
                console.log(this.info.managerMode);
            }
        }
    };
</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>


