<template>
  <div class="app-container validate">
      <div class="validate-contain">
        <div class="validate-contain-search">
          <el-input placeholder="请输入身份证号码"  v-model="identityCardNo"  class="validate-contain-search-input"></el-input> 
          <el-button type="primary" icon="Search" @click="handle('get')" class="validate-contain-search-button" size="large">查询</el-button>
        </div>
        <div class="validate-contain-dh">
          <img src="@/assets/images/dkq.png" class="validate-contain-dh-dkq">
          <img src="@/assets/images/sfz.png" class="validate-contain-dh-sfz">
        </div>
        <p>请将身份证置于读卡器上,自动获取身份证号码</p>
        <image style="width: 130px; height: 130px" src="@/assets/images/idcard.png" />
      </div>
  </div>
  <layout :data="{logoLeft:'2.1%',returnState:true}"/>
</template>

<script setup name="Index">
/*----------------------------------依赖引入-----------------------------------*/
import axios from "axios";
import { ref } from "vue";
/*----------------------------------组件引入-----------------------------------*/
import layout from "@/components/layout/index.vue";
/*----------------------------------变量声明-----------------------------------*/
const identityCardNo = ref()
const timer = ref(null);
/*----------------------------------方法声明-----------------------------------*/
/**
 * 公众号引导状态切换
 */
 function getData() {
  timer.value = setInterval(() => {
    axios
      .get("http://127.0.0.1:24010/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1&READTYPE=1&TIMEOUT=4")
      .then((response) => {
        identityCardNo.value = response.data.Certificate.IDNumber;

        // certificateData.value=response.data.Certificate
      })
      .catch((error) => {});
  }, 1000);
}

onMounted(() => {
  getData();
});

onUnmounted(() => {
  clearInterval(timer.value);
  timer.value = null;
});

</script>

<style scoped lang="scss">
.validate {
  position: absolute;
  width:30%;
  left:35%;
  top:20%;
  &-contain {
    position: relative;
    &-search{
      >div{
        display: inline;
      }
      &-input{
        width:80% !important;
      }
      &-button{
        width:12%;
        margin-left:2%;
      }
    }
    p{
      font-size: 2rem;
      margin:4% 0 0 1rem;
      letter-spacing: 2px;
      color:#fff;
      text-align: center;
    }
    &-dh{
      &-dkq{
        width:50%;
        margin:4rem 25%;
      }
      &-sfz{
        width:30%;
        position: absolute;
        top:80%;
        left:35%;
        -webkit-animation: go 1.5s linear 0s infinite alternate;
        animation: go 1.5s linear 0s infinite alternate;
        cursor: pointer;
        transition: all 1.5s;
      }
    }
  }
}
</style>
<style>
@-webkit-keyframes go {
    form {
        top: 60%;
        /* opacity: 1; */
    }
    to {
        top: 10%;
        /* opacity: 0.1; */
    }
}

@keyframes go {
    form {
        top: 80%;
        opacity: 1;
    }
    to {
        top: 10%;
        opacity: 0.5;
    }
}
.validate .el-form .el-form-item__label{
  font-size: 1.6rem;
  line-height: 4vh;
}
.validate .el-input__inner{
  font-size: 1.6rem;
}
.validate .el-input__wrapper{
  height:40px;
  width:80% !important;
  margin-left:3%
}
.validate .el-form-item {
  margin-top:1vh
}
.validate .el-input__inner {
  width:80%;
}
</style>
