<template>
  <div class="personSetting">

    <el-button v-if="infoswich==1" type="text" class="passWard-btn"  @click="openPassword"><svg-icon icon-class="passWard-edit" style="margin-right: 10px;font-size: 22px;"></svg-icon>修改密码</el-button>
    <div class="avatar" title="修改头像" @click="openAvatar">
      <el-avatar :src="avatar" :size="116" alt=""></el-avatar>
      <!-- <span>{{userInfo.name}}</span> -->
      <!-- <el-button type="primary" @click="openAvatar">修改头像</el-button> -->
      <div @click="openAvatar" class="avatarhover">
       <img :src="`${webBaseUrl}/images/phone.png`" alt="">
       <h6>修改头像</h6>
    </div>
    </div>

    <!-- <el-form :model="form" label-position="right" label-width="80px"> -->
      <div class="informationItem">
        <div class="info-header">
          <h4 @click="infoswich=1" :class="infoswich == 1 ? 'h4active' : '' ">基础信息</h4>
          <h4 v-if="teaechswich" @click="infoswich=0" :class="infoswich == 0 ? 'h4active' : '' ">教师信息</h4>
        </div>
        <div v-if="infoswich == 0">
          <el-button type="primary"  size="mini" @click="Edittearch = !Edittearch">教师信息编辑</el-button>
          <!-- 查看教师 -->
          <div v-if="Edittearch">
                <div class="tearchimg">
                    <h3>教师职业照</h3>
                    <img :src="tearchUrl" alt="">
                  </div>
                  <div class="tearchexperi">
                    <h3>工作经历</h3>
                    <span>{{ teachform.workExperience }}</span>
                  </div>
                  <div class="tearchexperi" style="height:70px">
                      <h3>擅长课程</h3>
                      <span>{{ teachform.courses }}</span>

                   </div>
                <div class="teachphoto" style="height:70px">
                      <h3>专长</h3>
                      <div  v-for="(item,idx) in workname" :key="idx" class="teachexcel">
                        {{ item.name }}
                      </div>

                </div>
          </div>
          <!-- 编辑教师 -->
           <div v-else>
              <div class="tearchimg">
                    <h3>教师职业照</h3>
                    <div style="float:left;margin-top:20px">
                         <imageUpload width="150px" height="150px" :value="tearchUrl" fileSizeLimit="500KB" :compress="0.7" :compressAccurately="20" @success="handtearchUploadSuccess" @remove="removetearchHandle"></imageUpload>
                    </div>
              </div>
              <div class="tearchexperi">
                    <h3>工作经历</h3>
                    <div style="float:left;margin-top:10px;width:350px">
                      <el-input
                        type="textarea"
                        :rows="3"
                        maxlength="80"
                        placeholder="请输入内容"
                        show-word-limit
                        v-model="teachform.workExperience">
                      </el-input>
                    </div>

                  </div>
                 <div class="tearchexperi" style="margin-top:15px">
                      <h3>擅长课程</h3>
                       <div style="float:left;margin-top:10px;width:350px">
                      <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="teachform.courses">
                      </el-input>
                    </div>
                 </div>
                 <div class="tearchexperi">
                      <h3 >教师专长</h3>
                       <div style="float:left;margin-top:10px;">
                        <div>
                          <div class="interest" v-for="(sys,index) in sysTypeListtear" :key="sys.id">
                            <span class="interest-title">{{sys.name}}</span>
                            <div style="width:100%">
                              <el-checkbox-group v-model="checkboxtearGroup" v-if="sys.children.length > 0">
                                <el-checkbox size="medium" border v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</el-checkbox>
                              </el-checkbox-group>
                            </div>
                          </div>
                        </div>
                    </div>
                 </div>
                 <div>
                    <div style="text-align: center;margin-top:56px">
                      <el-button  @click="Edittearch = true">取消</el-button>
                      <el-button  type="primary" @click="teacherUpdata()">保存</el-button>
                    </div>
                 </div>
           </div>
        </div>
        <div v-if="infoswich == 1">
           <ul class="base-info">
          <li><label class="label" style="width:32px">姓名</label><span class="info-text">{{form.name}}</span></li>
          <li><label class="label" style="width:32px">性别</label><span class="info-text">{{form.gender == 1?'男':'女'}}</span></li>
          <li><label class="label">所属部门</label><span class="info-text">{{form.departName}}</span></li>
        </ul>
        <ul class="base-info">
          <li><label class="label" style="width:32px">生日</label><span class="info-text">{{form.birthday}}</span></li>
          <li><label class="label">手机号</label><span class="info-text">{{form.account.mobile}}</span></li>
          <li><label class="label">邮箱</label><span class="info-text">{{form.account.email}}</span></li>
        </ul>
          <div class="informationItem">
        <div class="information-header">
          <h4>个人签名<svg-icon v-show="!signData.isEdit" type="primary" @click="signData.isEdit = true" icon-class="passWard-edit" style="margin-left: 10px;font-size: 18px;cursor: pointer;"></svg-icon></h4>
        </div>
        <div class="base-info">
          <label class="label" style="min-width:70px;text-align: left;">我的签名</label>
          <p class="info-text" style="width:540px" v-show="!signData.isEdit">
            {{form.sign}}

          </p>
          <el-input v-show="signData.isEdit" style="width:40%;height:40px" type="textarea" maxlength="20" v-model="signData.sign" :rows="1"></el-input>
          <el-button v-show="signData.isEdit" style="margin-left:110px" @click="signData.isEdit = false">取消</el-button>
          <el-button v-show="signData.isEdit" type="primary" @click="saveSign()">保存</el-button>
          <!-- <el-button v-show="!signData.isEdit" style="margin-left:110px" type="primary" @click="signData.isEdit = true"></el-button> -->
        </div>
      </div>

        <div class="informationItem">
        <div class="information-header">
          <h4>个人主页设置<svg-icon v-show="!hideHomeEdit" type="primary" @click="hideHomeEdit = true" icon-class="passWard-edit" style="margin-left: 10px;font-size: 18px;cursor: pointer;"></svg-icon></h4>
        </div>
        <div class="dynamic-range">
          <el-radio :disabled="!hideHomeEdit" v-model="hideHome" :label="true">关闭个人主页</el-radio>
          <el-radio :disabled="!hideHomeEdit" v-model="hideHome" :label="false">打开个人主页</el-radio>
          <!-- <el-checkbox v-model="hideHome"> 关闭个人主页 </el-checkbox> -->
          <el-button v-show="hideHomeEdit" style="margin-left:110px" @click="hideHomeEdit = false">取消</el-button>
          <el-button v-show="hideHomeEdit" type="primary" @click="saveHideHome()">保存</el-button>
           <!-- <el-button v-show="!dynamicData.isEdit" style="margin-left:110px" type="primary" @click="dynamicData.isEdit = true">编辑</el-button> -->
        </div>
      </div>
        <div class="informationItem">
        <div class="information-header">
          <h4>动态可见范围<svg-icon v-show="!dynamicDataEdit" type="primary" @click="dynamicDataEdit = true" icon-class="passWard-edit" style="margin-left: 10px;font-size: 18px;cursor: pointer;"></svg-icon></h4>
        </div>
        <div class="dynamic-range">
           <el-radio :disabled="!dynamicDataEdit" v-model="form.dynamic" :label="1">全部动态</el-radio>
           <el-radio :disabled="!dynamicDataEdit" v-model="form.dynamic" :label="2">最近半年动态</el-radio>
           <el-radio :disabled="!dynamicDataEdit" v-model="form.dynamic" :label="3">最近三个月动态</el-radio>
           <el-button v-show="dynamicDataEdit" style="margin-left:110px" @click="dynamicDataEdit = false">取消</el-button>
           <el-button type="primary" v-show="dynamicDataEdit" @click="saveDynamic()">保存</el-button>
           <!-- <el-button v-show="!dynamicData.isEdit" style="margin-left:110px" type="primary" @click="dynamicData.isEdit = true">编辑</el-button> -->
        </div>
      </div>
         <h4>兴趣爱好 <svg-icon v-show="!interestIsEdit" type="primary" @click="interestIsEdit = true" icon-class="passWard-edit" style="margin-left: 10px;font-size: 18px;cursor: pointer;"></svg-icon></h4>
         <div class="interest" v-show="!interestIsEdit">
            <ul class="interest-ul">
              <li class="interest-li" v-for="int in interestList" :key="int.id">{{int.name}}</li>
            </ul>
         </div>
         <div v-show="interestIsEdit">
          <div class="interest" v-for="(sys,index) in sysTypeListMap" :key="sys.id">
           <span class="interest-title">{{sys.name}}</span>
           <div style="width:100%">
            <el-checkbox-group v-model="checkboxGroup" v-if="sys.children.length > 0">
              <el-checkbox size="medium" border v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</el-checkbox>
            </el-checkbox-group>
           </div>
          </div>
         </div>

         <div style="text-align: center;margin-top:56px">
          <el-button v-show="interestIsEdit" @click="interestIsEdit = false">取消</el-button>
          <el-button v-show="interestIsEdit" type="primary" @click="saveHobby()">保存</el-button>
          <!--
          <el-button v-show="!interestIsEdit" type="primary" @click="interestIsEdit = true">编辑</el-button>
          -->
         </div>



        </div>

      </div>




      <!-- </div> -->
    <!-- </el-form> -->
    <el-dialog
      title="上传头像"
      :visible.sync="dialogVisibleAvatar"
      :close-on-click-modal="false"
      center
      width="30%"
      custom-class="g-dialog">
      <div>
        <p>图片尺寸建议在：宽100px,高100px</p>
        <p>图片大小不超过：500KB</p>
        <p>图片类型：.jpg.gif.png.jpeg.bmp</p>
        <imageUpload width="240px" height="240px" :value="avatarUrl" fileSizeLimit="500KB" :compress="0.7" :compressAccurately="20" @success="handleUploadSuccess" @remove="removeHandle"></imageUpload>
        <div class="dialog-btn">
          <el-button type="primary" @click="updateAvatar">确定</el-button>
          <el-button @click="dialogVisibleAvatar=false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="设置密码"
      :visible.sync="dialogVisiblePassword"
      :close-on-click-modal="false"
      center
      width="30%"
      custom-class="g-dialog">
      <el-form ref="form" :model="passwordForm" :rules="rules" status-icon label-position="right" label-width="80px">
        <p>规则：密码由8-16位大写字母，小写字母，数字或符号</p>
        <p>任意三种的组合密码，不能单独使用字母、数字或符号</p>
        <el-form-item style="margin-top: 22px" label="旧密码">
          <el-input show-password type="password" placeholder="请输入旧密码" v-model="passwordForm.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input show-password type="password" placeholder="请输入新密码" v-model="passwordForm.newPass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPass">
          <el-input show-password type="password" placeholder="请再次确认新密码" v-model="passwordForm.confirmPass"></el-input>
        </el-form-item>

        <div class="dialog-btn">
          <el-button type="primary" @click="updatePassword">提交</el-button>
          <el-button @click="dialogVisiblePassword=false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import apiTeach from '@/api/modules/teacher.js';
  import { mapGetters, mapActions } from 'vuex';
  import userApi from "@/api/system/user";
  import accountApi from "@/api/account";
  import apiPassword from '@/api/boe/login.js'
  import apiUserBasic from '@/api/boe/userbasic.js'
  import imageUpload from '@/components/ImageUpload/index.vue';
  import apiUserhobby from "@/api/phase2/userhobby.js"
  import apiBoeTeahcer from "@/api/boe/teacher.js"
  export default{
    components:{imageUpload},
    data(){
      var testPassword =/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,16}$/;
      var validatePass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入旧密码'));
        } else if(!testPassword.test(value)){
          callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
        }else{
          if (this.passwordForm.newPass !== '') {
            this.$refs.form.validateField('newPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入新密码'));
        } else if(!testPassword.test(value)){
          callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
        } else {
          if (this.passwordForm.confirmPass !== '') {
            this.$refs.form.validateField('confirmPass');
          }
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请再次输入新密码'));
        } else if(!testPassword.test(value)){
          callback(new Error('请输入由8-16位大写字母、小写字母、数字或符号任意三种的组合密码'));
        } else if(value!=this.passwordForm.newPass){
          callback(new Error('新密码和再次确认密码不一致!'));
        }else{
          callback();
        }
      };
      return {
        fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
        sysTypeListtear:[],
        teaechswich:false,
        props: { multiple: true },
        Edittearch:true,
        infoswich:1,
        dynamicDataEdit:false,
        hideHomeEdit:false,
        signData:{
          sign:'',
          isEdit:false
        },
        hideHome:false,// 是否隐藏个人主页
        checkboxGroup: [],
        checkboxtearGroup: [],
        radio: '1',
        form:{
          account:{}
        },
        teachform:{
          id:'',
          photo:'',
          courses:'',//擅长课程
          workExperience:'', //工作经历
          expertise:'',  //专长
        },
        dialogVisibleAvatar:false,
        dialogVisiblePassword:false,
        avatarUrl:'',
        tearchUrl:'',
        passwordForm:{},
        rules:{
          newPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          confirmPass: [
            { validator: validatePass3, trigger: 'blur' }
          ]
        },
        sysTypeListMap:[],
        interestList:[],//已有兴趣爱好列表
        interestIsEdit:false,
        childData:[],
        workname:[],
      }
    },
    computed: {

      ...mapGetters(['userInfo','sysTypeMap','identity']),
      avatar(){
        if(this.userInfo.avatar){
          if(this.userInfo.avatar.indexOf('http')==-1){
            return this.baseUrl+this.userInfo.avatar
          }else{
            return this.userInfo.avatar
          }
        }else{
          if(this.userInfo.sex==2){
            return this.webBaseUrl + '/images/Avatarwoman.png'
          }else{
            return this.webBaseUrl + '/images/Avatarman.png'
          }
        }

      }
    },
    watch:{
      // hideHome() {
      //    this.hideHomeEdit = true;
      // },
      dialogVisiblePassword(val) {
        if(!val) {
           this.passwordForm={};
        }
      },

      Edittearch(){
        this.gettearch();
      },
      // 监听"编辑按钮"事件变化
      interestIsEdit(){
        this.load();
        this.getInfo();
      }
    },
    mounted(){
      if(this.userInfo.avatar){
        this.avatarUrl = this.avatar;
      }
      this.hideHome = !this.userInfo.showHome;
      this.load();
      this.getInfo();
      this.gettearch();
      this.getSysTypeTree().then(rs => {
        this.sysTypeListMap = rs;
        // console.log(rs);
        this.sysTypeListtear = rs;
      });
      //this.Teacherprofile();
      if(this.identity == 2 || this.identity == 5){
         this.teaechswich=true;
         this.loadTeacherinfo();
      }
    },
    methods:{
      gettearch(){
        // console.log(this.checkboxtearGroup,'lmj');
      },
      loadTeacherinfo(){
          this.workname=[];
          this.checkboxtearGroup=[];

          let children=[];
          this.sysTypeListtear.forEach(nm =>{
              nm.children.forEach(lk =>{
                children.push(lk);
              })
          });
          this.childData=children;

          apiTeach.detailTeacher(this.userInfo.aid).then(res =>{
            if(res.result.courses){
              this.teachform.courses = res.result.courses;
            }
            if(res.result.workExperience){
              this.teachform.workExperience = res.result.workExperience;
            }
            if(res.result.photo){
              this.teachform.photo = res.result.photo;
              this.tearchUrl = this.fileBaseUrl + res.result.photo;
            }
            this.teachform.expertise = res.result.expertise.split( ',' );
            this.convertExpertise(this.teachform.expertise);

            apiBoeTeahcer.simpleInfo(this.userInfo.sysId).then(sinfo=>{
               if(sinfo.status=='200'){
                    if(!this.teachform.courses){
                      this.teachform.courses = sinfo.result.courses;
                    }
                    if(!this.teachform.workExperience){
                      this.teachform.workExperience = sinfo.result.work;
                    }
                    if(!this.teachform.photo){
                      this.teachform.photo = sinfo.result.photo;
                      this.tearchUrl = this.fileBaseUrl + sinfo.result.photo;
                    }
                    if(!res.result.expertise && sinfo.result.expertise){
                      this.teachform.expertise = sinfo.result.expertise.split( ',' );
                      this.convertExpertise(this.teachform.expertise);
                    }
               }
            })

            // this.teachform.expertise.forEach(item =>{
            //   this.childData.forEach(it =>{
            //     if(item == it.id){
            //       this.workname.push(it);
            //       this.checkboxtearGroup.push(it.id);
            //       //console.log(it,'匹配的数据')
            //     }
            //   })
            // })
          })
        },
      convertExpertise(expertises){
        let children=[];
        this.sysTypeListtear.forEach(nm =>{
            nm.children.forEach(lk =>{
              children.push(lk);
            })
        });
        this.childData=children;
        expertises.forEach(item =>{
            this.childData.forEach(it =>{
              if(item == it.id){
                //console.log(item)
                this.workname.push(it);
                this.checkboxtearGroup.push(it.id);
              }
            })
        })
      },
      // 保存个人主页选项的编辑
      saveHideHome(){
         //执行隐藏操作
         userApi.updateShowHome(!this.hideHome).then(res=>{
            if(res.status == 200) {
              this.hideHomeEdit = false;
              //this.userInfo.showHome = !this.hideHome;
              this.$message.success('修改成功');
              this.$store.dispatch('InitData');
            }
         })
      },
      checkAndSendFinish(){
        //验证并发送完成事件
        if(this.userInfo.avatar && this.form.sign && this.form.sign!='' && this.interestList.length>1){
           let event = {
             key: "FinishSelf",//后台的事件key  发布文章且审核通过
             title: "完善个人信息奖励",//事件的标题
             parameters:"",//用户自定义参数 name:value,name:value
             content: "需完成头像，个性签名，学习偏好设置",//事件的内容
             source:'page',
             objId: this.userInfo.aid,//关联的id
             objType: "98",//关联的类型
             objInfo: "个人信息",
             aid: this.userInfo.aid, //当前登录人的id
             aname: this.userInfo.name,//当前人的姓名
             status: 1 //状态，直接写1
           }
           this.$store.dispatch("userTrigger", event);
        }else{
          // console.log('还未达到奖励');
          // console.log('this.userInfo.avatar',this.userInfo.avatar);
          // console.log('this.form.sign',this.form.sign);
          // console.log('this.interestList',this.interestList);
        }
      },
      saveDynamic() {
        userApi.updateDynamic(this.form.dynamic).then(res=>{
           if(res.status == 200) {
            this.dynamicDataEdit = false;
            this.$message.success('修改动态可见范围成功');
           }
        })
      },
      saveSign() {
        userApi.updateSign(this.signData.sign).then(res=>{
           if(res.status == 200){
              this.$message.success('我的签名修改成功');
              this.form.sign = this.signData.sign;
              this.signData.isEdit = false;
              this.checkAndSendFinish();
              let upinfo={
                aid:this.userInfo.aid,
                sign:this.signData.sign,
                avatar:''
              }
              apiUserBasic.updateUser(upinfo).then(rs=>{
                if(rs.status!=200){
                  console.error('更新用户中心用户像头失败');
                }
              })
           } else {
            this.$message.error('保存失败：'+res.message);
           }
        })
      },
      getInfo() { //获取用户兴趣关联的id
        this.checkboxGroup = [];
        apiUserhobby.info(this.userInfo.aid).then(res=>{
          if(res.status == 200) {
            res.result.forEach(item=>{
              this.checkboxGroup.push(item.refId);
              item.name = this.sysTypeName(item.refId)
            })
            // console.log(res.result);
            this.interestList = res.result;
          }
        })
      },
      sysTypeName(code){
        if(code==''){return '';}
        return this.sysTypeMap.get(code);
      },

      teacherUpdata(){
        if(this.checkboxtearGroup.length  <1 && this.checkboxtearGroup.length>=1) {
          this.$message.error('至少选择一个专长！')
          return;
        }
        if(this.checkboxtearGroup.length  >3 && this.checkboxtearGroup.length>=1) {
          this.$message.error('最多选择三个专长！')
          return;
        }
        //console.log(this.checkboxtearGroup);
        this.teachform.expertise = this.checkboxtearGroup.toString();
        //console.log(this.teachform.expertise);
        this.teachform.id = this.userInfo.aid;
        apiTeach.updateTeacher(this.teachform).then(res =>{
          //console.log('编辑成功')
          if(res.status==200){
            this.Edittearch = true;
            //this.Teacherinfo();
            //更新远程
            let simpleData={
              teacher_user_id:this.userInfo.sysId,
              courses:this.teachform.courses,
              photo:this.teachform.photo,
              expertise:this.teachform.expertise,
              work:this.teachform.workExperience
            }
            apiBoeTeahcer.simpleUpdate(simpleData).then(rs=>{
               if(rs.status!='200'){
                 this.$message.error('同步数据错误');

               }

            })
          }else{
             this.$message.error(res.message);
          }
        })


      },

      // 更新用户与偏好数据
      saveHobby(){
        let data = []
        if(this.checkboxGroup.length  <3 && this.checkboxGroup.length>=1) {
          this.$message.error('至少选择三个兴趣偏好！')
          return;
        }
        this.checkboxGroup.forEach(item=>{
          data.push({
            type:1,
            refId:item
          })
        })
        apiUserhobby.update(data).then(res=>{
          if(res.status == 200) {
            this.interestIsEdit = false;
            this.getInfo();
            this.checkAndSendFinish();
            this.$message.success('更改成功！')
          } else {
            this.$message.error("更改失败！")
          }
        })
      },
      ...mapActions({
            getResOwnerTree: 'resOwner/getResOwnerTree',
            loadResOwners: 'resOwner/loadResOwners',
            getSysTypeTree: 'sysType/getSysTypeTree',
            loadSysTypes: 'sysType/loadSysTypes'
        }),
      load(){
        userApi.detail(this.userInfo.aid).then(res=>{
          if(res.status==200){
            this.form=res.result;
            this.signData.sign = res.result.sign;
            if(res.result.dynamic == '') {
              this.form.dynamic = 0;
            }
          }
        });
      },
      openAvatar(){
        this.dialogVisibleAvatar=true
      },
      openPassword(){
        this.dialogVisiblePassword=true
      },
      handleUploadSuccess(res){
        this.form.account.avatar = res.result.filePath;
        this.avatarUrl= res.result.httpPath;
      },
      handtearchUploadSuccess(res){
        this.teachform.photo = res.result.filePath;
        this.tearchUrl= res.result.httpPath;
      },
      removetearchHandle(){
        //this.$message.error('移除图片');
        this.tearchUrl='';
        this.teachform.photo  = '';
      },
      removeHandle(){

         this.avatarUrl='';
         this.form.account.avatar = '';
      },
      updateAvatar(){
        // if(!this.avatarUrl){
        //   return this.$message.error('请上传图片')
        // }
        accountApi.updateAvatar({id:this.form.id,avatar:this.form.account.avatar}).then(res=>{
          if(res.status==200){
            this.$store.dispatch('InitData');
            this.$message.success("保存图片成功")
            this.dialogVisibleAvatar=false;
            this.checkAndSendFinish();
            //同步保存到用户中心的数据库
            let upinfo={
              aid:this.userInfo.aid,
              sign:'',
              avatar:this.form.account.avatar
            }
            apiUserBasic.updateUser(upinfo).then(rs=>{
              if(rs.status!=200){
                console.error('更新用户中心用户像头失败');
              }
            })
          }else{
            this.$message.error("保存图片失败")
          }
        })
      },
      updatePassword(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            // apiPassword.modifyPassword({oldPassword:this.passwordForm.oldPass,newPassword:this.passwordForm.newPass,confirmPassword:this.passwordForm.confirmPass}).then(res=>{
            //   if(res.status==200){
            //     this.$message.success('修改密码成功')
            //     this.dialogVisiblePassword = false;
            //   }else{
            //     this.$message.error(res.message);
            //   }
            // })
            apiUserBasic.modifyPassword({oldPassword:this.passwordForm.oldPass,newPassword:this.passwordForm.newPass,confirmPassword:this.passwordForm.confirmPass}).then(res=>{
              if(res.status==200){
                this.$message.success('修改密码成功')
                this.dialogVisiblePassword = false;
              }else{
                this.$message.error(res.message);
              }
            })
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.teachexcel{
    padding: 5px 10px;
    margin-right: 10px;
    border: 1px solid #588afc;
    border-radius: 20px;
    color: #588afc;
    float: left;
  }
.teachphoto{
    margin-top: 20px;
    h3{
      margin: 0;
      font-size: 16px;
      font-weight: 450;
      padding-bottom: 20px;
    }
  }
.tearchexperi{
  height: 80px;
  span{
    display: inline-block;
    width: 350px;
    margin-top: 15px;
    color: #666;
    font-size: 15px;
  }
  h3{
    float: left;
     font-size: 16px;
      font-weight: 450;
    margin-right: 30px;
  }
}
.tearchimg{
  height: 180px;
  h3{
    float: left;
     font-size: 16px;
      font-weight: 450;
    margin-right: 15px;
  }
  img{
    float: left;
    width: 150px;
    height: 150px;
    margin-top: 20px;
  }
}
.info-header{
  margin-bottom: 35px;
  height: 40px;
  width: 100%;
  h4{
    cursor: pointer;
    float: left;
    font-weight: 400;
    margin: 0;
    line-height: 30px;
    margin-top: 10px;
    margin-right: 10px;
  }
  .h4active{
    font-size: 20px;
    font-weight: bold;
  }
}
.avatarhover{
  width: 116px;
   height: 116px;
  background-color: rgba(0, 0, 0, 0.4);
   border-radius: 50%;
   position: absolute;
   cursor:pointer;
   display: none;
   left: 0%;
   top:0px;
   text-align: center;
  img{
   width: 42px;
   height: 38px;
   vertical-align: bottom;
   margin-top: 22px;
   margin-bottom: 5px;
  }
  h6{
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
  margin: 0px;
  }

}
.avatar:hover .avatarhover{
  display: block;
}
::v-deep .el-checkbox-button--medium .el-checkbox-button__inner{
  // padding: 10px 40px !important;
  width: 146px;
  height: 44px;
  line-height: 24px;
}
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background-color: rgba(0,0,0,0) !important;
  color: #387DF8 !important;
}
::v-deep .el-checkbox-button.is-focus .el-checkbox-button__inner{
  // border-color:#fff !important;
  outline: none;
}
// ::v-deep .el-checkbox-button.is-focus{
//   border-color:none !important;
//   outline: none !important;
// }
::v-deep .el-checkbox-button:first-child .el-checkbox-button__inner{
  border-left:none;
}
.el-checkbox-button, .el-checkbox-button__inner {
   margin-right: 40px;
   background: #FFFFFF;
   border-radius: 4px;
   box-shadow: none;
   border-left: 1px solid rgba(151,151,151,0.3);
   box-shadow: 1px 0 0 0 #fff;
}
.interest{
  display: flex;
  padding-left: 20px;
  .interest-ul{
    display: flex;
    flex-wrap: wrap;
    .interest-li{
      width: 146px;
      height: 44px;
      text-align: center;
      line-height: 44px;
      font-size: 14px;
      color: #333333;
      border: 1px solid rgba($color: #979797, $alpha: 0.3);
      border-radius: 4px;
      margin-right: 44px;
      margin-bottom: 22px;
    }
  }

  .interest-title{
    width: 70px;
    margin-right: 17px;
    color: #333333;
    font-size: 14px;
    margin-bottom: 20px;
  }
  ::v-deep .el-checkbox__input{
    display: none;
  }
  ::v-deep .el-checkbox{
     width: 146px;
     height: 44px;
     margin-bottom: 22px;
     text-align: center;
     line-height: 26px;
     margin-left: 0px;
     margin-right: 48px;
  }
  ::v-deep .el-checkbox.is-bordered+.el-checkbox.is-bordered{
    margin-left: 0px;
  }

}
 .dynamic-range{
   span{
     font-size: 14px;
     color: #333333;
     margin-right: 10px;
   }
 }
  .depart{
    font-size: 14px;
    color: #999999;
  }
 ::v-deep .el-radio-button:first-child .el-radio-button__inner {
      border: none !important;
}
  .personSetting{
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 0 10% 20%;
    position: relative;
    .avatar{
      width: 116px;
      height: 116px;
      position: absolute;
      cursor:pointer;
      left: 5%;
      top:56px;
    }
    .passWard-btn{
      position: absolute;
      font-size: 16px;
      top:45px;
      right:45px;
    }

    ::v-deep .el-radio-button__inner{
      background: #F4F4F4 !important;
      border-radius: 4px !important;
    }
    ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
      color: #FFF;
      background-color: #387DF7 !important;
      border-color: #387DF7;
      box-shadow: -1px 0 0 0 #387DF7;
    }
    .informationItem{
      min-width: 600px;
      padding-right: 10%;
      margin-bottom: 82px;
      .information-header{
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        // padding: 10px 0;
        margin-bottom: 35px;
      }
      .base-info{
        margin: 0;
        display: flex;
        margin-bottom: 46px;
        text-align: left;
        // flex-direction: row;
        // flex-wrap: nowrap;
        li{
          width: 260px;
          text-align: left;
          // flex-grow: 2;
        }
        .label{
          display: inline-block;
          font-size: 16px;
          font-weight: 400;
          color: #333333;
          width: 64px;
          margin-right: 20px;
          text-align: left;
        }
        .info-text{
          font-size: 14px;
          color: #999999;
          text-align: left;
        }
      }
    }
    ::v-deep .el-dialog{
      .el-dialog__body{
        display: flex;
        justify-content: center;
        align-items: center;
        p{
          line-height: 24px;
        }
        .component-upload-image{
          margin: 20px 0;
        }
        .dialog-btn{
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .el-button{
            width: 102px;
            height: 36px;
          }
        }
        .el-form-item{
          margin-bottom: 36px;
        }
      }
    }
  }
</style>
