<template>
  <section class="staffBoxFlex">
    <div class="staffTitle">
      <strong>证书信息</strong>
      <!-- <em><i>编辑</i><i>保存</i></em> -->
    </div>
    <div class="staffContext staffContract">
      <!-- 内容区域 -->
      <section class="contentBox">
        <el-table
          :data="tableDataContract"
          ref="districtTable"
          max-height="500"
          default-expand-all
          row-key="id"
        >
          <el-table-column
            v-for="(item, index) in tableColumn"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            v-if="item.show"
          >
            <template slot-scope="scope">
              <span v-if="item.prop == 'certViewbtn'">
                <span v-if="scope.row.credentialType == 'QualificationCer'"
                  ><el-button type="text" @click="viewCertPic(scope.row)"
                    >查看</el-button
                  ></span
                >
              </span>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页页签 -->
        <pages
          :total="params.total"
          :currentPage.sync="params.pageIndex"
          :pageSize="params.pageSize"
          @handleCurrentChangeSub="handleCurrentChange"
          @handleSizeChangeSub="handleSizeChange"
        ></pages>
      </section>
    </div>

    <el-dialog title="资格证证书" :visible.sync="dialogVisible" width="327px">
      <span class="certBox">
        <strong>中华人民共和国保安员证</strong>
        <em><img :src="qualicertInfo.headPhoto" /></em>
        <span class="info">
          <span class="name">{{ qualicertInfo.name }}</span>
          <span class="title">身份证号：{{ qualicertInfo.identityNumber }}</span>
          <span class="title">证书编号：{{ qualicertInfo.credentialNumber }}</span>
          <span class="title">发证日期：{{ qualicertInfo.fzrq }}</span>
          <span class="title">发证单位：{{ qualicertInfo.fzjgmc }}</span>
        </span>
      </span>
    </el-dialog>

    <el-dialog
      title="资格证证书"
      :visible.sync="dialogVisibleQuliCert"
      width="710px"
    >
    <div class="containerQuali">
      <div class="left">
          <div class="headphoto"><img width="107px" height="138px" :src="qualicertInfo.headPhoto"></div>
          <div class="infolist">
            <div class="infolistul">
                <span class="infolistspan info1"><span class="infostrong">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span><span class="infoem">{{ qualicertInfo.name }}</span></span>
                <span class="infolistspan info2"><span class="infostrong">出生年月</span><span  class="infoem">{{qualicertInfo.dateBirth}}</span></span>
                <span class="infolistspan info3"><span class="infostrong">住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</span><span  class="infoem">{{ qualicertInfo.address }}</span></span>
                <span class="infolistspan info4"><span class="infostrong">身份证号</span><span  class="infoem">{{ qualicertInfo.identityNumber }}</span></span>
            </div>
          </div>
      </div>
      <div class="right">
          <div class="nr1"><span class="nrname">{{ qualicertInfo.name }}</span><span class="nrnx">经国家</span></div>
          <div class="nr2">保安员考试审查合格。</div>
          <div class="nr3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;特颁此证。</div>
          <div class="nr4"></div>
          <div class="nr5"><span class="nrfztitle">发证日期：</span><span class="nrfzDate">{{ qualicertInfo.fzrqDate }}</span></div>
          <div class="nr6"><span class="nrzjtitle">证件编号：</span><span class="nrzjNo">{{ qualicertInfo.credentialNumber }}</span></div>
      </div>
    </div>
    </el-dialog>
  </section>
</template>
<script>
import { certListApi, employessBaseInfoApi,getcredentialDetailsApi } from "@/api/staffApi.js";
export default {
  data() {
    return {
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 10,
        id: "",
        keyword: "",
        total: 0,
      },
      tableDataContract: [],
      tableColumn: [
        {
          prop: "credentialTypeName",
          label: "证书类型",
          width: "180",
          show: true,
        },
        { prop: "number", label: "证书编号", width: "180", show: true },
        { prop: "address", label: "发证机关", width: "180", show: true },
        { prop: "validDateFrom", label: "发证日期", width: "", show: true },
        { prop: "certViewbtn", label: "电子证书", width: "", show: true },
      ],
      dialogVisible: false,
      dialogVisibleQuliCert: false,
      userInfo: {},
      credential: {},
      qualicertInfo:{},//资格证列表
      credentialInfo:{},//身份证列表
    };
  },
  mounted() {
    this.certList();
  },
  methods: {
    certList() {
      console.log(this.$parent.$parent.staffinfo);
      let id = this.$parent.$parent.staffinfo.id; //职员id
      let obj2 = { domainId: this.$route.query.domainId };
      certListApi(this.params, obj2, id).then((response) => {
        console.log(response);
        this.tableDataContract = response.data.data;
        this.params.total = response.data.total || 0;
      });
    },
    viewCertPic(item) {        
      console.log(item);       
      let obj = this.$parent.$parent.staffinfo;
      let obj2 = { domainId: this.$route.query.domainId };
      //7代表资格证，0代表身份证
      employessBaseInfoApi(obj, obj2).then((response) => {//获取userid
        if (response.status == 200) {
            this.userInfo = response.data.userInfo;            
            //根据用户id来查询资格证
            getcredentialDetailsApi(this.userInfo,7,item.number).then((response)=>{
                 console.log(response)
                 if (response.status == 200) {
                    this.qualicertInfo=response.data//资格证列表
                    if(this.qualicertInfo.headPhoto&&this.qualicertInfo.headPhoto.indexOf('http')==-1){
                        this.qualicertInfo.headPhoto =location.origin + "/obpm" + this.qualicertInfo.headPhoto;
                    }
                    // this.qualicertInfo.identityNumber='350627198509211556'
                    if(this.qualicertInfo.identityNumber){
                        let str=this.qualicertInfo.identityNumber
                        let strInfo=str.substring(6,10)+'年'+str.substring(10,12)+'月'+str.substring(12,14)+'日'
                        this.qualicertInfo.dateBirth=strInfo //出生日期从身份证号截取
                    }
                    if(this.qualicertInfo.fzrq){
                      let fzrqStr=''
                      fzrqStr=this.qualicertInfo.fzrq&&this.qualicertInfo.fzrq.split('-')
                      console.log(fzrqStr)
                      this.qualicertInfo.fzrqDate=`${fzrqStr[0]} 年 ${fzrqStr[1]} 月 ${fzrqStr[2]} 日`
                    }
                    if(this.qualicertInfo.frontPhoto){//判断电子签章已盖章字段
                        if(this.qualicertInfo.frontPhoto.indexOf('http')>-1){
                           window.open(this.qualicertInfo.frontPhoto)
                        }else{
                           window.open(location.origin + '/obpm'+this.qualicertInfo.frontPhoto)
                        }
                    }else if(this.qualicertInfo.fzjgmc&&this.qualicertInfo.fzjgmc.indexOf('北京')>-1){//发证单位是北京，显示新的html布局
                        this.dialogVisibleQuliCert = true;
                    }else{//否则显示旧布局
                        this.dialogVisible = true;
                    }
                 }
            })
            //根据用户id来查询身份证信息
            getcredentialDetailsApi(this.userInfo,0,this.userInfo.credential.number).then((response)=>{
                 console.log(response)
                 if (response.status == 200) {
                    this.credentialInfo=response.data//身份证列表
                    if(this.credentialInfo.headPhoto&&this.credentialInfo.headPhoto.indexOf('http')==-1){
                        this.credentialInfo.headPhoto =location.origin + "/obpm" + this.credentialInfo.headPhoto;
                    }
                 }
            })
        }
      });
    },
    handleCurrentChange(val) {
      //分页切换页码
      console.log(val);
      this.params.pageIndex = val;
      this.certList();
    },
    handleSizeChange(val) {
      //切换每页条数
      console.log(val);
      this.params.pageSize = val;
      this.certList();
    },
    Edit(row, flag) {
      //编辑合同弹窗
      // this.showdialog=true
      // this.$refs.popChildren.getTableRow(row, 1,flag);
    },
    download(row) {
      if (row.attachment) {
        window.open(row.attachment);
      }
    },
  },
};
</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;
      }
    }
  }

  .certBox {
    display: flex;
    flex-direction: column;
    background: url("~@/assets/staffImgs/certbg.png") no-repeat;
    background-size: 100% 100%;
    width: 327px;
    height: 544px;
    margin: 0 auto;
    strong {
      color: #fce302;
      font-size: 24px;
      margin-top: 43px;
      font-weight: bold;
    }
    em {
      margin-top: 25px;
      margin-bottom: 20px;
      img {
        width: 177px;
        height: 245px;
      }
    }
    .info {
      display: flex;
      flex-direction: column;
      color: #fff;
      line-height: 24px;
      .name {
        font-size: 20px;
        margin-bottom: 15px;
      }
      .title {
        display: flex;
        justify-items: flex-start;
        margin-left: 37px;
      }
    }
  }

  .el-dialog {
    background: none;
    box-shadow: none;
  }
  .el-dialog__header {
    display: none;
  }
}
</style>
<style scoped>
  @font-face {
    font-family: "STSongti-SC-Regular"; /* 这个名字可以自己定义 */
    src:url("~@/assets/font/STSongti-SC-Regular.TTF") ;
    font-weight: 400;color: #000000;
  }
   body,html{margin: 0;padding: 0;font-size: 20px;color: #000000;}
   ul,li{list-style: none;}
   em,b,strong,i{font-style: normal;font-weight: 200;}
   .containerQuali{text-align:left;margin:0 auto;font-size: 22px;font-family:'STSongti-SC-Regular','STSongti-SC';font-weight: 400;color: #000000;line-height: 30px;width: 690px; height: 586px;background: url('https://bcxin-saas-prod.obs.cn-north-1.myhuaweicloud.com:443/upload%2F2021-05-29%2F1622274317112085838.png') #fff no-repeat  0 0;background-size:100% 100%;}

   .containerQuali .left{display: inline;float: left;width: 300px;margin-left:25px;margin-top: 67px;}
   .containerQuali .headphoto{width: 107px;height: 138px;border: 1px solid #000000;margin: 0 auto;}
   .containerQuali .infolist{margin-top:59px;}
   .containerQuali .infolist .infolistul{width: 100%;display: block;padding: 0;}
   .containerQuali .infolist .infolistul .infolistspan{ display: inline-block;width: 100%;height:28px;line-height: 28px;font-weight: 400;font-size: 20px;margin-bottom: 7px;}
   .containerQuali .infolist .infolistul .infolistspan .infostrong{display: inline;float: left;width: 100px;position: relative;}
   .containerQuali .infolist .infolistul .infolistspan .infostrong::after{
      position: absolute;
      left: 80%;
      content: "\FF1A";
   }
   .containerQuali .infolist .infolistul .infolistspan .infoem{display: inline;float: left;width: 200px;}
   .containerQuali .infolist .infolistul .infolistspan.info3{height: 89px;}
   .containerQuali .infolist .infolistul .infolistspan.info3 .infoem{height: 89px;}
   .containerQuali .info4{margin-top: 39px;}
   .containerQuali .info4 .infoem{font-size: 22px;letter-spacing: 0px;height: 30px;line-height: 30px;}

   .containerQuali .right{display: inline; float: right;width:296px;margin-right: 23px;margin-top: 64px;line-height: 28px;font-size: 22px;font-weight: 400;}
   .containerQuali .nr1{height:30px;line-height: 30px;margin-bottom: 24px;}
   .containerQuali .nr1 .nrname{border-bottom: 1px solid #000000;width: 181px;display: inline-block;text-align: center;margin-left:44px;}
   .containerQuali .nr1 .nrnx{ vertical-align: -5px;margin-left:3px;}
   .containerQuali .nr2{height:30px;line-height: 30px;margin-bottom: 18px;}
   .containerQuali .nr3{} 
   .containerQuali .nr4{width:100%;height: 189px;}
   .containerQuali .nr5{margin-bottom: 81px;font-size: 20px;height:28px;line-height: 28px;}
   .containerQuali .nr6{font-size: 20px;height:28px;line-height: 28px;}
</style>
