<template>
  <div class="cert-body">

    <div v-if="showTable" class="back-button" @click="showTable=false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.03 0-1.42L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"/>
        </svg>
    </div>

    <el-card style="border-radius: 10px; padding-top: 2rem;">
      <div class="content_box_title">
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAANRJREFUWEftmO0NgyAYhOtOMIxr6By6RoeBnVTqR2rL6wlFOJPyy+QC3j0vIlAZY55a6/ohNHbd2S7tUWJXOcFaOyilXs++xq4zZPBx24CyA0T+GAHvZisKwK6zAf5aCtgBIn9MgL3rLArArrMAvu1PDBWYAbAIl8EcAoj00hkO4ZY2l+L9KcZARZR0CLekuXXvGBvufe/56xgx/U/B/QOeyxQK+DTcmME/Ty2h5lL3z50hCG5uc1ccxXNmCIa7mGunu4hOuIpwn08z6T2rvmS42mM7AlIFLwQXiU8MAAAAAElFTkSuQmCC" />
        <span style="font-weight: 700;">{{showTable?'证书信息':'培训信息查询'}}</span>
        <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAALRJREFUWEft2LENgCAQBVCZwtoZkBHcwtItnMTedSgI29CgmGhiRBS8K0w+7YX75AEFiCpzGGMa59yglBpjU7nrIZM7g6q/yLHVWkvv/dSuIzaPux4yuTMo+7/GpQwt2Zi/wYb1vsIFbNmNecQFbBns48kFbDlsEhew32BvcQH7HTaKC1ga2AsuYOlgT7iApYU9cAFLD7vhApYHdsftpZRz7Elqra3XT5qOqx4yuTO4+6f+ZhZW89Ai/bICGAAAAABJRU5ErkJggg==" />
      </div>

      <div v-if="showTable">
        <div class="certificate-cards">
          <div v-for="(certificate, index) in certificates" :key="index" class="card">
            <el-table :data="certificate.tableData" border style="width: 100%" :show-header="false">
              <el-table-column prop="label" label="证书"
                width="110"
               :cell-style="{ backgroundColor: '#000' }"/>
              <el-table-column prop="value" label="信息" />
            </el-table>

            <div class="content_box_title">
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAANRJREFUWEftmO0NgyAYhOtOMIxr6By6RoeBnVTqR2rL6wlFOJPyy+QC3j0vIlAZY55a6/ohNHbd2S7tUWJXOcFaOyilXs++xq4zZPBx24CyA0T+GAHvZisKwK6zAf5aCtgBIn9MgL3rLArArrMAvu1PDBWYAbAIl8EcAoj00hkO4ZY2l+L9KcZARZR0CLekuXXvGBvufe/56xgx/U/B/QOeyxQK+DTcmME/Ty2h5lL3z50hCG5uc1ccxXNmCIa7mGunu4hOuIpwn08z6T2rvmS42mM7AlIFLwQXiU8MAAAAAElFTkSuQmCC" />
              <span style="font-weight: 700;">培训证书</span>
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAOCAYAAABaSYBTAAAABHNCSVQICAgIfAhkiAAAALRJREFUWEft2LENgCAQBVCZwtoZkBHcwtItnMTedSgI29CgmGhiRBS8K0w+7YX75AEFiCpzGGMa59yglBpjU7nrIZM7g6q/yLHVWkvv/dSuIzaPux4yuTMo+7/GpQwt2Zi/wYb1vsIFbNmNecQFbBns48kFbDlsEhew32BvcQH7HTaKC1ga2AsuYOlgT7iApYU9cAFLD7vhApYHdsftpZRz7Elqra3XT5qOqx4yuTO4+6f+ZhZW89Ai/bICGAAAAABJRU5ErkJggg==" />
            </div>

            <img :src="certificate.imgUrl" style="width: 100%; margin:20px auto;">

          </div>
        </div>
      </div>

      <div v-else>
        <el-form class="sign-serach" :rules="rules" :inline="false" :model="searchInfo" ref="searchForm"
          label-width="80px">
          <el-form-item label="身份证号" prop="cardId">
            <el-input placeholder="输入身份证" v-model="searchInfo.cardId" type="text" style="width:260px;"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="学员姓名" prop="nickname">
            <el-input placeholder="输入姓名" v-model="searchInfo.nickname" type="text" style="width:260px;"
              clearable></el-input>
          </el-form-item>


          <el-form-item label="校验码" prop="code">
            <el-input placeholder="校验码" v-model="searchInfo.code" type="text" style="width:130px;" clearable></el-input>
            <span class="qr-code ng-scope" @click="changeCode()">
              <img alt="验证码" :src="codeShow" v-show="codeShow">
            </span>
          </el-form-item>

          <el-form-item class="form-btn-group" label-width="0px">
            <el-button size="medium" @click="resetForm">重 置</el-button>
            <el-button size="medium" type="primary" @click="queryCertificate">查 询</el-button>
          </el-form-item>
        </el-form>

        <div class="mess_style">
          <div class="mess_explain">
            <img
              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABHNCSVQICAgIfAhkiAAAATZJREFUSIm1lrtxwzAQRA8czTh36h5UgBKjEVfgBpyJylyDmwEVuhnHzp4DH6QT/hKlneFwCO7eLsATICcdAF5E9mbI630RkaOIiHNu7tWpFgcCOUpjANcZJYWCGvqE44FZLwtfrlpP3xZcaq1ZfVY2fYPzNGiUBzSEagrgHfgFvhocXzSyCRril2Tt3xrcuOTBDg51CPBtuNsO9zwbM72mgQqfgU9gN8CNdcNGzj+uLpxzPyLyMcq3juE0rTHe0NKq5v879z64EfgbTALApM9LT7AG0cQ/qP4xmiwip9323thHk4djEpGDdb0XTGMcJufcog/Zdr4Sr5lrttfkyYZbmNpm2xNrz6eX74TJTOovB8HloVeuwejptlZLfmbPtYbQ5OmRPR6uYIYWm6n/iymGudXsquJ/zhquFSAu+Z8AAAAASUVORK5CYII=" />
            <span>说明</span>
          </div>
          <div style="margin-top: 3rem;">
            <div class="mess_title">01、证书依据</div>
            <div class="mess_text">
              三明市城市建设项目服务中心
            </div>
            <div class="mess_title">02、查询范围</div>
            <div class="mess_text">
              检测试验人员，三类人员证书
            </div>
            <div class="mess_title">03、联系方式</div>
            <div class="mess_text">
              电话: 0598-5157296
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  import {curDate} from "@/utils/date.js";
  export default {
    data() {
      return {
        id:'',
        codeShow: '',
        showTable: false,
        certificates: [],
        searchInfo: {
          cardId: '',
          nickname: '',
          code: '',
          captchaId: '',
        },
        rules: {
          code: [{
              required: true,
              message: '请输入校验码',
              trigger: 'blur'
            },
            {
              len: 5,
              message: '校验码有误',
              trigger: 'blur'
            },
          ],
          nickname: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
            min: 2
          }],
          cardId: [{
              required: true,
              message: '请输入身份证号码',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback(new Error('请输入身份证号码'));
                }
                const cleanValue = value.replace(/[\s()]/g, '').toUpperCase();
                const mainlandReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
                const hkReg = /^(?:C(?:\d{8}|[A-HJ-NP-Z]\d{7})|[HM](?:\d{10}|\d{8}))$/;
                if (mainlandReg.test(cleanValue) || hkReg.test(cleanValue)) {
                  callback();
                } else {
                  callback(new Error('请输入正确的大陆身份证（18位）或香港身份证（如 A1234567）'));
                }
              },
              trigger: 'blur'
            }
          ],
        },
      }
    },
    methods: {
      resetForm() {
        this.searchInfo.cardId = '';
        this.searchInfo.nickname = '';

      },
      changeCode() {
        httpServer("Auth.GetValidateCode", {}).then(res => {
          if (res.code == 200) {
            this.codeShow = res.data.codeData;
            this.searchInfo.captchaId = res.data.captchaId;
          } else {
            this.codeShow = ''
          }
        })
      },
      packData(data) {
        this.showTable = true;
        let firstItem = data[0]||{};
        let certificate = {
          imgUrl: 'https://sm-sign.oss-cn-shanghai.aliyuncs.com/cert/'+ firstItem.certUrl.split("#")[1],
          tableData: [{
              label: '姓名',
              value: firstItem.nickname
            },
            {
              label: '性别',
              value: firstItem.gender
            },
            {
              label: '身份证号',
              value: firstItem.cardId
            },
            {
              label: '人员类型',
              value: firstItem.courseName
            },
            {
              label: '单位名称',
              value: firstItem.company
            },
            {
              label: '发证日期',
              value: firstItem.publishDate
            },
            {
              label: '扫码日期',
              value: curDate()
            }
          ]
        }
        this.certificates = [certificate];

      },
      queryCertificate() {
        this.$refs.searchForm.validate(valid => {
          if (!valid) this.changeCode();
          let param = Object.assign({}, this.searchInfo);
          httpServer("Auth.QueryCert", param).then(res => {
            this.changeCode();
            if (res.code != 200) return;
            this.packData(res.data || []);
            this.showTable = true;
          })
        });
      },
      queryCertificateById(id) {
        let param = {uuid:id};
        httpServer("Auth.QueryCertById", param).then(res => {
          if (res.code != 200) return;
          this.packData(res.data || []);
          this.showTable = true;
        })
      }
    },
    created() {
      this.id = this.$route.query.id || '';
      if(this.id){
        this.showTable = true;
        this.queryCertificateById(this.id)
      }
      this.changeCode();
    }
  }
</script>
<style>
  @import url("./index.css");
</style>
