<!--
 * @Date: 2025-03-21 14:31:21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-10-22 16:33:19
 * @FilePath: /mlaj/src/views/courses/CourseListQRPage.vue
 * @Description: 课程列表页面 - 支持列表和卡片两种显示模式
-->
<template>
  <AppLayout :title="combinationTitle">
    <div class="pb-16">
      <!-- Course List -->
      <div class="px-4">
        <div v-if="loading" class="flex justify-center py-8">
          <van-loading size="24px">加载中...</van-loading>
        </div>
        <div v-else 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>
        </div>
      </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 { getScheduleCombinationListAPI } from "@/api/course";

const $route = useRoute();
const courses = ref([]);
const loading = ref(false);

// 显示类型，默认列表模式
const displayType = ref('list');
// 组合课程标题
const combinationTitle = ref('');

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

// 加载课程数据
const loadCourses = async () => {
  loading.value = true;
  const params = {};

  // 如果有ID参数，添加到请求中
  if (courseId.value) {
    params.id = courseId.value;
  }

  try {
    const res = await getScheduleCombinationListAPI(params);
    if (res.code) {
      courses.value = res.data.group_list;
      displayType.value = res.data.display_mode;
      combinationTitle.value = res.data.title || '课程列表';
    }
  } catch (error) {
    console.error('加载课程失败:', error);
  } finally {
    loading.value = false;
  }
};

// 页面挂载时加载数据
onMounted(() => {
  loadCourses();
});
</script>