<!--
 * @Date: 2025-03-21 14:31:21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-05-21 16:57:36
 * @FilePath: /mlaj/src/views/courses/CourseListQRPage.vue
 * @Description: 课程列表页面 - 支持列表和卡片两种显示模式
-->
<template>
  <AppLayout title="课程列表">
    <div class="pb-16">
      <!-- Course List -->
      <div class="px-4">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多课程了"
          @load="onLoad"
          class="space-y-4"
        >
          <!-- 根据type参数显示不同组件 -->
          <template v-if="displayType === 'card'">
            <CourseImageCard v-for="course in courses" :key="course.id" :course="course" />
          </template>
          <template v-else>
            <CourseCard v-for="course in courses" :key="course.id" :course="course" />
          </template>
        </van-list>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import AppLayout from '@/components/layout/AppLayout.vue';
import CourseCard from '@/components/ui/CourseCard.vue';
import CourseImageCard from '@/components/ui/CourseImageCard.vue';
// 导入接口
import { getCourseListAPI } from "@/api/course";
import { List } from 'vant';

const $route = useRoute();
const courses = ref([]);
const loading = ref(false);
const finished = ref(false);
const limit = ref(5);
const page = ref(0);

// 根据URL参数确定显示类型
const displayType = computed(() => {
  return $route.query.type || 'list'; // 默认为list模式
});

// 获取URL参数中的ID
const courseId = computed(() => {
  return $route.query.id || '';
});

// Load more courses
const onLoad = async () => {
  const nextPage = page.value;
  const params = { 
    limit: limit.value, 
    page: nextPage
  };
  
  // 如果有ID参数，添加到请求中
  if (courseId.value) {
    params.id = courseId.value;
  }
  
  const res = await getCourseListAPI(params);
  if (res.code) {
    courses.value = [...courses.value, ...res.data];
    finished.value = res.data.length < limit.value;
    page.value = nextPage + 1;
  }
  loading.value = false;
};
</script>