<style>
    .personalData {
        justify-content: space-between;

    }

    .personalData .box_l,
    .box_r {
        background: #fff;
        border-radius: 6px;
    }

    .personalData .box_l {
        width: 380px;
        margin-right: 30px;
        padding: 40px;
    }

    .personalData .box_r {
        flex: 1;
        width: 1px;
        padding: 20px 26px;
    }
    .personalData .box_r2{
        flex: 1;
        width: 1px;
        padding: 0px 0px;

    }

    .personalData .box_l_t {
        margin-top: 28px;
        font-size: 14px;
        color: #999999;
    }

    .personalData .box_l_t_l {
        color: #3F4254;
        font-weight: bold;
    }

    .personalData .box_l_title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #2961FE;
        border-radius: 4px;
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
        padding-left: 39px;
        /* margin-top: 55px; */
        margin-top: 8px;
        cursor: pointer;
    }

    .personalData .box_l_cen {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: bold;
        color: #3F4254;
        padding-left: 39px;
        margin-top: 8px;
        cursor: pointer;
        justify-content: space-between;
    }

    .personalData .headportrait {
        width: 120px;
        height: 120px;
        border-radius: 20px;
        position: relative;
        margin-top: 20px;
    }

    .personalData .editbianji {
        position: absolute;
        right: -10px;
        top: -10px;
        width: 26px;
        height: 26px;
        background: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 10px 0px rgba(2, 44, 66, 0.15);
    }

    .personalData .box_r_title {
        font-size: 12px;
        font-weight: bold;
        color: #000000;
        margin-top: 27px
    }

    .personalData .box_r_input {
        width: 55%;

        margin-top: 20px;
    }
</style>
<template>
    <div class="page-body personalData row" style="background: transparent;">
        <div class="box_l">
            <div class="q-mt-lg flex">
                <q-avatar size="100px" font-size="36px" rounded style="background:#C9F7F5" text-color="white">
                    <img :src="showObj.UserIcon" v-if="showObj.UserIcon">
                    <span v-else>{{showObj.AccountName.substring(0,1)}}</span>
                </q-avatar>
                <div class="col q-ml-md">
                    <div class="text-weight-bold" style="font-size:18px;font-weight: 800;color: #3F4254;">
                        {{showObj.AccountName}}</div>
                    <div class="text-muted" style="font-size:14px;margin-top: 12px;">
                        {{showObj.SchoolName}}·{{showObj.PostName}}</div>
                    <div class="q-mt-xs">
                        <q-btn style="background: var(--q-color-negative);color: white;margin-top: 10px;" size="sm" @click="logout">退出登录</q-btn>
                    </div>
                </div>
            </div>
            <div class="box_l_t" style="margin-top: 40px;">
                <span class="box_l_t_l">邮箱：</span>
                <span>{{showObj.Email}}</span>
            </div>
            <div class="box_l_t">
                <span class="box_l_t_l">电话：</span>
                <span>{{showObj.UserMobile}}</span>
            </div>
            <div class="box_l_t" style="margin-bottom: 55px;">
                <span class="box_l_t_l">部门：</span>
                <span>{{showObj.DeptName}}</span>
            </div>
            <div :class="rightType==0?'box_l_title':'box_l_cen'" @click='rightType=0'>概要信息</div>
            <!-- <div :class="rightType==3?'box_l_title':'box_l_cen'" @click='rightType=3'>预警信息</div> -->
            <div :class="rightType==1?'box_l_title':'box_l_cen'" @click='rightType=1'>账户资料</div>
            <div :class="rightType==2?'box_l_title':'box_l_cen'" @click='rightType=2'>密码修改</div>
        </div>
        <!-- 个人资料 -->
        <div v-if='rightType == 0' class="box_r2">
            <summaryInfo></summaryInfo>
        </div>
        <div class="box_r" v-if='rightType !=0'>
            <template v-if='rightType == 1'>
                <div style="font-size: 16px;font-weight: bold;color: #000000;">账户资料</div>
                <div class="box_r_title">账户资料</div>
                <div class="headportrait">
                    <q-avatar size="120px" font-size="36px" rounded style="background:#C9F7F5" text-color="white">
                        <img :src="datamodify.UserIcon" v-if="datamodify.UserIcon">
                        <span v-else>{{showObj.AccountName.substring(0,1)}}</span>

                    </q-avatar>
                    <el-upload class="editbianji" :http-request="uploadFileBtn" :multiple="false" action=''
                        accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :show-file-list="false">
                        <q-icon name="edit" />
                    </el-upload>
                </div>

                <div style="font-size: 12px;color: #999999;margin-top: 12px;">图片格式：png、jpg、jpeg</div>
                <div class="box_r_title">基础资料</div>
                <div class="box_r_input">
                    <q-input  v-model="datamodify.EmployeeName" label="姓名"
                        :rules="[val => !!val || '姓名不能为空']" lazy-rules filled maxlength="20" />
                </div>
                <div class="box_r_input">
                    <q-select filled stack-label option-value="SId" option-label="SName" v-model="datamodify.School_Id"
                        ref="SId" :options="CompanyList" label="校区" :dense="false" emit-value map-options />
                </div>
                <div class="box_r_title">联系方式</div>
                <div class="box_r_input">
                    <q-input  v-model="datamodify.EmployeeTel" label="电话" type='number'
                        :rules="[val => !!val || '电话不能为空']" lazy-rules filled maxlength="11" />
                </div>
                <div class="box_r_input">
                    <q-input  v-model="datamodify.Email" label="邮箱"
                        :rules="[val => !!val || '邮箱不能为空']" lazy-rules filled maxlength="20" />
                </div>
                <q-btn color="primary" style="width: 300px;margin-top: 50px;" :loading="loading1" @click='dataSubmit'>
                    <div class="ellipsis">
                        提交
                    </div>
                </q-btn>
            </template>
            <template v-if='rightType == 2'>
                <div style="font-size: 16px;font-weight: bold;color: #000000;">密码修改</div>
                <form @submit.prevent.stop="passwordSubmit"  class="q-gutter-md">
                    <div class="box_r_title">原密码</div>
                    <div class="box_r_input">
                        <q-input  v-model="passwordMsg.OldPassWord" label="请输入旧密码" type='password' ref='OldPassWord'
                            :rules="[val => !!val || '请输入旧密码']" lazy-rules filled  />

                    </div>
                    <div class="box_r_title">新密码</div>
                    <div class="box_r_input">
                        <q-input  v-model="passwordMsg.NewPassWord" label="请输入新密码" type='password' ref='NewPassWord'
                            :rules="[val => !!val || '请输入新密码']" lazy-rules filled  />
                    </div>
                    <div class="box_r_input">
                        <q-input  v-model="passwordMsg.NewSurePassWord" label="请再次输入新密码" type='password' ref='NewSurePassWord'
                            :rules="[val => !!val || '请再次输入新密码']" lazy-rules filled  />
                    </div>
                    <q-btn color="primary" style="width: 300px;margin-top: 50px;" :loading="loading2" label="确定修改" type="submit" > </q-btn>
                  

                </form>
            </template>
        </div>
    </div>
</template>
<script>
    import {
        setEmployeeBaseInfo,
        updateUserPassword
    } from '../../api/users/user'
    import {
        getSchoolDropdown,
    } from '../../api/school/index'
    import {
        UploadSelfFile
    } from '../../api/common/common'
    const defaultpassword = {
        OldPassWord:'',
        NewPassWord:'',
        NewSurePassWord:'',
    }
    import summaryInfo from '../../components/user/summaryInfo'
    import Lockr from 'lockr'
    export default {
        meta: {
            title: "个人资料"
        },
        components: {
            summaryInfo
        },
        data() {
            return {
                loading1: false,
                loading2:false,
                showObj: {},
                rightType: 0,//右边显示类型
                datamodify: {},
                CompanyList: [],
                passwordMsg:Object.assign({},defaultpassword),
            }
        },
        created() {
            this.showObj = this.getLocalStorage();
            this.datamodify = {
                EmployeeName: this.showObj.AccountName,
                UserIcon: this.showObj.UserIcon,
                EmployeeTel: this.showObj.UserMobile,
                Email: this.showObj.Email,
                School_Id: this.showObj.School_Id,

            }
        },
        mounted() {
            this.getBranchList()
        },
        methods: {
            getBranchList() {//获取校区
                getSchoolDropdown({}).then(res => {
                    this.CompanyList = res.Data;
                }).catch(() => {

                })
            },

            uploadFileBtn(file) { //上传
                UploadSelfFile('studentIcon', file.file, x => {
                    if (x.Code == 1) {
                        this.datamodify.UserIcon = x.FileUrl
                    }
                }, 1);
            },
            logout() {//退出登录
                this.$store
                    .dispatch('LogOut')
                    .then(() => {
                        this.$router.push('/login')
                    })
                    .catch((e) => {

                    })
            },
            dataSubmit() {//资料提交
                if (this.datamodify.UserIcon == null || this.datamodify.UserIcon == '') {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `照片不能为空`
                    })
                    return
                }
                if (this.datamodify.EmployeeName == null || this.datamodify.EmployeeName == '') {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `姓名不能为空`
                    })
                    return
                }
                if (this.datamodify.EmployeeTel == null || this.datamodify.EmployeeTel == '') {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `电话不能为空`
                    })
                    return
                }
                if (this.datamodify.Email == null || this.datamodify.Email == '') {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `邮箱不能为空`
                    })
                    return
                }
                setEmployeeBaseInfo(this.datamodify).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            type: 'iconfont icon-chenggong',
                            color: 'accent',
                            position: "top",
                            message: res.Message
                        })
                        
     
                        this.showObj.AccountName  = this.datamodify.EmployeeName
                        this.showObj.UserIcon  = this.datamodify.UserIcon
                        this.showObj.UserMobile  = this.datamodify.EmployeeTel
                        this.showObj.Email  = this.datamodify.Email
                        this.showObj.School_Id  = this.datamodify.School_Id
                        
                        this.CompanyList.map(x=>{
                            if(x.SId == this.datamodify.School_Id){
                                this.showObj.SchoolName = x.SName;
                                return
                            }
                        })
                        Lockr.set("loginUserInfo",this.showObj)
                        this.$store.dispatch("setUserUpdate",this.showObj)
                        // location.reload()
                        // this.$router.push({
                        //     path: this.redirect || '/home'
                        // })
                        // let obj = JSON.parse(JSON.stringify(this.datamodify))
                        // obj.SchoolName =  this.showObj.SchoolName
                        // setTimeout(() => {
                        //     this.MsgBus.$emit('add',obj);

                        // }, 10);
                    }
                }).catch(() => {

                })
            },
      
            passwordSubmit () {
                this.$refs.OldPassWord.validate()
                this.$refs.NewPassWord.validate()
                this.$refs.NewSurePassWord.validate()
                if (this.$refs.OldPassWord.hasError || this.$refs.NewPassWord.hasError|| this.$refs.NewSurePassWord.hasError) {
                    this.formHasError = true
                }
                else {
                    // 掉接口
                    updateUserPassword(this.passwordMsg).then(res => {
                        if (res.Code == 1) {
                            this.$q.notify({
                                type: 'iconfont icon-chenggong',
                                color: 'accent',
                                position: "top",
                                message: res.Message
                            })
                            // this.passwordMsg = Object.assign({},defaultpassword)
                            this.$q.dialog({
                                title: '功能提示',
                                message: '密码修改需重新登录',
                                persistent: true
                            }).onOk(() => {
                                this.$store
                                    .dispatch('LogOut')
                                    .then(() => {
                                        this.$router.push('/login')
                                    })
                                    .catch((e) => {

                                    })
                            });

                        }
                    }).catch(() => {

                    })
                }
            },
    



        },

    }

</script>
<style lang="sass">
    @import url('~assets/css/table.sass')
</style>