<template>
<div class="queryall">
        <header>
            <img class="querylogo" src="../../../static/img/jianke_logo.png" alt="上海建科检验有限公司">
        </header>
        <div class="querymain">
            <div class="querytitlename">证书查询</div>
            <div class="queryfill">
                <span class="querykey">姓名</span>
                <input type="text" class="queryvalue">
            </div>
            <div class="queryfill">
                <span class="querykey">证书编号</span>
                <input type="text" class="queryvalue">
            </div>
            <div class="queryfill">
                <span class="querykey">验证码</span>
                <!-- <input type="text" class="queryvalue" id="text"> -->
                <input class="queryvalue" type="text" placeholder="" v-model="inputVal" clearable /><br>
            </div>
            <!-- <canvas id="canvas" height="40px"></canvas> -->
            <validate-code id="canvas" ref="ref_validateCode" @change="changeCode" style="padding: 10px;border-radius: 15px;"/>
            <div>
                <!-- <button id="bt">点击查询</button> -->
                <button type="button" id="bt">点击查询</button>
            </div>
        </div>
    </div>
</template>
<script>
import ValidateCode from "./ValidateCode.vue";
export default {
  components: {
    ValidateCode,
  },
  data() {
    return {
      // 用户输入的验证码
      inputVal: "",
      // 生成的验证码
      checkCode: "",
      result: "",
    };
  },
  methods: {
    changeCode(value) {
      this.checkCode = value;
    },
    // 用户输入的验证码与自动生成的验证码做对比
    compare() {
      if (this.inputVal.toUpperCase() === this.checkCode) {
        console.log(this.inputVal);
        this.result = "比对成功";
      } else {
        console.log(this.inputVal);
        this.result = "比对失败,请重新输入";
        this.inputVal = "";
        this.$refs["ref_validateCode"].draw();
      }
    },
  },
};
</script>
<style>
        .queryall {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: calc(100vh);
            align-items: center;
            background-color: #e7eaf1;
            background-size: 100% 100%;
            /* display: table-cell; */
            color: white;
            /* border: solid red 0.1em; */
        }

        .querylogo {
            background-size: 100% auto;
            background-repeat: no-repeat;
            width: 5.8em;
            height: 7.3em;
            margin-top: 5%;
        }

        .querymain {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80%;
            background-color: #498aca;
            border-radius: 25px;
            margin-top: 1em;
            /* opacity: 1; */
        }

        .querytitlename {
            font-size: 2.5em;
            font-weight: 700;
            padding-top: 0.8em;
            padding-bottom: 0.7em;
        }

        .queryfill {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 90%;
        }

        .querykey {
            display: flex;
            flex-direction: row;
            flex: 5;
            justify-content: flex-end;
            width: 6em;
            font-size: 1.5em;
        }

        .queryvalue {
            display: flex;
            flex: 8.3;
            margin-left: 1em;
            font-size: 1.5em;
            width: 8em;
            background-color: transparent;
            border: 1px solid whitesmoke;
            color: white;
            outline: white;
            margin-bottom: 1.3em;
        }

        #bt {
        
            width: 6.3em;
            height: 2em;
            background: linear-gradient(0deg, #ccd6f8, #d7d8de);
            border-radius: 10px;
            font-weight: 500;
            font-size: 1.8em;
            color: #2637a9;
            border: 0;
            margin: 1em;
        }
    </style>

