<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>
