<!--
 * @Date: 2024-01-16 11:37:10
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-24 12:45:49
 * @FilePath: /xyxBooking-weapp/src/pages/bookingList/index.vue
 * @Description: 预约记录列表页
-->
<template>
  <view class="booking-list-page">
    <view v-for="(item, index) in bookingList" :key="index">
      <reserveCard :data="item" />
    </view>

    <view v-if="loading" style="text-align: center; color: #999; padding: 20rpx">加载中...</view>
    <view
      v-if="finished && bookingList.length > 0"
      style="text-align: center; color: #999; padding: 20rpx"
      >没有更多了</view
    >

    <view v-if="!bookingList.length && finished" 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>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useDidShow, useReachBottom } from '@tarojs/taro'
import { billListAPI } from '@/api/index'
import { formatDatetime } from '@/utils/tools'
import reserveCard from '@/components/reserveCard.vue'

const page = ref(1)
const limit = ref(5)
const bookingList = ref([])
const loading = ref(false)
const finished = ref(false)

/**
 * @description 加载预约记录列表（分页）
 * @param {boolean} isRefresh 是否刷新（刷新会重置 page 并覆盖列表）
 * @returns {Promise<void>} 无返回值
 */
const loadData = async (isRefresh = false) => {
  if (loading.value || (finished.value && !isRefresh)) {
    return
  }

  loading.value = true
  if (isRefresh) {
    page.value = 1
    finished.value = false
  }

  const { code, data } = await billListAPI({ page: page.value, row_num: limit.value })
  loading.value = false

  if (code) {
    const list = data || []
    list.forEach(item => {
      item.booking_time = item && formatDatetime(item)
      item.order_time = item.created_time ? item.created_time.slice(0, -3) : ''
    })

    if (isRefresh) {
      bookingList.value = list
    } else {
      bookingList.value = bookingList.value.concat(list)
    }

    if (list.length < limit.value) {
      finished.value = true
    } else {
      page.value++
    }
  }
}

useDidShow(() => {
  loadData(true)
})

useReachBottom(() => {
  loadData()
})
</script>

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

  .no-qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 160rpx;

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