<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"
    />
    <PrivacyPopup
      v-model:visible="showPrivacyPopup"
      @agree="onPrivacyAgree"
      @disagree="onPrivacyDisagree"
    />
  </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 { showError, showSuccess, showConfirm } from '@/utils/toast'
import indexNav from '@/components/indexNav.vue'
import PrivacyPopup from '@/components/PrivacyPopup.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)
    showError('加载失败')
  }
}

/**
 * @description 删除参观者
 * @param {Object} item 参观者对象
 * @returns {Promise<void>} 无返回值
 */
const removeItem = async item => {
  const { confirm } = await showConfirm('确定删除该参观者吗？')
  if (confirm) {
    try {
      const res = await delPersonAPI({ person_id: item.id })
      if (res && res.code) {
        showSuccess('删除成功')
        loadList()
      }
    } catch (error) {
      console.error(error)
      showError('删除出错')
    }
  }
}

const showPrivacyPopup = ref(false)

useDidShow(() => {
  loadList()
  const hasAgreed = Taro.getStorageSync('HAS_AGREED_PRIVACY')
  if (!hasAgreed) {
    showPrivacyPopup.value = true
  }
})

/**
 * @description 隐私协议同意回调
 */
const onPrivacyAgree = () => {
  Taro.setStorageSync('HAS_AGREED_PRIVACY', true)
  showPrivacyPopup.value = false
}

/**
 * @description 隐私协议拒绝回调
 */
const onPrivacyDisagree = () => {
  const pages = Taro.getCurrentPages()
  if (pages.length > 1) {
    Taro.navigateBack()
  } else {
    // 如果是首个页面，跳转到首页
    Taro.reLaunch({ url: '/pages/index/index' })
  }
}
</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>