<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 flex items-center justify-center">
          <IconFont name="plus" class="mr-1" /> 添加参观者
        </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>
    <indexNav
      :icons="nav_icons"
      active="me"
      :allow_active_tap="true"
      position="fixed"
      center_variant="normal"
      @select="on_nav_select"
    />
  </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 indexNav from '@/components/indexNav.vue'
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'
import { mask_id_number } from '@/utils/tools'

const go = useGo();

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

const nav_icons = { home: icon_3, code: icon_4, me: icon_5 }

const on_nav_select = (key) => {
  if (key === 'home') return toHome()
  if (key === 'code') return toCode()
  if (key === 'me') return toMy()
}

const visitorList = ref([]);
const formatId = (id) => mask_id_number(id)

/**
 * @description 加载参观者列表
 * @returns {Promise<void>} 无返回值
 */
const loadList = async () => {
  try {
    const { code, data } = await personListAPI({});
    if (code) {
        visitorList.value = data || [];
    }
  } catch (err) {
    console.error(err);
    Taro.showToast({ title: '加载失败', icon: 'none' });
  }
}

/**
 * @description 删除参观者
 * @param {Object} item 参观者对象
 * @returns {Promise<void>} 无返回值
 */
const removeItem = async (item) => {
    const { confirm } = await Taro.showModal({ title: '提示', content: '确定删除该参观者吗？' });
    if (confirm) {
        try {
            const res = await delPersonAPI({ person_id: item.id });
            if (res && res.code) {
                Taro.showToast({ title: '删除成功' });
                loadList();
            }
        } 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;
            }
        }
    }
}
</style>