<!--
 * @Date: 2024-01-26 13:08:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-06 23:23:30
 * @FilePath: /xyxBooking-weapp/src/pages/search/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="search-page">
    <view>
      <view v-if="!is_search">
        <view class="input-item">
          <view>证件号码</view>
          <view>
            <input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;">
          </view>
        </view>
        <view style="color:#A67939; font-size: 30rpx; text-align: center;">
          <view style="display: flex; align-items: center; justify-content: center;">
            <IconFont name="tips" />&nbsp;温馨提示
          </view>
          <view style="margin-top: 16rpx;">获取参观码，扫码或识别身份证成功进闸机</view>
        </view>
      </view>
      <view v-else>
        <qrCodeSearch :id="id_number" />
      </view>
      <view v-if="!is_search" class="save-wrapper">
        <view class="save-btn" @tap="searchBtn">查询</view>
      </view>
      <view v-else class="success-btn">
        <view @tap="goToHome" class="btn-item btn-left">首页</view>
        <view @tap="goBack" class="btn-item btn-right">返回查询</view>
      </view>
    </view>
    <view class="logo"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import qrCodeSearch from '@/components/qrCodeSearch';
import { useGo } from '@/hooks/useGo'

const go = useGo();
const is_search = ref(false);
const idCode = ref('');
const id_number = ref('');

// 简单的身份证校验
const validateCIN = (id) => {
    return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(id);
}

const checkIdCode = () => { // 检查身份证号是否为空
  let flag = true;
  if (idCode.value.length === 15) { // 15位身份证号码不校验
    flag = true;
  } else {
    if (!validateCIN(idCode.value)) {
      Taro.showToast({ title: '请检查身份证号码', icon: 'none' });
      flag = false;
    }
  }
  return flag;
}

const searchBtn = async () => {
  // 查询用户信息
  if (checkIdCode() && idCode.value) {
    is_search.value = true;
    id_number.value = idCode.value;
    idCode.value = ''
  }
}
const goBack = () => {
  is_search.value = false;
}
const goToHome = () => {
  go('/index')
}
</script>

<style lang="less">
.search-page {
    padding: 32rpx;
    min-height: 100vh;
    background-color: #F6F6F6;

    .input-item {
        background-color: #FFF;
        padding: 32rpx;
        border-radius: 16rpx;
        margin-bottom: 32rpx;

        view:first-child {
            margin-bottom: 16rpx;
            font-weight: bold;
        }
        input {
            border-bottom: 2rpx solid #EEE;
            padding: 16rpx 0;
        }
    }

    .save-wrapper {
        margin-top: 64rpx;
        .save-btn {
            background-color: #A67939;
            color: #FFF;
            text-align: center;
            padding: 26rpx 0;
            border-radius: 16rpx;
            font-size: 35rpx;
        }
    }

    .success-btn {
      position: fixed;
      bottom: 64rpx;
      width: 750rpx;
      left: 0;
      display: flex;
      justify-content: space-around;

      .btn-item {
          width: 40%;
          text-align: center;
          padding: 26rpx 0;
          border-radius: 16rpx;
          font-size: 35rpx;
      }

      .btn-left {
          border: 2rpx solid #A67939;
          color: #A67939;
          background-color: #FFF;
      }

      .btn-right {
          background-color: #A67939;
          color: #FFF;
      }
  }

  .logo {
      position: absolute;
      right: 0;
      bottom: 200rpx;
      height: 400rpx;
      width: 150rpx;
      background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      opacity: 0.5;
      pointer-events: none;
    }
}
</style>