<template>
  <div class="app-container validate">
      <div class="validate-contain">
        <div class="validate-contain-search">
          <el-input placeholder="请输入身份证号码"  v-model="cardId"  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" v-if="!cardId">
          <img src="@/assets/images/dkq.png" class="validate-contain-dh-dkq">
          <img src="@/assets/images/sfz.png" class="validate-contain-dh-sfz">
        </div>
        <p v-if="!cardId">请将身份证置于读卡器上,自动获取身份证号码</p>
        <image style="width: 130px; height: 130px" src="@/assets/images/idcard.png"  v-if="!cardId" />
        <div class="VisitorsRecord">
          <div class="list">
            <div class="item" v-for="(item,index) in visitorsRecord" :key="index" @click="handle('select',item)" :class="item.targetPeopleCode == active ? 'active' : ''">
              <div>
                <span class="p1">被访人姓名：</span><span class="p2">{{item.targetPeopleName}}</span>
              </div>
              <div>
                <span class="p1">被访人身份证号：</span><span class="p2">{{item.targetPeopleName}}</span>
              </div>
              <div>
                <span class="p1">被访人手机号：</span><span class="p2">{{item.targetPeopleName}}</span>
              </div>
              <div>
                <span class="p1">来访事由：</span><span class="p2">{{item.targetPeopleName}}</span>
              </div>
              <div>
                <span class="p1">来访时间：</span><span class="p2">{{item.targetPeopleName}}</span>
              </div>
            </div>
          </div>
        </div>  
        <el-button type="primary" @click="handle('signIn')" class="validate-contain-search-button" size="large" v-if="active" style="width:30%;margin:10% 35% 0;"> 签 到 </el-button>
      </div>
  </div>
  <layout :data="{logoLeft:'2.1%',returnState:true}"/>
</template>

<script setup name="Index">
/*----------------------------------依赖引入-----------------------------------*/
import axios from "axios";
import { ref } from "vue";
import { getVisitor, signinoutVisitor } from "@/api/index";
import 'animate.css';
/*----------------------------------组件引入-----------------------------------*/
import layout from "@/components/layout/index.vue";
/*----------------------------------变量声明-----------------------------------*/
const timer = ref(null);
const cardId = ref(123);
const active = ref(null);
const visitorsRecord = ref([
  {
    targetPeoplePhone:"1111",
    targetPeopleName:"2222",
    visitorReason:"2222",
    startTime:"2222",
    endTime:"2222",
    targetPeopleCode:1,
  },
  {
    targetPeoplePhone:"1111",
    targetPeopleName:"2222",
    visitorReason:"2222",
    startTime:"2222",
    endTime:"2222",
    targetPeopleCode:2,
  },
  {
    targetPeoplePhone:"1111",
    targetPeopleName:"2222",
    visitorReason:"2222",
    startTime:"2222",
    endTime:"2222",
    targetPeopleCode:3,
  },
  {
    targetPeoplePhone:"1111",
    targetPeopleName:"2222",
    visitorReason:"2222",
    startTime:"2222",
    endTime:"2222",
    targetPeopleCode:4,
  },
  {
    targetPeoplePhone:"1111",
    targetPeopleName:"2222",
    visitorReason:"2222",
    startTime:"2222",
    endTime:"2222",
    targetPeopleCode:5,
  },
]);
/*----------------------------------方法声明-----------------------------------*/
/**
 * 公众号引导状态切换
 */
 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) => {
  //       cardId.value = response.data.Certificate.IDNumber;

  //       // cardId.value=response.data.Certificate
  //     })
  //     .catch((error) => {});
  // }, 1000);
}
function handle(type,item) {
  if(type === 'get'){ //获取访客记录
    getVisitor({cardId:cardId.value})
  }
  if(type ==='select'){ //选择访客记录
    active.value = item.targetPeopleCode;
  }
  if(type ==='signIn'){
    signinoutVisitor({recordId:active.value})
  }
}
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;
      }
    }
  }
}
.VisitorsRecord{
  width:250%;
  margin-top:20%;
  margin:20% 0 0 -75%;
  .list{
    width:100%;
    overflow-x: scroll;
    overflow-y: hidden;
    background: rgba(255,255,255,.2);
    border-radius: 5px;
    padding:0px 0 10px;
    .item{
      width:23.7%;
      padding:10px 0;
      display: inline-block;
      background: rgba(255,255,255,.8);
      border-radius: 10px;
      margin:1% 0 0 1%;
      span{
        margin-top:10px;
      }
      .p1,.p2{
        display: inline-block;
      }
      .p1{
        text-align: right;
        width:100px;
      }

    }
    .active{
      background: #409eff;
      color:#fff;
    }
  }
}
</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>
