<!--
 * @Date: 2024-01-15 17:39:29
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 15:21:50
 * @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>
        {{ fieldValue }}
      </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 { validateCIN } from '@code-ts/cin'
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'
import { addPersonAPI } from '@/api/index'

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

const username = ref('');
const idCode = ref('');

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

const checkUsername = () => { // 检查用户名是否为空
  let flag = true;
  if (!username.value) {
    show_error.value = true;
    error_message.value = '参观者名称不能为空';
    flag = false;
  }
  return flag;
}

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

const addVisitor = async () => {
  // 保存用户信息
  if (checkUsername() && checkIdCode()) {
    const { code, data } = await addPersonAPI({ name: username.value, id_type: id_type.value, id_number: idCode.value });
    if (code) {
      $router.go(-1);
    }
  }
}

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

const fieldValue = ref('身份证');
const id_type = ref('1');

const onConfirm = ({ selectedOptions }) => { // 切换类型回调
  showPicker.value = false;
  //
  fieldValue.value = selectedOptions[0].text; // 选中的文字
  id_type.value = selectedOptions[0].value; // 选中的value
};
</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 {
      text-align: center;
      flex-grow: 1;
      background-color: #A67939;
      padding: 0.8rem 0;
      margin: 1rem;
      color: #FFF;
      border-radius: 5px;
      font-size: 1.1rem;
    }
  }
}

:deep(.van-picker__confirm) {
  color: #A67939;
}
</style>