<template>
  <div class="container">
    <!-- 盘人 -->
    <van-popup
      v-model:show="peoplePopupShow"
      round
      :style="{ width: '90%' }"
      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'"
            :rules="[{ required: true, message: '请输入身份证号码' }]"
          >
          </van-field>
          <van-field
            v-model="form.lxdh"
            placeholder="请输入手机号"
            v-if="pCheckFlag === 'phoneNum'"
            :rules="[{ required: true, message: '请输入手机号码' }]"
          >
          </van-field>
        </div>
        <div class="checkPeopleSubmit" @click="checkP()">
          <div class="sub-btn">
            <img
              :src="require('../assets/images/new/faceR.png')"
              alt=""
              width="17"
              height="17"
            />&nbsp;&nbsp;查询人员
          </div>
        </div>
        <div class="alert_info">
          请根据工作需求使用此功能，您的每次查询将记录日志！
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  defineProps,
  defineEmits,
  toRefs,
  toRef,
  defineExpose,
} from "vue";
import { useRouter } from "vue-router";
import { hintToast } from "../utils/tools.js";
const router = useRouter();
const peoplePopupShow = ref(false);
const form = ref({
  sfzh: "",
  lxdh: "",
});
// 盘人弹框按钮List
const checkPList = [
  { label: "身份证", value: "sfzh" },
  { label: "手机号", value: "phoneNum" },
];
const pCheckFlag = ref("sfzh");

// 关闭弹窗
function handlePClose() {
  peoplePopupShow.value = false;
}

// 盘人
function checkP(e) {
  if (pCheckFlag.value == "sfzh") {
    if (form.value.sfzh) {
      router.push({
        path: "/yyzx/dhcr",
        query: { sfzh: form.value.sfzh, pclx: "sjh" },
      });
    } else {
      hintToast("请输入身份证！！！");
    }
  }
  if (pCheckFlag.value == "phoneNum") {
    if (form.value.lxdh) {
      router.push({ path: "/yyzx/dhcr", query: { dhhm: form.value.lxdh , pclx: "sjh",} });
    } else {
      hintToast("请输入电话号码！！！");
    }
  }
}

// 按钮切换
function getPItem(item, index) {
  pCheckFlag.value = item.value;
}

defineExpose({
  peoplePopupShow,
});
</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);
}
.alert_info {
  font-size: 11px;
  text-align: center;
  color: red;
}
.checkPeoplePopup {
  padding: 2vw;
  box-sizing: border-box;
  .select-box {
    padding: 1vw;
  }
}
.van-cell {
  background: #f7f7f7;
  border-radius: 2vw;
}
</style>
