<template>
  <div class="containerCompleteCert">
    <div class="leftinfo">
       <div class="lefttxt1">哈尔滨市保安员职业技能培训</div>
       <div class="lefttxt2">结业证书</div>
       <div class="lefttxt3">本电子证书由{{qualicertInfo.fzjgmc||'哈尔滨市道里区职业技能培训学校'}}核发。本证书表明持证人已通过哈尔滨市保安员职业技能培训结业考核，成绩合格。</div>
       <div class="lefttxt4"><span class="titlelabel">发证单位：</span><span class="titlevalue">{{qualicertInfo.fzjgmc||'哈尔滨市道里区职业技能培训学校'}}</span></div>
       <div class="lefttxt5"><span class="titlelabel">发证日期：</span><span class="titlevalue">{{qualicertInfo.fzrq}}</span></div>
    </div>
    <div class="rightinfo">
       <div class="rImg"><img :src="qualicertInfo.headPhoto"/></div>
       <div class="listli"><span class="name name1">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span><span class="value">{{qualicertInfo.name}}</span></div>
       <div class="listli"><span class="name sex1">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span><span class="value">{{qualicertInfo.sex}}</span></div>
       <div class="listli"><span class="name">身份证号</span><span class="value valueNumber">{{qualicertInfo.identityNumber}}</span></div>
       <div class="listli"><span class="name">职业名称</span><span class="value">保安员</span></div>
       <div class="listli"><span class="name">证书编号</span><span class="value">{{qualicertInfo.credentialNumber}}</span></div>
    </div>
  </div>
</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,11,this.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 //出生日期从身份证号截取
                    }                    
                 }
            })
    }
  }
}
</script>
<style scoped>
@font-face {
  font-family: "SourceHanSansCNRegular"; /* 这个名字可以自己定义 */
  src: url("~@/assets/fonts/SourceHanSansCNRegular/Source Han Sans CN Regular.eot"); /* IE9 Compat Modes */ /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/
  src: url("~@/assets/fonts/SourceHanSansCNRegular/Source Han Sans CN Regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("~@/assets/fonts/SourceHanSansCNRegular/Source Han Sans CN Regular.woff") format("woff"),
    /* Modern Browsers */ url("~@/assets/fonts/SourceHanSansCNRegular/Source Han Sans CN Regular.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("~@/assets/fonts/SourceHanSansCNRegular/Source Han Sans CN Regular.svg#YourWebFontName")
      format("svg"); /* Legacy iOS */
  font-weight: bold;
  font-style: normal;
}
body,
html {
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #000000;
  font-family: msyh;
  font-weight: bold;
}

ul,
li {
  list-style: none;
}

em,
b,
strong,
i {
  font-style: normal;
  font-weight: 200;
  /* font-weight: bold!important; */
}

.containerCompleteCert {
  font-family: "SourceHanSansCNRegular,Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", "sans-serif";
  width: 750px;
  height: 542px;
  background: url('~@/assets/staffImgs/jybg.png') no-repeat 0 0;
  background-size: 100% 100%;
  margin: 0 auto;
  font-size: 20px;
  display: flex;
  color: #2E333E;
  font-weight: 400;
}
.containerCompleteCert .leftinfo{
  width: 281px;
  margin-top: 66px;
  margin-left:60px;
  margin-right:64px;
}
.containerCompleteCert .rightinfo{
  /* flex:1; */
  width: 289px;
  margin-top: 66px;
  margin-right:57px;
  display: flex;
  flex-direction: column;
}
.containerCompleteCert .lefttxt1{
  font-size: 20px;
  color: #2E333E;
  text-align: center;
  font-weight: 400;  
}
.containerCompleteCert .lefttxt2{
  font-size: 48px;
  font-family: Helvetica;
  color: #2E333E;
  text-align: center;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: 18px;
  margin-top: 4px;
  text-indent: 10px;
}
.containerCompleteCert .lefttxt3{
  margin-top: 50px;
  height: 158px;
  font-size: 20px;
  color: #2E333E;
  line-height: 30px;
  font-weight: 400;
  text-indent: 45px;
}
.containerCompleteCert .lefttxt4{
  margin-top: 34px;
  display: flex;
  line-height: 30px;
  font-size: 20px;
  height: 60px;
  font-weight: 400;
}
.containerCompleteCert .titlelabel{
  white-space:nowrap;
}
.containerCompleteCert .lefttxt5{
  margin-top: 10px;
  font-size: 20px;
  font-weight: 400;
}

.containerCompleteCert .rImg{
  width: 107px;
  height: 138px;
  margin: 0 auto;
  margin-bottom: 55px;
}
.containerCompleteCert .rImg img{
  width: 107px;
  height: 138px;
  background: #F2F2F2;
}
.containerCompleteCert .listli{
  font-size: 20px;
  color: #2E333E;
  letter-spacing: 0;
  font-weight: 400;
  width: 100%;
  display: flex;
  height: 20px;
  line-height: 30px;
  margin-bottom: 29px;
}
.containerCompleteCert .listli .name{
   width: 101px;
   height:100%;
  line-height: 100%;
   position: relative;
   display: inline;
   float: left;
}
.containerCompleteCert .listli .name::after{
  position: absolute;
  left: 80%;
  content: "\FF1A";
}
.containerCompleteCert .listli .value{
  display: inline;
  float: left;
  width: 188px;
  height:100%;
  line-height: 100%;
  border-bottom:1px solid #2E333D;
  text-align: center;
}
.containerCompleteCert .listli .valueNumber{
  display: inline;
  float: left;
  font-size: 19px;
  width: 188px;
  height:100%;
  line-height: 100%;
  border-bottom:1px solid #2E333D;
  text-align: center;
}
</style>