<!--
 * @Date: 2024-01-16 10:06:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-24 14:12:30
 * @FilePath: /xyxBooking-weapp/src/components/qrCode.vue
 * @Description: 预约码卡组件
-->
<template>
  <view class="qr-code-page">
    <view v-if="userList.length" class="show-qrcode">
      <view class="qrcode-content">
        <view class="user-info">{{ userinfo.name }}&nbsp;{{ userinfo.id }}</view>
        <view class="user-qrcode">
          <view class="left" @tap="prevCode">
            <image src="https://cdn.ipadbiz.cn/xys/booking/%E5%B7%A6@2x.png" />
          </view>
          <view class="center">
            <image :src="currentQrCodeUrl" mode="aspectFit" />
            <view
              v-if="useStatus === STATUS_CODE.CANCELED || useStatus === STATUS_CODE.USED"
              class="qrcode-used"
            >
              <view class="overlay"></view>
              <text class="status-text">二维码{{ get_qrcode_status_text(useStatus) }}</text>
            </view>
          </view>
          <view class="right" @tap="nextCode">
            <image src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png" />
          </view>
        </view>
        <view style="color: red; margin-top: 32rpx">{{ userinfo.datetime }}</view>
      </view>
      <view class="user-list">
        <view
          @tap="selectUser(index)"
          v-for="(item, index) in userList"
          :key="index"
          :class="[
            'user-item',
            select_index === index ? 'checked' : '',
            userList.length > 1 && item.sort ? 'border' : ''
          ]"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
    <view v-else class="no-qrcode">
      <image
        src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png"
        style="width: 320rpx; height: 320rpx"
      />
      <view class="no-qrcode-title">今天没有预约记录</view>
      <view style="text-align: center; color: #a67939; margin-top: 16rpx"
        >查看我的“<text @tap="toRecord" style="text-decoration: underline; color: #ed9820"
          >预约记录</text
        >”</view
      >
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { formatDatetime, mask_id_number, get_qrcode_status_text } from '@/utils/tools'
import { qrcodeListAPI, qrcodeStatusAPI, billPersonAPI } from '@/api/index'
import { useGo } from '@/hooks/useGo'
import BASE_URL from '@/utils/config'

const go = useGo()

const props = defineProps({
  status: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  },
  payId: {
    // 接收 payId
    type: String,
    default: ''
  }
})

const emit = defineEmits(['status-change'])

const select_index = ref(0)
const userList = ref([])

/**
 * @description 切换到上一张二维码（循环）
 * @returns {void} 无返回值
 */
const prevCode = () => {
  select_index.value = select_index.value - 1
  if (select_index.value < 0) {
    select_index.value = userList.value.length - 1
  }
}

/**
 * @description 切换到下一张二维码（循环）
 * @returns {void} 无返回值
 */
const nextCode = () => {
  select_index.value = select_index.value + 1
  if (select_index.value > userList.value.length - 1) {
    select_index.value = 0
  }
}

watch(
  () => select_index.value,
  () => {
    refreshBtn()
  }
)

watch(
  () => props.payId,
  val => {
    if (val) {
      init()
    }
  },
  { immediate: true }
)

const formatId = id => mask_id_number(id)

const userinfo = computed(() => {
  return {
    name: userList.value[select_index.value]?.name,
    id: formatId(userList.value[select_index.value]?.id_number),
    datetime: userList.value[select_index.value]?.datetime
  }
})

const currentQrCodeUrl = computed(() => {
  const url = userList.value[select_index.value]?.qr_code_url
  if (url && url.startsWith('/')) {
    return BASE_URL + url
  }
  return url
})

const useStatus = ref('0')

const STATUS_CODE = {
  APPLY: '1',
  SUCCESS: '3',
  CANCELED: '5',
  USED: '7'
}

/**
 * @description 刷新当前选中二维码状态
 * - 仅在当前选中用户存在时请求
 * - 状态改变时通知父组件刷新订单信息
 * @returns {Promise<void>} 无返回值
 */
const refreshBtn = async () => {
  if (!userList.value[select_index.value]) {
    return
  }
  const { code, data } = await qrcodeStatusAPI({
    qr_code: userList.value[select_index.value].qr_code
  })
  if (code) {
    const oldStatus = useStatus.value
    useStatus.value = data.status

    // 当状态发生改变时，通知父组件刷新订单信息
    if (oldStatus !== data.status) {
      emit('status-change', data.status)
    }
  }
}

/**
 * @description 选择指定参观者的二维码
 * @param {number} index 下标
 * @returns {void} 无返回值
 */
const selectUser = index => {
  select_index.value = index
}

/**
 * @description 按 pay_id 分组标记（用于展示分隔线）
 * - 首个 pay_id 出现处标记 sort=1，其余为 sort=0
 * @param {Array<Object>} data 二维码列表
 * @returns {Array<Object>} 处理后的列表
 */
const formatGroup = data => {
  let lastPayId = null
  for (let i = 0; i < data.length; i++) {
    if (data[i].pay_id !== lastPayId) {
      data[i].sort = 1
      lastPayId = data[i].pay_id
    } else {
      data[i].sort = 0
    }
  }
  return data
}

/**
 * @description 初始化二维码列表
 * - 不传 type：拉取“我的当日二维码列表”
 * - 传入 type + payId：按订单查询二维码人员列表
 * @returns {Promise<void>} 无返回值
 */
const init = async () => {
  if (!props.type) {
    try {
      const { code, data } = await qrcodeListAPI()

      if (code) {
        data.forEach(item => {
          item.qr_code_url = `/admin?m=srv&a=get_qrcode&key=${item.qr_code}`
          item.datetime = formatDatetime({ begin_time: item.begin_time, end_time: item.end_time })
          item.sort = 0
        })
        // 剔除qr_code为空的二维码
        const validData = data.filter(item => item.qr_code !== '')

        if (validData.length > 0) {
          userList.value = formatGroup(validData)
          refreshBtn()
        } else {
          userList.value = []
        }
      }
    } catch (err) {
      console.error('Fetch QR List Failed:', err)
    }
  } else {
    if (props.payId) {
      const { code, data } = await billPersonAPI({ pay_id: props.payId })
      if (code) {
        data.forEach(item => {
          item.qr_code_url = `/admin?m=srv&a=get_qrcode&key=${item.qr_code}`
          item.sort = 0
          // billPersonAPI 返回的数据可能没有 datetime 字段，需要检查
          // 如果没有，可能需要从外部传入或者假设是当天的？
          // H5 代码没有处理 datetime，但在 template 里用了。
          // 这里暂且不做处理，如果没有 datetime 就不显示
        })
        const validData = data.filter(item => item.qr_code !== '')
        if (validData.length > 0) {
          userList.value = validData
          refreshBtn()
        } else {
          userList.value = []
        }
      }
    }
  }
}

onMounted(() => {
  init()
  start_polling()
})

/**
 * @description 轮询刷新二维码状态
 * - 仅在“待使用”状态下轮询，避免无意义请求
 * @returns {Promise<void>} 无返回值
 */
const poll = async () => {
  if (userList.value.length && useStatus.value === STATUS_CODE.SUCCESS) {
    if (userList.value[select_index.value]) {
      const { code, data } = await qrcodeStatusAPI({
        qr_code: userList.value[select_index.value].qr_code
      })
      if (code) {
        useStatus.value = data.status
      }
    }
  }
}

const interval_id = ref(null)
/**
 * @description 启动轮询
 * - 仅在当前选中用户存在时轮询
 * @returns {void} 无返回值
 */

const start_polling = () => {
  if (interval_id.value) {
    return
  }
  interval_id.value = setInterval(poll, 3000)
}

/**
 * @description 停止轮询
 * - 组件卸载时调用，避免内存泄漏
 * @returns {void} 无返回值
 */

const stop_polling = () => {
  if (!interval_id.value) {
    return
  }
  clearInterval(interval_id.value)
  interval_id.value = null
}

onUnmounted(() => {
  stop_polling()
})

defineExpose({
  start_polling,
  stop_polling
})

/**
 * @description 跳转预约记录列表页
 * @returns {void} 无返回值
 */
const toRecord = () => {
  go('/bookingList')
}
</script>

<style lang="less">
.qr-code-page {
  .qrcode-content {
    padding: 32rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 0 29rpx 0 rgba(106, 106, 106, 0.27);

    .user-info {
      color: #a6a6a6;
      font-size: 37rpx;
      margin-top: 16rpx;
      margin-bottom: 16rpx;
    }
    .user-qrcode {
      display: flex;
      align-items: center;
      .left {
        image {
          width: 56rpx;
          height: 56rpx;
          margin-right: 16rpx;
        }
      }
      .center {
        border: 2rpx solid #d1d1d1;
        border-radius: 40rpx;
        padding: 46rpx;
        position: relative;
        image {
          width: 400rpx;
          height: 400rpx;
        }
        .qrcode-used {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 40rpx;
          overflow: hidden;

          .overlay {
            width: 100%;
            height: 100%;
            background-image: url('https://cdn.ipadbiz.cn/xys/booking/southeast.jpeg');
            background-size: contain;
            opacity: 0.9;
          }

          .status-text {
            color: #a67939;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 38rpx;
            white-space: nowrap;
            font-weight: bold;
            z-index: 10;
          }
        }
      }
      .right {
        image {
          width: 56rpx;
          height: 56rpx;
          margin-left: 16rpx;
        }
      }
    }
  }
  .user-list {
    display: flex;
    padding: 32rpx;
    align-items: center;
    flex-wrap: wrap;
    .user-item {
      position: relative;
      padding: 8rpx 16rpx;
      border: 2rpx solid #a67939;
      margin: 8rpx;
      border-radius: 10rpx;
      color: #a67939;
      &.checked {
        color: #fff;
        background-color: #a67939;
      }
      &.border {
        margin-right: 16rpx;
        &::after {
          position: absolute;
          right: -16rpx;
          top: calc(50% - 16rpx);
          content: '';
          height: 32rpx;
          border-right: 2rpx solid #a67939;
        }
      }
    }
  }

  .no-qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 32rpx;

    .no-qrcode-title {
      color: #a67939;
      font-size: 34rpx;
    }
  }
}
</style>