<template>
  <div>
    <div class="main-content">
      <div class="img-box">
            <img src="../../../assets/logo/logo2.png" alt="广东省教师继续教育学会">
        </div>
      <div style="text-align: center;line-height: 50px;">
          <span class="main-title" style="margin: 0 10px;font-weight: bold;" >结业证书、学时证明查询</span>
      </div>
      <div>
          <div class="label-box">
              <div class="label-title">
                  <p>持证人姓名</p>
                  <p>（或持证单位全称）</p>
              </div>
              <input type="text" v-model="userName" class="label-input" />
          </div>
          <div class="label-box">
              <div class="label-title">
                  <p>证书编码</p>
              </div>
              <input type="text" v-model="certNumber" class="label-input" />
          </div>
          <div class="label-box">
              <div class="label-title">
                  <p>验证码<span class="label-must">*</span></p>
              </div>
              <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
              <div class="captcha-img">
                  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
              </div>
          </div>
          <div class="btn-box">
              <button class="btn-reset">重置</button>
              <button class="btn-search" @click="handleSearch" v-bind:disabled="iconShow">
                查询<i class="el-icon-loading" v-show="iconShow"></i>
              </button>
          </div>
      </div>
    </div>
    <el-dialog
        title="证书预览和下载"
        :visible.sync="dialogVisible"
        width="fit-content"
        :before-close="handleClose"
      >
        <div id="pdfDom" ref="posterWrap">
          <div class="proBox" >
            <img class="proBox-img" :src="data.backurl" >
            <div class="con train-con" >
              <p>
                <span class="con-name heiti">{{data.uesrName}}</span>于<span class="train-span heiti">{{data.trainPeriod}}</span>
                参加了<span class="train-span heiti">{{data.certName}}</span>学习，已修完教学计划规定的全部课程，计<span class="train-span heiti">{{data.courseHours}}</span>学时，经考核成绩合格，准予结业。
              </p>
            </div>
            <span class="foot-cert train-foot-cert">{{data.certId}}</span>
            <span class="foot-date train-foot-date">{{data.issueDate}}</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCodeImg,checkCode} from "@/api/login";
import { getACert } from "@/api/system/grad";
export default {
  data() {
    return {
      userName: "",
      certNumber: "",
      code: "",
      codeUrl:"",
      captchaEnabled:true,
      uuid:"",
      dialogVisible: false,
      iconShow:false,
      dist:"cert_b_type",
      pageData: null, //接收html格式代码
      htmlTitle: "结业证书",
      isShow: true,
      isCanvas: false,
      downType: false, // false为 pdf , true为图片
      data:{
        certId: "11111111",
        certName: "222",
        certType: 0,
        courseHours: "222",
        courseName: "222",
        createBy: null,
        createTime: null,
        id: 3,
        issueDate: "2022-11-29",
        level: "22",
        picture: "/profile/2022/222_A00.jpg",
        remark: null,
        trainPeriod: "222",
        uesrName: null,
        updateBy: null,
        updateDate: "2022-12-13T15:29:56.000+08:00",
        updateTime: null,
        url: "/profile/upload/2022/12/13/pro1_page-0001_20221213151348A006.jpg",
        userEmail:"222222",
        userId: "2222",
        userPhone: "222"
      }
    };
  },
  methods:{
    getCode() {
      getCodeImg().then(res => {
        // console.log(res)
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.uuid = res.uuid;
        }
      });
    },
    // handleSearch(){
    //     const form = {
    //         userName: this.userName,
    //         certNumber: this.certNumber,
    //         code: this.code,
    //         uuid: this.uuid
    //     }
    //     console.log(form)
    // }
    async handleSearch(){
       this.iconShow = true
        if( this.isBlock(this.userName)){
          this.iconShow = false
          this.$message.error("请输入持证人姓名或单位名称！")
          return;
        }
        if( this.isBlock(this.certNumber)){
          this.iconShow = false
          this.$message.error("请输入证书编码！")
          return;
        }
        if( this.isBlock(this.code)){
          this.iconShow = false
          this.$message.error("请输入验证码！")
          return;
        }
        const form = {
          userName: this.userName,
          certNumber: this.certNumber,
        }
        const codeForm = {
          code: this.code,
          uuid: this.uuid
        }
        try{
          let codeRes = await checkCode(codeForm)
          console.log(codeRes)
          if(codeRes.code===200){
            try{
              getACert(form).then(res=>{
                this.iconShow = false
                this.data = res.data
                console.log(this.data)
                let backimg = this.realUrl(this.data.url)
                this.htmlTitle = this.data.uesrName
                this.data.backurl = backimg
                // this.data.headurl = headimg
                this.dialogVisible = true
              })
              setTimeout(()=>{
                if(this.iconShow){
                  this.iconShow = false
                }
              },10000)
            }catch(error){
              this.iconShow = false
              this.getCode()
            }
          }
        }catch(err){
          this.iconShow = false
          this.getCode()
        }
    },
    isBlock(str){
      if(str===""){
        return true
      }else {
        return false
      }
    },
    handleClose(){
      // console.log("beforeClose")
      this.getCode()
      this.dialogVisible = false
    },
    realUrl(val){
      return process.env.VUE_APP_BASE_API + val
    }

  },
  mounted(){
    this.getCode()
  }
};
</script>

<style>
.train-con{
  top: 125px;
  bottom: 0;
  line-height: 40px;
}
.train-span{
  margin: 0 10px;
}
.train-foot-cert{
  left: 200px;
  bottom: 103px;
}
.train-foot-date{
  left: 200px;
  bottom: 78px;
}
</style>
