<template>
    <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">查询</button>
          </div>
      </div>
    </div>
</template>
  
<script>
import { getCodeImg } from "@/api/login";
export default {
  data() {
    return {
      userName: "",
      certNumber: "",
      code: "",
      codeUrl:"",
      captchaEnabled:true,
      uuid:"",
    };
  },
  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)
    }

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

<style>

</style>