<template>
   <section class="staffBoxFlex">
       <div class="staffTitle">
           <strong>证件信息</strong>
            <em>
                <!-- 用户user已核验状态的不允许修改编辑，不是职员 -->
               <i @click="edit" v-if="flag&&(flagComputedName||flagComputedCert)">编辑</i>
               <i @click="save" v-if="!flag">保存</i>
            </em>
       </div>
       <div class="staffContext staffOffice">
          <el-form ref="form" label-position="right" label-width="100px">
              <el-row  :gutter="50" >
                  <el-col :span="12">
                      <el-form-item label="证件类型：">                         
                         <span v-if="flag">
                            {{credential.credentialType=='IdCard'?'居民身份证/户口簿':''}}
                            {{credential.credentialType=='IdCardOfXiangGang'?'香港特区护照/身份证明':''}}
                            {{credential.credentialType=='IdCardOfAoMen'?'澳门特区护照/身份证明':''}}
                            {{credential.credentialType=='IdCardOfTaiwan'?'台湾居民来往大陆通行证':''}}
                            {{credential.credentialType=='Passport'?'外国护照':''}}
                            {{credential.credentialType=='Arms'?'退伍军人证':''}}
                            {{credential.credentialType=='PoliceNo'?'警号':''}}
                        </span>
                        <el-select v-model="credential.credentialType" clearable v-if="!flag" :disabled='!flagComputedCert'>
                            <el-option v-for="(item,index) in credentialTypeArry" :key="index" :label="item.label" :value="item.value"></el-option>                           
                         </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="证件号码：">
                         <span v-if="flag">{{credential.number|UpperCase}}</span>
                         <span v-if="!flag"><el-input v-model="credential.number" :disabled='!flagComputedCert'/></span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="24">
                      <el-form-item label="证件姓名：">
                         <span v-if="flag">{{credential.name}}</span>
                         <span v-if="!flag"><el-input v-model="credential.name" :disabled='!flagComputedName'/></span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="身份证有效期：">
                         <span v-if="flag">{{credential.validRang}}</span>
                         <span v-if="!flag"><el-input v-model="credential.validDateFrom" placeholder="例：2020-01-01" disabled/>-<el-input v-model="credential.validDateTo" placeholder="例：2030-01-01" disabled/></span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="身份证住址：">
                          <span v-if="flag">{{credential.address}}</span>
                         <span v-if="!flag"><el-input v-model="credential.address" disabled/></span>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="身份证人像面：">
                         <span class="photoImg"  @click="zoomPic(credential.frontPhoto)">
                             <el-avatar :src="credential.frontPhoto" style="width:300px;height:auto" >
                                <img src='~@/assets/staffImgs/emptypic.png'/>
                            </el-avatar>
                        </span>
                        <!-- <span  v-if="!flag">
                             <el-upload
                            class="avatar-uploader"
                            action="#"
                            accept="image/*"
                            :show-file-list="false"
                            :http-request="uploadAvatar"
                            :before-upload="beforeAvatarUpload">
                            <template>
                                <span v-if="imageUrl" class="avatarPic">
                                    <em><img :src="imageUrl" class="avatar"></em>
                                    <b><i class="el-icon-zoom-in" @click.stop="previewpic"></i> <i class="el-icon-delete" @click.stop="delpic"></i></b>
                                </span>                            
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </template>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="imageUrl" />
                            </el-dialog>
                        </span> -->
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="身份证国徽面：">
                         <span class="photoImg"  @click="zoomPic(credential.reversePhoto)">
                             <el-avatar  :src="credential.reversePhoto" style="width:300px;height:auto" >
                                <img src='~@/assets/staffImgs/emptypic.png'/>
                            </el-avatar>
                         </span>
                         <!-- <span  v-if="!flag">
                             <el-upload
                            class="avatar-uploader"
                            action="#"
                            accept="image/*"
                            :show-file-list="false"
                            :http-request="uploadAvatar2"
                            :before-upload="beforeAvatarUpload2">
                            <template>
                                <span v-if="imageUrl2" class="avatarPic">
                                    <em><img :src="imageUrl2" class="avatar"></em>
                                    <b><i class="el-icon-zoom-in" @click.stop="previewpic2"></i> <i class="el-icon-delete" @click.stop="delpic2"></i></b>
                                </span>                            
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </template>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible2">
                                <img width="100%" :src="imageUrl2" />
                            </el-dialog>
                        </span> -->
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="身份证头像：">
                          <span class="photoImg"   @click="zoomPic(credential.headPhoto)">
                             <el-avatar  :src="credential.headPhoto" style="width:200px;height:auto">
                                <img src='~@/assets/staffImgs/emptypic.png'/>
                            </el-avatar>
                         </span>
                         <!-- <span  v-if="!flag">
                             <el-upload
                            class="avatar-uploader"
                            action="#"
                            accept="image/*"
                            :show-file-list="false"
                            :http-request="uploadAvatar3"
                            :before-upload="beforeAvatarUpload3">
                            <template>
                                <span v-if="imageUrl3" class="avatarPic">
                                    <em><img :src="imageUrl3" class="avatar"></em>
                                    <b><i class="el-icon-zoom-in" @click.stop="previewpic3"></i> <i class="el-icon-delete" @click.stop="delpic3"></i></b>
                                </span>                            
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </template>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible3">
                                <img width="100%" :src="imageUrl3" />
                            </el-dialog>
                        </span> -->
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
       </div>

       <el-dialog title="" :visible.sync="dialogTableVisible">
            <span class="imgspan"><img :src="imgurl"></span>
        </el-dialog>
   </section>
</template>
<script>
import {employessBaseInfoApi,staffCertInfoApi,uploadFileApi} from "@/api/staffApi.js"
export default {
    data(){
        return{
            userInfo:{},
            officeInfo:{},
            credential:{},
            flag:true,   
            imageUrl:'',
            dialogVisible:false,
            imageUrl2:'',
            dialogVisible2:false,
            imageUrl3:'',
            dialogVisible3:false,
            frontPhoto:'',
            reversePhoto:'',
            headPhoto:'',
            credentialTypeArry:[
                {
                    label:'居民身份证/户口簿',
                    value:'IdCard'
                },
                    {
                    label:'香港特区护照/身份证明',
                    value:'IdCardOfXiangGang'
                },
                    {
                    label:'澳门特区护照/身份证明',
                    value:'IdCardOfAoMen'
                },
                    {
                    label:'台湾居民来往大陆通行证',
                    value:'IdCardOfTaiwan'
                },
                    {
                    label:'外国护照',
                    value:'Passport'
                },
                    {
                    label:'退伍军人证',
                    value:'Arms'
                },
                    {
                    label:'警号',
                    value:'PoliceNo'
                },
            ],
            credentialTypesoptions_Inst:[//证件类型
              {value:"IdCard",label:"居民身份证/户口簿"},
              {value:"IdCardOfXiangGang",label:"香港特区护照/身份证明"},
              {value:"IdCardOfAoMen",label:"澳门特区护照/身份证明"},
              {value:"IdCardOfTaiwan",label:"台湾居民来往大陆通行证"},
              {value:"Passport",label:"外国护照"},              
           ],
            dialogTableVisible:false,
            imgurl:'',
            institutionalCode:localStorage.getItem('institutionalCode')||'',//机构类型
        }
    },
    computed:{
       flagComputedName(){
           //组织管理员,未认证,认证失败---才可以显示编辑按钮--web不可编辑姓名：认证中、已认证。web不可编辑证件：已核验、认证中、已认证
        //    return (localStorage.getItem('domainAdmin')=='true'&&(this.userInfo.authenticateStatus=='UnAuthenticated'||this.userInfo.authenticateStatus=='Failed'))||false
           return (localStorage.getItem('domainAdmin')=='true'&&(this.userInfo.authenticateStatus!='Authenticating'&&this.userInfo.authenticateStatus!='Passed'))
       },
       flagComputedCert(){
           //组织管理员,未认证,认证失败---才可以显示编辑按钮--web不可编辑姓名：认证中、已认证。web不可编辑证件：已核验、认证中、已认证
        //    return (localStorage.getItem('domainAdmin')=='true'&&(this.userInfo.authenticateStatus=='UnAuthenticated'||this.userInfo.authenticateStatus=='Failed'))||false
           return (localStorage.getItem('domainAdmin')=='true'&&this.userInfo.checkedStatus!='Matched'&&this.userInfo.authenticateStatus!='Authenticating'&&this.userInfo.authenticateStatus!='Passed')
       },
    },
    watch:{
      'credential.number'(){//证件号码转大写
        this.credential.number=this.credential.number&&this.credential.number.toUpperCase()
      }
    },
    mounted(){
      this.employessBaseInfo()
      this.envFlag()
    },
    methods:{
        envFlag(){
          switch(this.institutionalCode){
                case '0102'://保安服务公司          
                this.credentialTypeArry=this.credentialTypesoptions_Inst
                break;         
                case '0103'://保安培训单位,保安培训机构          
                this.credentialTypeArry=this.credentialTypesoptions_Inst
                break;
                case '0104'://自行招用保安员单位         
                this.credentialTypeArry=this.credentialTypesoptions_Inst
                break;  
                default:
          }
        },
        edit(){
          this.flag=false
        },
        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
                    console.log(this.userInfo.checkedStatus)
                    this.credential=response.data.userInfo.credential
                    if(this.credential.frontPhoto&&this.credential.frontPhoto.indexOf('http')==-1){
                         this.credential.frontPhoto=location.origin+'/obpm'+this.credential.frontPhoto
                    }
                    if(this.credential.reversePhoto&&this.credential.reversePhoto.indexOf('http')==-1){
                         this.credential.reversePhoto=location.origin+'/obpm'+this.credential.reversePhoto
                    }
                    if(this.credential.headPhoto&&this.credential.headPhoto.indexOf('http')==-1){
                         this.credential.headPhoto=location.origin+'/obpm'+this.credential.headPhoto
                    }
                }
            })
        },  
        uploadAvatar(item) {
            //必须
            const formData = new FormData();
            formData.append("file",item.file);
            console.log(formData)
            uploadFileApi(formData).then(response=>{
                  if(response.status==200){
                      this.imageUrl=window.location.origin+"/obpm"+response.data
                      this.frontPhoto=response.data
                  }
            })  
        },
        beforeAvatarUpload(file) {
            console.log(file)
            const isJPG = ('image/jpeg,image/jpg,image/png').indexOf(file.type)>-1;
            const isLt1M = file.size / 1024/ 1024 < 1;

            if (!isJPG) {
            this.$message.error('上传Logo图片只能是 JPEG,JPG,PNG 格式!');
            }
            if (!isLt1M) {
            this.$message.error('上传Logo图片大小不能超过 1MB!');
            }
            return isJPG && isLt1M;
        },
        previewpic(){
           this.dialogVisible=true  
        },
        delpic(){
           this.imageUrl="" 
        },

        uploadAvatar2(item) {
            //必须
            const formData = new FormData();
            formData.append("file",item.file);
            console.log(formData)
            uploadFileApi(formData).then(response=>{
                  if(response.status==200){
                      this.imageUrl2=window.location.origin+"/obpm"+response.data
                      this.reversePhoto=response.data
                  }
            })  
        },
        beforeAvatarUpload2(file) {
            console.log(file)
            const isJPG = ('image/jpeg,image/jpg,image/png').indexOf(file.type)>-1;
            const isLt1M = file.size / 1024/ 1024 < 1;

            if (!isJPG) {
            this.$message.error('上传Logo图片只能是 JPEG,JPG,PNG 格式!');
            }
            if (!isLt1M) {
            this.$message.error('上传Logo图片大小不能超过 1MB!');
            }
            return isJPG && isLt1M;
        },
        previewpic2(){
           this.dialogVisible2=true  
        },
        delpic2(){
           this.imageUrl2="" 
        },

        uploadAvatar3(item) {
            //必须
            const formData = new FormData();
            formData.append("file",item.file);
            console.log(formData)
            uploadFileApi(formData).then(response=>{
                  if(response.status==200){
                      this.imageUrl3=window.location.origin+"/obpm"+response.data
                      this.headPhoto=response.data
                  }
            })  
        },
        beforeAvatarUpload3(file) {
            console.log(file)
            const isJPG = ('image/jpeg,image/jpg,image/png').indexOf(file.type)>-1;
            const isLt1M = file.size / 1024/ 1024 < 1;

            if (!isJPG) {
            this.$message.error('上传Logo图片只能是 JPEG,JPG,PNG 格式!');
            }
            if (!isLt1M) {
            this.$message.error('上传Logo图片大小不能超过 1MB!');
            }
            return isJPG && isLt1M;
        },
        previewpic3(){
           this.dialogVisible3=true  
        },
        delpic3(){
           this.imageUrl3="" 
        },
        save(){
            let obj=this.userInfo    
            if(this.frontPhoto){
                this.credential.frontPhoto=this.frontPhoto                
            } 
            if(this.reversePhoto){
                this.credential.reversePhoto=this.reversePhoto                
            } 
            if(this.headPhoto){
                this.credential.headPhoto=this.headPhoto                
            }        
            staffCertInfoApi(obj,this.credential).then(response=>{
                if(response.status==200){
                    this.flag=true
                    this.employessBaseInfo()
                }
            })
        },
        zoomPic(url){//图片放大
            if(url){
                this.dialogTableVisible=true
                this.imgurl=url
            }
        }      
    }
}
</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;}
         }
     }
     .staffOffice{
        .el-form-item__label{text-align: right;}
        .photoImg{
            width: 200px;
            height: 200px;
            .el-avatar--circle{border-radius: 0;}
            img{
                width: 100%;
                height: 100%;
            }
        }
     }

    .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
    .avatar {
        width: 200px;
        height: 200px;
        display: block;
    }
 }   
</style>
<style lang="scss">
 .avatarPic{
     position: relative;
     display: flex;
     b{
         position: absolute;
         top: 0%;
         left: 0%;
         display: flex;
         background: rgba(0,0,0,0.2);
         width: 100%;
         height: 100%;
         align-items: center;
         justify-content: center;
         i{margin-right:10%;color: #fff;}
     }
 }   
 .imgspan{
     img{width: 100%;}
 }
</style>