<!--
 * @Date: 2025-04-07
 * @Description: 课程列表组件
-->
<template>
    <div class="course-list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="course in courses" :key="course.id"
                class="course-item bg-white mb-3 rounded-lg overflow-hidden">
                <van-cell :title="course.title" :label="course.type" class="pb-2">
                    <template #icon>
                        <van-image :src="course.thumbnail" width="120" height="68" fit="cover" class="mr-3 rounded" />
                    </template>
                </van-cell>
                <div class="px-4 pb-4">
                    <div class="flex justify-between items-center text-sm text-gray-600 mb-2">
                        <span>已学习 {{ formatDuration(course.studyTime) }}</span>
                        <span>{{ course.progress }}%</span>
                    </div>
                    <van-progress :percentage="course.progress" :stroke-width="4" color="#4080ff" />
                </div>
            </div>
        </van-list>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// 接收课程列表数据
const props = defineProps({
    courses: {
        type: Array,
        default: () => []
    }
})

// 列表加载状态
const loading = ref(false)
const finished = ref(true) // 由于使用的是传入的静态数据，所以直接设置为完成状态

// 加载更多
const onLoad = () => {
    loading.value = false
}

// 格式化时长显示
const formatDuration = (seconds) => {
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    if (hours > 0) {
        return `${hours}小时${minutes}分钟`
    }
    return `${minutes}分钟`
}
</script>

<style scoped>
.course-list {
    padding: 0.5rem;
}

.course-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
</style>