<!--
 * @Date: 2024-01-15 16:35:10
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-29 17:35:19
 * @FilePath: /xyxBooking-weapp/src/pages/addVisitor/index.vue
 * @Description: 添加参观者
-->
<template>
  <view class="add-visitor-page">
    <nut-form>
        <nut-form-item label="姓名">
            <nut-input v-model="name" placeholder="请输入参观者姓名" type="text" />
        </nut-form-item>
        <nut-form-item label="证件类型">
            <view style="padding: 10px 0;">身份证</view>
        </nut-form-item>
        <nut-form-item label="证件号">
            <nut-input v-model="id_number" placeholder="请输入参观者证件号" type="idcard" />
        </nut-form-item>
    </nut-form>
    
    <view style="padding: 1rem;">
        <nut-button type="primary" block color="#A67939" @click="save">保存</nut-button>
    </view>
    
    <view v-if="visitorList.length" class="history-list">
        <view class="title">历史参观者</view>
        <view v-for="(item, index) in visitorList" :key="index" class="item">
            <view class="info">
                <view class="name">{{ item.name }}</view>
                <view class="id">{{ formatId(item.id_number) }}</view>
            </view>
            <view class="action" @tap="delVisitor(item.id)">删除</view>
        </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { personListAPI, addPersonAPI, delPersonAPI } from '@/api/index'

const name = ref('');
const id_number = ref('');
const visitorList = ref([]);

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

function replaceMiddleCharacters(inputString) {
  if (!inputString || inputString.length < 15) {
    return inputString;
  }
  const start = Math.floor((inputString.length - 8) / 2);
  const end = start + 8;
  const replacement = '*'.repeat(8);
  return inputString.substring(0, start) + replacement + inputString.substring(end);
}

const formatId = (id) => replaceMiddleCharacters(id);

const loadList = async () => {
    const { code, data } = await personListAPI({});
    if (code) {
        visitorList.value = data;
    }
}

const save = async () => {
    if (!name.value) {
        Taro.showToast({ title: '请输入姓名', icon: 'none' });
        return;
    }
    if (!checkIDCard(id_number.value)) {
        Taro.showToast({ title: '请输入正确的身份证号', icon: 'none' });
        return;
    }
    
    Taro.showLoading({ title: '保存中' });
    const { code, msg } = await addPersonAPI({
        name: name.value,
        id_type: 1, // 身份证
        id_number: id_number.value
    });
    Taro.hideLoading();
    
    if (code) {
        Taro.showToast({ title: '添加成功' });
        name.value = '';
        id_number.value = '';
        loadList();
        // 自动返回上一页？ H5 没有自动返回
        Taro.navigateBack();
    } else {
        Taro.showToast({ title: msg || '添加失败', icon: 'none' });
    }
}

const delVisitor = async (id) => {
    const { confirm } = await Taro.showModal({ title: '提示', content: '确定删除该参观者吗？' });
    if (confirm) {
        const { code, msg } = await delPersonAPI({ person_id: id });
        if (code) {
            Taro.showToast({ title: '删除成功' });
            loadList();
        } else {
            Taro.showToast({ title: msg || '删除失败', icon: 'none' });
        }
    }
}

useDidShow(() => {
    loadList();
})
</script>

<style lang="less">
.add-visitor-page {
    min-height: 100vh;
    background-color: #F6F6F6;
    padding-top: 1px;
    
    .history-list {
        margin-top: 1rem;
        background-color: #FFF;
        padding: 1rem;
        
        .title {
            font-size: 1rem;
            color: #333;
            margin-bottom: 1rem;
            border-left: 3px solid #A67939;
            padding-left: 0.5rem;
        }
        
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid #EEE;
            
            &:last-child {
                border-bottom: none;
            }
            
            .info {
                .name {
                    font-size: 1rem;
                    color: #333;
                    margin-bottom: 0.3rem;
                }
                .id {
                    font-size: 0.9rem;
                    color: #999;
                }
            }
            
            .action {
                color: #FF0000;
                font-size: 0.9rem;
            }
        }
    }
}
</style>