<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>相关方安全告知培训合格证</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" type="text/css" href="../../assets/css/weui.css"/>
  <link rel="stylesheet" type="text/css" href="../../assets/css/weuix.css"/>
  <link rel="stylesheet" type="text/css" href="../../../bi/css/vant.css"/>

  <!-- vue -->
  <script src="../../../bi/js/vue.js"></script>
  <script src="../../../bi/js/vant.min.js"></script>
  <!--全局配置-->
  <script src="../../../config.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <style lang="scss">

      .unValid_container{
          width: 100%;
          height: 100%;
          position: fixed;
          background: #ffffff;
          top: 0;
          left: 0;
          text-align: center;
          .unValid{
              width: 100%;
              position: absolute;
              top: 40%;
              left: 50%;
              transform: translate(-50%, -50%);


      .reason{
          width: 80%;
          margin: 50px auto;
          background: #f9f9f9;
          border-radius: 4px;
          padding: 20px;
          box-sizing: border-box;
          text-align: left;
          font-size: 14px;
          .main{
              margin-top: 10px;
              color: #da1818;
          }

      }
          }
      }
    .training_records {
      margin: 0 10px;
    }

    .training_records td {
      text-align: center;
    }

    .dy-card:nth-child(1) {
      height: 240px;
    }

    .dy-card:nth-child(2) {
      padding-top: 10px;
    }

    .bg_table {
      background: url("../../assets/images/xgf_hgz/tablebg.jpg") no-repeat bottom center;
      background-size: 100%;
      width: 660px;
      height: 435px;
      border: 4px solid #453d3a;
      transform: scale(0.5) translateX(-50%);
      transform-origin: left;
      position: absolute;
      top: -90px;
      left: 50%;
    }

    .bg_table .title {
      font-size: 28px;
      text-align: center;
      margin-top: 34px;
      font-weight: bold;
      color: #000000;
    }

    .bg_table .table {
      border-collapse: collapse;
      width: 590px;
      color: #453d3a;
      font-size: 20px;
      margin: 34px;
      text-align: left;
      margin-top: 10px;
    }

    .bg_table .table .tcenter {
      text-align: center;
    }

    .bg_table .table .w60 {
      width: 100px;
    }

    .bg_table .table .w74 {
      width: 148px;
    }

    .bg_table .table th, .bg_table .table td {
      border: 2px solid #453d3a;
      text-align: left;
      height: 40px;
      padding: 0 16px;
      box-sizing: border-box;
    }

    .bg_table .table th .textone, .bg_table .table td .textone {
      width: 80px;
      text-align: justify;
      text-align-last: justify;
      text-justify: distribute-all-lines;
      margin: 0 auto;
    }

    .bg_table .table th .text2, .bg_table .table td .text2 {
      width: 50px;
      text-align: justify;
      text-align-last: justify;
      text-justify: distribute-all-lines;
      margin: 0 auto;
    }

    .Number {
      margin-left: 34px;
      font-size: 24px;
      color: #ff0000;
    }
    .textQrStyle{
      font-size: 50px;
      color: red;
      text-align: center;
    }
  </style>
</head>
<body style="background-color: #f1f1f1;">
<div id="app">
  <div v-if="unValidFlag !== '1'" class="dy-card">
    <div class="bg_table">
      <div class="title">相关方安全告知培训合格证</div>
      <div class="Number">{{ message.CLASS_NO }}</div>
      <table class="table">
        <tr>
          <td style="width: 120px">
            <div class="text textone ">姓名</div>
          </td>
          <td style="width: 92px">
            <div class="text text2 tcenter">{{ message.NAME }}</div>
          </td>
          <td style="width: 86px">
            <div class="text text2 tcenter">工种</div>
          </td>
          <td style="width: 148px;">
            <div v-if="message.PERSON_WORK_TYPE" class="text tcenter ">{{ message.PERSON_WORK_TYPE }}</div>
            <div v-else>暂无</div>
          </td>
          <td rowspan="4" style="width: 134px;">
            <img :src="config.fileUrl + message.PHOTO" style="width: 116px; height: 146px">
          </td>
        </tr>
        <tr>
          <td>
            <div class="text textone">资质</div>
          </td>
          <td colspan="3">
            <div v-if="message.CERTIFICATE" class="text">{{ message.CERTIFICATE }}</div>
            <div v-else>暂无</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="text textone">培训时间</div>
          </td>
          <td colspan="3">
            <div class="text">{{ message.OPENING_TIME }}</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="text textone">有效期限</div>
          </td>
          <td colspan="3">
            <div class="text">{{ message.VALIDITY_PERIOD_END }}</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="text textone">所在单位</div>
          </td>
          <td colspan="3">
            <div class="text">{{ message.BELONG_TO_CORP_NAME }}</div>
          </td>
          <td rowspan="3">
            <div class="qrcode"></div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="text textone">身份证号</div>
          </td>
          <td colspan="3">
            <div class="text">{{ message.CARD_ID }}</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="text textone">手机</div>
          </td>
          <td colspan="3">
            <div class="text">{{ message.PHONE }}</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div v-if="unValidFlag !== '1'" class="dy-card">
    <van-divider content-position="left">人员信息</van-divider>
    <van-cell-group>
      <van-cell title="照片">
        <van-image
          v-if="imgUrl"
          width="50px"
          height="50px"
          :src="imgUrl"
          @click="fnImagePreview(imgUrl,0)"
        ></van-image>
      </van-cell>
      <van-cell title="姓名" :value="info.NAME"></van-cell>
      <van-cell title="性别" :value="info.SEX === '0' ? '男' : '女'"></van-cell>
      <van-cell title="出生年月" :value="info.DATE_OF_BIRTH"></van-cell>
      <van-cell title="年龄" :value="info.AGE"></van-cell>
      <van-cell title="手机号" :value="info.PHONE"></van-cell>
      <van-cell title="身份证" :value="info.CARD_ID"></van-cell>
      <van-cell title="身份证照片">
        <van-image
          v-for="(item,index) in userCardIDPhotoFile"
          :key="item"
          width="50px"
          height="50px"
          :src="item"
          @click="fnImagePreview(item,index)"
        ></van-image>
      </van-cell>
      <van-cell title="民族" :value="info.NATIONALITY_NAME"></van-cell>
      <van-cell title="婚姻状况" :value="info.MARITALSTATUS === '0' ? '未婚' : '已婚'"></van-cell>
      <van-cell title="政治面貌" :value="info.POLITICAL_STATUS_NAME"></van-cell>
      <van-cell title="户口所在地" :value="info.HKLOCAL"></van-cell>
      <van-cell title="现住址" :value="info.ADDRESS"></van-cell>
      <van-cell title="联系电话" :value="info.PHONE"></van-cell>
      <van-cell title="文化程度" :value="info.DEGREE_OF_EDUCATION_NAME"></van-cell>
      <van-cell title="本企业从业开始日期" :value="info.CORP_START_DATE"></van-cell>
      <van-cell title="岗位名称" :value="info.POST_ID"></van-cell>
      <van-cell title="本岗位从业开始日期" :value="info.ENTRY_DATE"></van-cell>
      <van-cell title="是否签订劳动合同">
        <span v-if="info.IS_SIGN_LABOR === '1'">是</span>
        <span v-if="info.IS_SIGN_LABOR === '0'">否</span>
      </van-cell>
      <van-cell title="劳动合同附件" v-if="info.IS_SIGN_LABOR === '1'">
        <van-image
          v-for="(item,index) in contractFileList"
          :key="item"
          width="50px"
          height="50px"
          :src="item"
          @click="fnImagePreview(item,index)"
        ></van-image>
      </van-cell>
      <van-cell title="社会保障号码" :value="info.SOCIAL_NUMBER"></van-cell>
      <van-cell title="社保卡照片" v-if="socialPhotoFile.length > 0">
        <van-image
          v-for="(item,index) in socialPhotoFile"
          :key="item"
          width="50px"
          height="50px"
          :src="item"
          @click="fnImagePreview(item,index)"
        ></van-image>
      </van-cell>
      <van-cell title="是否参加三级安全培训">
        <span v-if="info.IS_LEVEL_THREE === '1'">是</span>
        <span v-if="info.IS_LEVEL_THREE === '0'">否</span>
      </van-cell>
      <van-cell title="是否按期缴纳工伤保险">
        <span v-if="info.IS_INJURIES_PAY === '1'">是</span>
        <span v-if="info.IS_INJURIES_PAY === '0'">否</span>
      </van-cell>
      <template v-if="info.IS_INJURIES_PAY === '1'">
        <van-cell title="工伤保险有效期" :value="info.IS_INJURIES_PAY_TIME"></van-cell>
        <van-cell title="工伤保险凭证">
          <van-image
            v-for="(item,index) in gongshangbaoxianFile"
            :key="item"
            width="50px"
            height="50px"
            :src="item"
            @click="fnImagePreview(item,index)"
          ></van-image>
        </van-cell>
      </template>
      <van-cell title="是否缴纳商业保险">
        <span v-if="info.ISPAY === '1'">是</span>
        <span v-if="info.ISPAY === '0'">否</span>
      </van-cell>
      <template v-if="info.ISPAY === '1'">
        <van-cell title="商业保险附件">
          <van-image
            v-for="(item,index) in insuranceFileList"
            :key="item"
            width="50px"
            height="50px"
            :src="item"
            @click="fnImagePreview(item,index)"
          ></van-image>
        </van-cell>
        <van-cell title="商业保险单号" :value="info.ISPAY_NUMBER"></van-cell>
      </template>
      <van-cell title="是否特殊工种">
        <span v-if="info.IS_SPECIAL_JOB === '1'">是</span>
        <span v-if="info.IS_SPECIAL_JOB === '0'">否</span>
      </van-cell>
      <van-cell title="身体状况是否适应本岗位工作">
        <span v-if="info.IS_BODY_ADAPT === '1'">是</span>
        <span v-if="info.IS_BODY_ADAPT === '0'">否</span>
      </van-cell>
      <van-cell title="是否流动人员">
        <span v-if="info.ISFLOW === '1'">是</span>
        <span v-if="info.ISFLOW === '0'">否</span>
      </van-cell>
    </van-cell-group>
    <van-divider content-position="left">培训记录</van-divider>
    <div class="training_records">
      <table>
        <tr>
          <td>培训时间</td>
          <td>有效期限</td>
          <td>培训部门</td>
          <td>培训结果</td>
        </tr>
        <template v-if="trainRecordList.length > 0">
          <tr v-for="(item,index) in trainRecordList" :key="index">
            <td>{{ item.OPENING_TIME }}</td>
            <td>{{ item.VALIDITY_PERIOD_END }}</td>
            <td>{{ item.DEPARTMENT_NAME }}</td>
            <td>
              <span v-if="item.STATUS === '0'">不合格</span>
              <span v-if="item.STATUS === '1'">合格</span>
            </td>
          </tr>
        </template>
        <tr v-else>
          <td colspan="4">暂无数据</td>
        </tr>
      </table>
    </div>
    <van-divider content-position="left">电子入场证</van-divider>
    <van-cell-group>
      <van-cell title="照片">
        <van-image
          v-if="imgUrl"
          width="50px"
          height="50px"
          :src="imgUrl"
          @click="fnImagePreview(imgUrl,0)"
        ></van-image>
      </van-cell>
      <van-cell title="所属单位" :value="info.RELEVANT_UNIT_NAME"></van-cell>
      <van-cell title="姓名" :value="info.NAME"></van-cell>
      <van-cell title="性别" :value="info.SEX === '0' ? '男' : '女'"></van-cell>
      <van-cell title="年龄" :value="info.AGE"></van-cell>
      <van-cell title="职务" :value="info.POST_ID"></van-cell>
      <van-cell title="联系电话" :value="info.PHONE"></van-cell>
      <van-cell title="流动范围" :value="info.TRAIN_AREA || '暂无'"></van-cell>
    </van-cell-group>
    <van-image-preview v-model="show" :images="images" :start-position="startPosition">
    </van-image-preview>
  </div>
  <div v-if="unValidFlag === '1'">
    <div class="unValid_container">
      <div class="unValid">
        <img src="../../assets/images/xgf_hgz/error.png" alt="" width="150px">
        <p>合格证已失效</p>
        <div class="reason">
          <b >失效原因:</b>
          <div class="main">{{unValidInfo}}</div>
        </div>
      </div>

    </div>
  </div>
</div>
<script type="text/javascript" src="../../assets/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      config: config,
      USER_ID: '',
      CLASS_INFO_ID: '',
      CORPINFO_ID: '',
      message: {},
      info: {},
      show: false,
      startPosition: 0,
      images: [],
      imgUrl: '',
      userCardIDPhotoFile: [],
      contractFileList: [],
      socialPhotoFile: [],
      gongshangbaoxianFile: [],
      insuranceFileList: [],
      trainRecordList: [],
      unValidFlag: '0',
      unValidInfo: ''
    },
    methods: {
      //初始执行
      init() {
        this.CLASS_INFO_ID = this.getUrlKey('CLASS_INFO_ID');
        this.getData();
      },
      getData () {
        this.loading = true;
        this.getUserInfo()
      },
      getUserInfo() {
        var _this = this;
        $.ajax({
          xhrFields: {
            withCredentials: true
          },
          type: "POST",
          url: config.httpJgUrl + '/app/classMessage/getUserInfo',
          dataType: 'json',
          data: {
            CLASS_INFO_ID: _this.CLASS_INFO_ID
          },
          success: function (data) {
            _this.message = data.pd
            _this.unValidFlag = data.pd.unValidFlag
            _this.unValidInfo = data.pd.unValidInfo
            _this.USER_ID = data.pd.USER_ID
            new QRCode(document.querySelector(".qrcode"), {
              text: config.messageUrl + '?CLASS_INFO_ID=' + _this.CLASS_INFO_ID,
              width: 110,
              height: 110,
              colorDark: "#000000",
              colorLight: "#ffffff",
              correctLevel: QRCode.CorrectLevel.H,
            });
            _this.getInfoOne()
            _this.getInfoTwo()
            _this.getInfo()
          }
        })
      },
      getInfoOne() {
        var _this = this;
        $.ajax({
          xhrFields: {
            withCredentials: true
          },
          type: "POST",
          url: config.httpurl + '/app/user/getDetailByUserIdAndCorpInfoId',
          dataType: 'json',
          data: {
            USER_ID: this.USER_ID
          },
          success: function (data) {
            if ( data.userPhotoFile && data.userPhotoFile.length > 0) {
              _this.imgUrl = config.fileUrl + data.userPhotoFile[0].FILEPATH
            }
            if (data.userCardIDPhotoFile){
              for (let i = 0; i < data.userCardIDPhotoFile.length; i++) {
                _this.userCardIDPhotoFile.push(config.fileUrl + data.userCardIDPhotoFile[i].FILEPATH)
              }
            }
            if (data.contractFile){
              for (let i = 0; i < data.contractFile.length; i++) {
                _this.contractFileList.push(config.fileUrl + data.contractFile[i].FILEPATH)
              }
            }
            if( data.socialPhotoFile){
              for (let i = 0; i < data.socialPhotoFile.length; i++) {
                _this.socialPhotoFile.push(config.fileUrl + data.socialPhotoFile[i].FILEPATH)
              }
            }
            if(data.workInsurancePhotoFile){
              for (let i = 0; i < data.workInsurancePhotoFile.length; i++) {
                _this.gongshangbaoxianFile.push(config.fileUrl + data.workInsurancePhotoFile[i].FILEPATH)
              }
            }
            if(data.insuranceFile){
              for (let i = 0; i < data.insuranceFile.length; i++) {
                _this.insuranceFileList.push(config.fileUrl + data.insuranceFile[i].FILEPATH)
              }
            }
            _this.info = data.pd
          }
        })
      },
      getInfoTwo() {
        var _this = this;
        $.ajax({
          xhrFields: {
            withCredentials: true
          },
          type: "POST",
          url: config.httpurl + '/app/user/getFloatPersonDetailById',
          dataType: 'json',
          data: {
            USER_ID: this.USER_ID,
          },
          success: function (data) {
            // _this.info = data.eCard
            _this.trainRecordList = data.recordList
          }
        })
      },
      getInfo() {
        var _this = this;
        _this.loading = true;
        $.ajax({
          xhrFields: {
            withCredentials: true
          },
          type: "POST",
          url: config.httpurl + '/user/getFloatPersonDetailById',
          dataType: 'json',
          data: {
            CLASS_INFO_ID: _this.CLASS_INFO_ID,
            USER_ID: _this.USER_ID,
            CORPINFO_ID: _this.CORPINFO_ID
          },
          success: function (data) {
            vm.loading = false;
            if ("success" == data.result) {
              vm.varList = data.varList;
              vm.pd = data.varList[0];
              var nameArray = [];
              for (var i = 0; i < vm.varList.length; i++) {
                var ACCIDENTS_NAME = vm.varList[i].ACCIDENTS_NAME;
                var names = ACCIDENTS_NAME.split(",");
                for (var j = 0; j < names.length; j++) {
                  nameArray.distinctPush(names[j]);
                }
              }
              vm.ACCIDENTS_NAME = nameArray.join(",");
            }
          }
        })
      },
      //根据url参数名称获取参数值
      getUrlKey: function (name) {
        return decodeURIComponent(
          (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
      },
      fnImagePreview(images, startPosition) {
        this.images = [images];
        this.startPosition = startPosition
        this.show = true
      }

    },
    mounted() {
      this.init();
    }
  })
</script>
</body>
</html>
