<template>
  <div class="container">
    <!-- 盘人 -->
    <van-popup v-model:show="peoplePopupShow" round :style="{ width: '80%' }" close-icon="close" :overlay="true"
      @close="handlePClose">
      <div class="checkPeoplePopup">
        <div class="select-box">
          <div class="item-boxs" v-for="(item, index) in checkPList" :key="index" @click="getPItem(item, index)">
            <span :class="pCheckFlag === item.value ? 'checkText' : ''">{{
              item.label
            }}</span>
          </div>
        </div>
        <div class="content-box">
          <van-field v-model="form.sfzh" placeholder="请输入身份证号" v-if="pCheckFlag === 'sfzh'" right-icon="photograph"
            :rules="[{ required: true, message: '请输入身份证号码' }]">
          </van-field>
          <van-field v-model="form.value" placeholder="请输入手机号" right-icon="graphic" v-if="pCheckFlag === 'phoneNum'"
            :rules="[{ required: true, message: '请输入手机号码' }]">
          </van-field>
          <div v-if="pCheckFlag === 'photo'">
            <img :src="require('../../../../assets/images/new/photoin.png')" alt="" width="100" height="100" />
          </div>
          <div v-if="pCheckFlag === 'scanf'">
            <!-- <van-icon name="scan" /> -->
          </div>
          <!-- 综合 -->
          <div v-if="pCheckFlag === 'comprehensive'" style="width: 100%">
            <van-field v-model="form.value" placeholder="请输入姓名" :rules="[{ required: true, message: '请输入姓名' }]"
              right-icon="user-o">
            </van-field>
            <!-- <van-field
              v-model="value"
              readonly
              name="calendar"
              placeholder="请输入出生日期"
              @click="showCalendar = true"
            >
            <template #right-icon>
                <i class="iconfontorange">&#xe613;</i>
              </template>
</van-field> -->
            <van-field v-model="form.value" name="csrq" placeholder="请输入生日,格式为2020-01-01" right-icon="calendar-o"
              @touchstart.stop="showDateKeyboard = true" :rules="[
                {
                  pattern: /\d{4}-\d{2}-\d{2}/,
                  required: true,
                  message: '请输入生日,格式为2020-01-01',
                },
              ]">
            </van-field>
            <van-field v-model="form.result" name="picker" clickable placeholder="请选择性别" right-icon="award-o"
              @click="getCommonPop('sex')">
            </van-field>
          </div>
        </div>
        <div class="checkPeopleSubmit" @click="checkP(pCheckFlag)" v-if="pCheckFlag != 'photo'">
          <div class="sub-btn">
            <img :src="require('../../../../assets/images/new/faceR.png')" alt="" width="17"
              height="17" />&nbsp;&nbsp;盘查人员
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="isShowCommonPicker" round position="bottom">
      <van-picker :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  defineProps,
  defineEmits,
  defineExpose,
  toRefs,
  toRef,
} from "vue";
import { hintToast } from "../../../../utils/tools.js";
import { useRouter } from "vue-router";
const router = useRouter();
const peoplePopupShow = ref(false);
function handleOpen() {
  peoplePopupShow.value = true;
}
function handlePClose() {
  peoplePopupShow.value = false;
}
defineExpose({
  handleOpen,
});
const form = ref({
  sfzh: "",
  lxdh: "",
});
// 盘人
function checkP(e) {
  switch (e) {
    case "sfzh":
      if (form.value.sfzh) {
        router.push({
          path: "/quarantinePersonnel",
          query: {
            sfzh: form.value.sfzh,
            pcsrlx: "2",
          },
        });
      } else {
        hintToast("请输入身份证号码");
      }
      break;
  }
}
// 盘人弹框按钮List
const checkPList = [
  { label: "身份证", value: "sfzh" },
  { label: "手机号", value: "phoneNum" },
  // { label: "人像", value: "photo" },
  // { label: "扫码", value: "scanf" },
  // { label: "综合", value: "comprehensive" },
];
const pCheckFlag = ref("sfzh");
function getPItem(item, index) {
  pCheckFlag.value = item.value;
}
// 弹出层数据
const columns = ref(["测试1", "测试2", "测试3"]);
const isShowCommonPicker = ref(false);
function getCommonPop(val) {
  switch (val) {
    case "cllx":
      columns.value = ["1", "2", "3"];
      break;
    case "sex":
      columns.value = ["男", "女", "未知"];
      break;
  }
  isShowCommonPicker.value = true;
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/mixin.scss";

.item-boxs {
  @include font_size($font_medium_s);
}

.sub-btn {
  @include font_size($font_medium_s);
}
</style>
