<template>
   <section class="staffBoxFlex">
       <div class="staffTitle">
           <strong>基本信息</strong>
           <em>
               <i @click="edit" v-if="flag">编辑</i>
               <i @click="save" v-if="!flag">保存</i>
           </em>
       </div>
       <div class="staffContext staffBase">
          <span class="avatar">
               <el-avatar  :src="headPhoto" style="width:100px;height:auto">
                 <img src='~@/assets/staffImgs/staffAvatar.png'/>
               </el-avatar>
          </span>
          <span class="staffinfo">
              <em>{{userInfo.name}}</em>
              <b v-if="flag">{{userInfo.telephone}}</b>
              <b v-if="!flag"><el-input v-model="formList.telephone"  placeholder="账号"/></b>
              <span class="loginInfo" v-if="netSHOW">互联网账号：{{userInfo.thirdPartyLoginNo}}</span>
              <label v-if="showFlag">
                  <el-tag size="small" type="success" effect="dark">
                      {{userInfo.checkedStatus=='None'?'未提交':''}}
                      {{userInfo.checkedStatus=='Matched'?'已核验':''}}
                      {{userInfo.checkedStatus=='NotMatched'?'其他':''}}
                  </el-tag>
                  <el-tag size="small" type="danger" effect="dark" v-if="authenticateStatus&&userInfo.checkedStatus!='None'&&institutionalCode!='0601'">
                      {{userInfo.authenticateStatus=='UnAuthenticated'?'未认证':''}}
                      {{userInfo.authenticateStatus=='Authenticating'?'认证中':''}}
                      {{userInfo.authenticateStatus=='Failed'?'认证失败':''}}
                      {{userInfo.authenticateStatus=='Passed'?'已认证':''}}    
                  </el-tag>
                  <i v-if="authenticateStatus&&userInfo.authenticateStatus=='Failed'&&institutionalCode!='0601'">{{userInfo.authenticatedResult}}</i>
              </label>
          </span>
       </div>
   </section>
</template>
<script>
import {employessBaseInfoApi,StaffbaseInfoApi} from "@/api/staffApi.js"
export default {
    data(){
        return{
          userInfo:{},
          headPhoto:'',
          formList:{},
          flag:true,
          showFlag:false,
          homeTemplateBoradType:localStorage.getItem('homeTemplateBoradType')||'',
          netSHOW:false,
          authenticateStatus:false,
          institutionalCode:localStorage.getItem('institutionalCode')||'',//机构类型
        }
    },
    mounted(){
       this.employessBaseInfo()
       if(localStorage.getItem('appidSupervise')&&JSON.parse(localStorage.getItem('appidSupervise')).appId=='__d1qEDy3wYq8VF5KvUoE'){//（智能人事--内网就部署机构用户管理）监控端--机构用户管理--整块隐藏--隐藏证件核验，隐藏实名认证
           this.showFlag=true
           this.authenticateStatus=false
           this.netSHOW=true
       }
       else if(this.homeTemplateBoradType=='rtpayTemplate'){ //rt环境显示证件核验，隐藏实名认证
           this.showFlag=true
           this.authenticateStatus=false
           this.netSHOW=false
       }
       else{//企业端环境
           this.showFlag=true
           this.authenticateStatus=true
           this.netSHOW=false
       }      
    },
    methods:{
        employessBaseInfo(){
            let obj=this.$parent.$parent.staffinfo
            let obj2={domainId:this.$route.query.domainId}
            employessBaseInfoApi(obj,obj2).then(response=>{
                if(response.status==200){
                    this.userInfo=response.data.userInfo
                    if(response.data.userInfo.headPhoto&&response.data.userInfo.headPhoto.indexOf('http')>-1){
                    this.headPhoto=response.data.userInfo.headPhoto
                    }else{
                    this.headPhoto=location.origin+'/obpm'+response.data.userInfo.headPhoto    
                    }
                    this.formList=JSON.parse(JSON.stringify(response.data.userInfo))
                }
            })
        },
        edit(){
          this.flag=false
          this.$set(this.formList,'name',this.userInfo.name)
          this.$set(this.formList,'telephone',this.userInfo.telephone)  
        },
        save(){
            let obj=this.userInfo
            StaffbaseInfoApi(obj,this.formList).then(response=>{
               if(response.status==200){
                   this.flag=true
                   this.employessBaseInfo()
                }
            })
        }
    }
}
</script>
<style lang="scss">
 .staffBoxFlex{
     display: flex;
     flex-direction: column;
     .staffTitle{
         display: flex;
         justify-content: space-between;
         border-bottom: 1px solid #ebebeb;
         padding: 5px 0;
         margin-bottom: 10px;
         strong{
             color: #000;
             font-weight: normal;
         }
         em{
             margin-right:20px;
             i{color: #2e8ad7;margin-right:20px;cursor: pointer;}
         }
     }
     .staffBase{
         display: flex;
         .avatar{
             width: 100px;
             height: 100%;
             border-radius:50%;
             margin-right:40px;
             img{width: 100%; height: 100%;}
         }
         .staffinfo{
             display: flex;
             flex-direction: column;
             position: relative;
             em{color: #333333;font-weight: bold;font-size: 18px;margin-top:10px;}
             b{color: #393333;margin:10px 0 10px;font-size: 14px;}
             label{
                 display: flex;
                 align-items: center;
                 .el-tag{margin-right:10px;}
                 i{color:red}
             }
             .loginInfo{margin-bottom: 10px;font-size: 14px;}
         }
     }
 }   
</style>