<template>
  <section class="containerElesign">
    <div class="containerQuali" v-if="qualicertInfo&&qualicertInfo.credentialNumber">
      <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>经国家</div>
        <div class="nr2">保安员考试审查合格。</div>
        <div class="nr3">&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>
    <div class="nodata" v-else>
        <div class="tips"><img src="~@/assets/staffImgs/tips.png"/>证书正在制作中，请您稍后几分钟后尝试。</div>
        <div class="refresh"><el-button type="primary" @click="refresh" icon="el-icon-refresh">刷新</el-button></div>
    </div>    
  </section>
</template>
<script>
import { getcredentialDetailsApi } from "@/api/staffApi.js";
export default {
  data() {
    return {
      qualicertInfo: {},
      obj: { id: this.$route.query.userId || '' },
      number: this.$route.query.certificateNO || ''
    }
  },
  mounted() {
    this.getcredentialDetails()
  },
  methods: {
    getcredentialDetails() {
      //根据用户id来查询资格证
      getcredentialDetailsApi(this.obj, 7, this.number).then((response) => {
        console.log(response)
        if (response.status == 200) {
          this.qualicertInfo = response.data//资格证列表
          if (this.qualicertInfo&&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&&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 //出生日期从身份证号截取
          }
          // this.qualicertInfo.fzrq='2022-11-19'
          if (this.qualicertInfo&&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;
          // }
        }
      })
    },
    refresh(){//刷新
      this.getcredentialDetails()
    }
  }
}
</script>
<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 {
  margin: 0 auto;
  font-size: 22px;
  font-family: 'STSongti-SC-Regular', 'STSongti-SC';
  font-weight: 400;
  color: #000000;
  line-height: 30px;
  width: 690px;
  height: 509px;
  background: url(https://bcxin-saas-prod.obs.cn-north-1.myhuaweicloud.com:443/upload%2F2021-05-29%2F1622274317112085838.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.containerQuali .left {
  display: inline;
  float: left;
  width: 300px;
  margin-left: 25px;
  padding-top: 57px;
}

.containerQuali .headphoto {
  width: 107px;
  height: 138px;
  border: 1px solid #000000;
  margin: 0 auto;
}

.containerQuali .infolist {
  margin-top: 34px;
}

.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;
}

.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: 84px;
}

.containerQuali .infolist .infolistul .infolistspan.info3 .infoem {
  height: 84px;
}

.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: 25px;
  margin-top: 52px;
  height: 28px;
  line-height: 28px;
  font-size: 22px;
  font-weight: 400;
}

.containerQuali .nr1 {
  height: 30px;
  line-height: 30px;
  margin-bottom: 11px;
}

.containerQuali .nr1 .nrname {
  border-bottom: 1px solid #000000;
  width: 181px;
  display: inline-block;
  text-align: center;
  margin-left: 44px;
}

.containerQuali .nr2 {
  height: 30px;
  line-height: 30px;
  margin-bottom: 6px;
}

.containerQuali .nr3 {}

.containerQuali .nr4 {
  width: 100%;
  height: 172px;
}

.containerQuali .nr5 {
  margin-bottom: 74px;
  font-size: 20px;
  height: 28px;
  line-height: 28px;
}

.containerQuali .nr6 {
  font-size: 20px;
  height: 28px;
  line-height: 28px;
}
</style>
<style lang="scss" scoped>
.containerElesign{
  display: flex;
  flex-direction: column;
  .nodata{
    margin: 200px auto;
    text-align: center;
    .tips{
      font-size: 24px;
      color: #000;
      padding: 50px;
      img{
        width: 25px;
        height: auto;
        margin-right:5px;
        vertical-align: -3px;
      }
    }
    .refresh{
      img{
        width: 20px;
        height: auto;
      }
    }
  }
}
</style>