<template>
  <z-paging ref="paging" v-model="tryListenList" auto-show-back-to-top class="course-list-paging" @query="getTryListenList">
    <template #top>
      <!-- 自定义导航栏 -->
      <nav-bar :title="$t('courseHome.tryListen')" />
    </template>

    <!-- 课程列表 -->
    <view class="course-list">
      <listItem v-for="item in tryListenList" :key="item.id" :data="item" desc="content" />
    </view>
  </z-paging>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onMounted } from 'vue'
import listItem from '@/components/course/ListItem.vue'
import { courseApi } from '@/api/modules/course'
import type { ICourse } from '@/types/course'

const paging = ref<any>(null)

// 精彩试听
const tryListenList = ref<ICourse[]>([]) // 试听课程列表
/**
 * 获取试听课程列表
 */
const getTryListenList = async (pageNo: number, pageSize: number) => {
  try {
    const res = await courseApi.getMarketCourseList({
      id: 1,
      page: pageNo,
      limit: pageSize
    })
    paging.value.complete(res.courseList.records);
  } catch (error) {
    paging.value.complete(false);
    console.error('获取试听课程失败:', error)
  }
}

// 页面加载时获取试听课程列表
onMounted(() => {
  paging.value && paging.value.reload();
})
</script>

<style lang="scss" scoped>
body {
  background-color: #f5f7fa;
}
.course-list {
  padding: 10px;
}
</style>