<template>
  <view class="visitor-list-page">
    <view class="visitor-content">
      <view class="title">
        <view class="text">参观者信息</view>
      </view>
      <view @tap="() => { go('/pages/addVisitor/index') }" class="add-visitors">
        <view class="add-btn"><IconFont name="plus" /> 添加参观者</view>
      </view>
      <view v-if="visitorList.length" class="visitors-list">
        <view v-for="(item, index) in visitorList" :key="index" class="visitor-item">
          <view>
            <view style="color: #A67939;">{{ item.name }}</view>
            <view>证件号：{{ formatId(item.id_number) }}</view>
          </view>
          <view @tap="removeItem(item)" style="margin-left: 32rpx;">
            <image src="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" style="width: 38rpx; height: 38rpx;" />
          </view>
        </view>
      </view>
      <view v-else class="no-visitors-list">
        <image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 320rpx; height: 320rpx;" />
        <view class="no-visitors-list-title">您还没有添加过参观者</view>
      </view>
    </view>
    <view style="height: 256rpx;"></view>
    <view class="index-nav">
      <view class="nav-logo" @tap="toHome">
        <image :src="icon_3" style="width: 48rpx; height: 48rpx;" />
        首页
      </view>
      <view class="nav-logo" @tap="toCode">
        <image :src="icon_4" style="width: 48rpx; height: 48rpx; margin-bottom: 3rpx;" />
        预约码
      </view>
      <view class="nav-logo" @tap="toMy">
        <image :src="icon_5" style="width: 48rpx; height: 48rpx;" />
        我的
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { useGo } from '@/hooks/useGo'
import { personListAPI, delPersonAPI } from '@/api/index'
import icon_3 from '@/assets/images/首页01@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的02@2x.png'

const go = useGo();

const toCode = () => { // 跳转到预约码
  go('/pages/bookingCode/index');
}
const toHome = () => { // 跳转到首页
  go('/pages/index/index');
}
const toMy = () => { // 跳转到我的
  go('/pages/me/index');
}

const visitorList = ref([]);

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 () => {
  try {
    const { code, data } = await personListAPI({});
    if (code) {
        visitorList.value = data || [];
    }
  } catch (err) {
    console.error(err);
    Taro.showToast({ title: '加载失败', icon: 'none' });
  }
}

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

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

<style lang="less">
.visitor-list-page {
    min-height: 100vh;
    background-color: #F6F6F6;
    padding: 32rpx;

    .visitor-content {
        .title {
            .text {
                font-size: 35rpx;
                font-weight: bold;
                margin-bottom: 32rpx;
                border-left: 6rpx solid #A67939;
                padding-left: 16rpx;
            }
        }

        .add-visitors {
            border: 2rpx dashed #A67939;
            color: #A67939;
            border-radius: 10rpx;
            text-align: center;
            padding: 21rpx 0;
            margin: 32rpx 0;
            font-size: 37rpx;
            .add-btn {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .visitors-list {
            .visitor-item {
                background-color: #FFF;
                border-radius: 16rpx;
                padding: 32rpx;
                margin-bottom: 32rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }

        .no-visitors-list {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .no-visitors-list-title {
                color: #A67939;
                font-size: 34rpx;
                margin-top: 32rpx;
            }
        }
    }

    .index-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 134rpx;
        background: #FFFFFF;
        box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #A67939;
        .nav-logo {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 26rpx;
        }
    }
}
</style>