<!--
 * @Date: 2025-03-21 11:47:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-21 17:21:32
 * @FilePath: /mlaj/src/views/activities/MyActivitiesPage.vue
 * @Description: 文件描述
-->
<template>
  <div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
    <!-- 活动列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="px-4 py-3"
    >
      <ActivityCard
        v-for="activity in activities"
        :key="activity.id"
        :activity="activity"
      />
    </van-list>

    <!-- 无数据提示 -->
    <div v-if="!loading && activities.length === 0" class="flex flex-col items-center justify-center py-12">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
      </svg>
      <p class="mt-4 text-gray-500">暂无活动记录</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ActivityCard from '@/components/ui/ActivityCard.vue'
import { activities as mockActivities } from '@/utils/mockData'
import { useTitle } from '@vueuse/core';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const router = useRouter()
const activities = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 10

// 加载活动数据
const onLoad = async () => {
  try {
    loading.value = true
    // 模拟异步加载数据
    await new Promise(resolve => setTimeout(resolve, 1000))

    const start = (page.value - 1) * pageSize
    const end = start + pageSize
    const newActivities = mockActivities.slice(start, end)

    activities.value.push(...newActivities)

    if (newActivities.length < pageSize) {
      finished.value = true
    } else {
      page.value += 1
    }
  } catch (error) {
    console.error('加载活动数据失败:', error)
  } finally {
    loading.value = false
  }
}
</script>