<template>
  <div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
    <!-- Course List -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="px-4 py-3 space-y-4"
    >
      <CourseCard v-for="course in courses" :key="course.id" :course="course" />
    </van-list>

    <!-- 无数据提示 -->
    <div v-if="!loading && courses.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 CourseCard from '@/components/ui/CourseCard.vue';
import { courses as mockCourses } from '@/utils/mockData';
import { useTitle } from '@vueuse/core';

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const courses = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 10

const onLoad = () => {
  loading.value = true
  // 模拟异步加载数据
  setTimeout(() => {
    const start = (page.value - 1) * pageSize
    const end = start + pageSize
    const newCourses = mockCourses.slice(start, end)
    courses.value.push(...newCourses)
    loading.value = false
    if (courses.value.length >= mockCourses.length) {
      finished.value = true
    }
    page.value++
  }, 1000)
}
</script>