<!--
 * @Date: 2024-01-26 13:08:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-08 16:57:38
 * @FilePath: /xyxBooking-weapp/src/pages/search/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="search-page">
    <view>
      <view v-if="!is_search">
        <view class="input-card" @tap="open_id_type_picker">
          <view class="input-label">证件类型</view>
          <view class="picker-value">
            <text>{{ id_type_label }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </view>
        <view class="input-card">
          <view class="input-label">证件号码</view>
          <input
            class="id-input"
            type="text"
            v-model="idCode"
            placeholder="请输入证件号码"
            @blur="checkIdCode"
            :maxlength="id_type === 1 ? 18 : 30"
          >
        </view>
        <view class="tip-block">
          <view class="tip-title">
            <IconFont name="tips" size="16" color="#A67939" />
            <text class="tip-title-text">温馨提示</text>
          </view>
          <view class="tip-desc">获取参观码，扫码或识别身份证成功进闸机</view>
        </view>
      </view>
      <view v-else>
        <qrCodeSearch :id="id_number" />
      </view>
    </view>
    <view class="logo"></view>

    <view v-if="!is_search" class="footer">
      <view class="footer-btn" @tap="searchBtn">查询</view>
    </view>
    <view v-else class="success-footer">
      <view @tap="goToHome" class="btn-item btn-left">首页</view>
      <view @tap="goBack" class="btn-item btn-right">返回查询</view>
    </view>
  </view>

  <nut-popup v-model:visible="show_id_type_picker" position="bottom" safe-area-inset-bottom>
    <nut-picker
      v-model="id_type_picker_value"
      :columns="id_type_columns"
      title="选择证件类型"
      @confirm="on_id_type_confirm"
      @cancel="show_id_type_picker = false"
    ></nut-picker>
  </nut-popup>
</template>

<script setup>
import { ref, computed } 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 show_id_type_picker = ref(false);
const id_type_options = [
  { label: '身份证', value: 1 },
  { label: '其他', value: 3 }
];
const id_type = ref(id_type_options[0].value);
const id_type_picker_value = ref([String(id_type.value)]);

const id_type_columns = computed(() => {
  return id_type_options.map(item => ({
    text: item.label,
    value: String(item.value)
  }));
});
const id_type_label = computed(() => {
  return id_type_options.find(item => item.value === id_type.value)?.label || id_type_options[0].label;
});

const open_id_type_picker = () => {
  id_type_picker_value.value = [String(id_type.value)];
  show_id_type_picker.value = true;
}

const on_id_type_confirm = ({ selectedValue }) => {
  const value = selectedValue?.[0];
  id_type.value = Number(value) || 1;
  show_id_type_picker.value = false;
}

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

const checkIdCode = () => { // 检查身份证号是否为空
  if (id_type.value !== 1) return true;

  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 {
    position: relative;
    min-height: 100vh;
    padding: 32rpx;
    padding-bottom: 220rpx;
    background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .input-card {
        background-color: #FFF;
        border-radius: 16rpx;
        border: 2rpx solid rgba(166, 121, 57, 0.45);
        margin-bottom: 32rpx;
        height: 112rpx;
        display: flex;
        align-items: center;
        padding: 0 32rpx;

        .input-label {
            width: 160rpx;
            color: #333;
            font-size: 30rpx;
            font-weight: 600;
        }

        .id-input {
            flex: 1;
            width: 100%;
            text-align: right;
            font-size: 30rpx;
            color: #333;
        }

        .picker-value {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-align: right;
            font-size: 30rpx;
            color: #333;
        }

        .picker-arrow {
            margin-left: 10rpx;
            color: #BBB;
            font-size: 28rpx;
        }
    }

    .tip-block {
        margin-top: 64rpx;
        color: #A67939;
        text-align: center;
        font-size: 30rpx;

        .tip-title {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tip-title-text {
            margin-left: 10rpx;
            font-weight: 600;
        }

        .tip-desc {
            margin-top: 16rpx;
            font-weight: 600;
        }
    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
    }

    .footer-btn {
        background-color: #A67939;
        color: #FFF;
        text-align: center;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12rpx;
        font-size: 34rpx;
        font-weight: 600;
    }

    .success-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
        display: flex;
        gap: 24rpx;

        .btn-item {
            flex: 1;
            text-align: center;
            height: 96rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12rpx;
            font-size: 34rpx;
            font-weight: 600;
        }

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

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

  .logo {
      position: absolute;
      right: 0;
      bottom: 240rpx;
      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>