<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" >
          <!-- <p v-if="visitorsRecord == '查询数据为空' && visitorsRecordState"> 今日暂无预约记录 </p> -->
          <p v-if="visitorsRecord == '查询数据为空' && visitorsRecordState && cardId || JSON.stringify(visitorsRecord) == '[]' && visitorsRecordState && cardId"> 今日暂无预约记录 </p>
          <div class="list" v-if="visitorsRecord != '查询数据为空' && visitorsRecord.length>0 && cardId ">
            <div class="item" v-for="(item,index) in visitorsRecord" :key="index" @click="handle('select',item)" :class="item.visitorPersonList[0].recordId == active ? 'active' : ''">
              <div>
                <span class="p1">访客姓名：</span><span class="p2">{{item?.visitorPersonList[0].peopleName}}</span>
              </div>
              <div>
                <span class="p1">访客手机号：</span><span class="p2">{{item?.visitorPersonList[0].peoplePhone}}</span>
              </div>
              <div>
                <span class="p1">被访人姓名：</span><span class="p2">{{item?.targetPeopleName}}</span>
              </div>
              <div>
                <span class="p1">被访人手机号：</span><span class="p2">{{item?.targetPeoplePhone}}</span>
              </div>
              <!-- <div>
                <span class="p1">来访事由：</span><span class="p2">{{item?.visitorReasonInfo}}</span>
              </div> -->
              <div>
                <span class="p1">来访时间：</span><span class="p2">{{item?.startTime?.slice(10,20)}} ~ {{item?.endTime?.slice(10,20)}}</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 dayjs from 'dayjs'
import { getVisitor, signinoutVisitor } from "@/api/index";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
/*----------------------------------组件引入-----------------------------------*/
import layout from "@/components/layout/index.vue";
import 'animate.css';
/*----------------------------------变量声明-----------------------------------*/
const timer = ref(null);
const cardId = ref('341282199204020157');//身份证号码
const active = ref(null); //当前选中的访客记录
const visitorsRecordState = ref(false);//访客记录状态
const visitorsRecord = ref([]);
const time = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss")
const router = useRouter();
/*----------------------------------方法声明-----------------------------------*/
/**
 * 公众号引导状态切换
 */
 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) => {
        if(response?.data?.Certificate){
          cardId.value = response.data.Certificate.IDNumber;
          cardId.value=response.data.Certificate
        }
      })
      .catch((error) => {});
  }, 1000);
}
function handle(type,item) {
  if(type === 'get'){ //获取访客记录
    getVisitor(JSON.stringify({cardId:cardId.value,startTime:`${dayjs().format("YYYY-MM-DD")} 00:00:00`,endTime:`${dayjs().format("YYYY-MM-DD")} 23:59:59`})).then((response) => {
      visitorsRecordState.value = true
      active.value = null
      if(typeof(response.data) == 'object'){
        visitorsRecord.value = []
        for(let i=0;i<response.data.length;i++){
          if(response.data[i]?.startTime?.slice(0,10) == time.slice(0,10)){
            console.log(new Date(response.data[i]?.endTime).getTime() > new Date(dayjs().format("YYYY-MM-DD HH:mm:ss")).getTime(),new Date(response.data[i]?.endTime).getTime(),new Date(dayjs().format("YYYY-MM-DD HH:mm:ss")).getTime())
            if(new Date(response.data[i]?.endTime).getTime() > new Date(dayjs().format("YYYY-MM-DD HH:mm:ss")).getTime()){ //排除当天过期预约
              visitorsRecord.value.unshift(response.data[i])
            }
          }
        }
        if(visitorsRecord.value.length == 1){
          active.value = visitorsRecord.value[0].visitorPersonList[0].recordId;
        }
      }else{
        visitorsRecord.value = response.data
      }
    }).catch((error) => {
      visitorsRecordState.value = true
    })
  }
  if(type ==='select'){ //选择访客记录
    active.value = item.visitorPersonList[0].recordId;
  }
  if(type ==='signIn'){
    signinoutVisitor({recordId:active.value,signInOutState:"in"}).then((response) => {
      if(response.code == 200){
        ElMessage({
          message: "线下签到成功,请留意'共进科技大厦'小程序推送的通行二维码",
          type: "success",
        });
        setTimeout(function () {
          router.push({ path: "/" });
        }, 2000);
      }
    })
  }
}
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:18%;
      padding:10px 0;
      display: inline-block;
      background: rgba(255,255,255,.8);
      border-radius: 10px;
      margin:1% 0 0 1%;
      cursor: pointer;
      span{
        margin-top:10px;
      }
      .p1,.p2{
        display: inline-block;
      }
      .p1{
        text-align: right;
        width:100px;
      }

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