<!--
 * @Date: 2024-01-15 17:39:29
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-16 15:48:05
 * @FilePath: /xysBooking/src/views/addVisitor.vue
 * @Description: 文件描述
-->
<template>
  <div class="add-visitor-page">
    <div class="input-item">
      <div>姓名</div>
      <div>
        <input type="text" v-model="username" placeholder="请输入参观者真实姓名" @blur="checkUsername">
      </div>
    </div>
    <div class="input-item">
      <div>证件类型</div>
      <div @click="idTypeChange">
        {{ fieldValue }}&nbsp;<van-icon name="arrow-down" />
      </div>
    </div>
    <div class="input-item">
      <div>证件号码</div>
      <div>
        <input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;">
      </div>
    </div>
    <div style="color:#A67939; font-size: 0.85rem;">
      <van-icon name="warning-o" />&nbsp;温馨提示：账号实名认证信息一经填写将无法修改
    </div>
    <div class="save-wrapper">
      <div class="save-btn" @click="addVisitor">保存</div>
    </div>

    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>

    <van-toast v-model:show="show_error" style="">
      <template #message>
        {{ error_message }}
      </template>
    </van-toast>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import xctcCheck from "xctc-check"
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { showSuccessToast, showFailToast } from 'vant';
import { useGo } from '@/hooks/useGo'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
const username = ref('');
const idCode = ref('');
const isError = ref(false);

const show_error = ref(false);
const error_message = ref('');

const checkUsername = () => {
  let flag = true;
  if (username.value) {

  } else {
    show_error.value = true;
    error_message.value = '参观者名称不能为空';
    flag = false;
  }
  return flag;
}
const checkIdCode = () => {
  const res = xctcCheck.checkIdCard(idCode.value);
  let flag = true;
  if (res.status) {

  } else {
    show_error.value = true;
    error_message.value = res.msg;
    flag = false;
  }
  return flag;
}

const addVisitor = () => {
  // TODO：保存用户信息
  if (checkUsername() && checkIdCode()) {
    $router.go(-1);
    console.warn(username.value);
    console.warn(idCode.value);
    console.warn(fieldValue.value);
  }
}

const showPicker = ref(false);
const idTypeChange = () => {
  showPicker.value = !showPicker.value;
}
const columns = [
  { text: '身份证', value: '0' },
  { text: '其他证件', value: '1' },
];
const fieldValue = ref('身份证');

const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].text;
};
</script>

<style lang="less" scoped>
.add-visitor-page {
  padding: 1rem;
  position: relative;
  .input-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    input {
      border: 0;
      text-align: right;
    }
  }
  .save-wrapper {
    background-color: #FFF;
    position: fixed;
    width: 100vw;
    bottom: 0;
    left: 0;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .save-btn {
      background-color: #A67939;
      padding: 0.8rem 8rem;
      color: #FFF;
      border-radius: 5px;
    }
  }
}
</style>