<!--
 * @Date: 2025-04-07
 * @Description: 课程学习页面
-->
<template>
    <div class="study-page">
        <!-- 用户信息区域 -->
        <div class="user-info bg-green-50/70 p-4 flex flex-col">
            <div class="flex items-center mb-3">
                <div class="flex-shrink-0">
                    <van-image round width="3rem" height="3rem" :src="userInfo.avatar" :alt="userInfo.name" />
                </div>
                <div class="text-lg text-black font-bold" style="margin-left: 1rem">
                    {{ userInfo.name }}
                </div>
            </div>
            <div class="text-sm text-gray-500 mb-2">
                本周第 <span class="text-black font-bold">{{ userInfo.weeklyRank }}</span> 名
            </div>
            <div class="text-sm text-gray-500">
                已加入 <span class="text-black font-bold">{{ userInfo.joinDays }}</span> 天
                <span class="mx-2">·</span>
                连续学习
                <span class="text-black font-bold">{{ userInfo.continuousDays }}</span> 天
            </div>
        </div>

        <!-- 学习记录和统计标签页 -->
        <van-tabs v-model:active="activeTab" sticky shrink>
            <!-- 学习记录标签 -->
            <van-tab title="学习记录" name="record">
                <div class="p-4">
                    <div class="flex space-x-4 mb-4">
                        <button class="rounded-full px-4 py-1 text-xs transition-colors"
                            :class="courseType === 'column' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'"
                            @click="courseType = 'column'">
                            专栏
                        </button>
                        <button class="rounded-full px-4 py-1 text-xs transition-colors"
                            :class="courseType === 'single' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'"
                            @click="courseType = 'single'">
                            单课
                        </button>
                    </div>
                    <course-list v-if="courseType === 'column'" :courses="columnCourses" />
                    <course-list v-else :courses="singleCourses" />
                </div>
            </van-tab>

            <!-- 学习统计标签 -->
            <van-tab title="学习统计" name="stats">
                <div class="p-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-white rounded-lg p-4 shadow-sm">
                            <div class="text-gray-500 text-sm mb-1">总学习时长</div>
                            <div class="text-black font-medium">{{ formatDuration(stats.totalDuration) }}</div>
                        </div>
                        <div class="bg-white rounded-lg p-4 shadow-sm">
                            <div class="text-gray-500 text-sm mb-1">已完成课程</div>
                            <div class="text-black font-medium">{{ stats.completedCourses }}门</div>
                        </div>
                        <div class="bg-white rounded-lg p-4 shadow-sm">
                            <div class="text-gray-500 text-sm mb-1">学习天数</div>
                            <div class="text-black font-medium">{{ stats.studyDays }}天</div>
                        </div>
                        <div class="bg-white rounded-lg p-4 shadow-sm">
                            <div class="text-gray-500 text-sm mb-1">平均每日学习</div>
                            <div class="text-black font-medium">{{ formatDuration(stats.avgDailyDuration) }}</div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useTitle } from "@vueuse/core";
import CourseList from "@/components/courses/CourseList.vue";

// 设置页面标题
useTitle("课程学习");

// 用户信息
const userInfo = ref({
    avatar: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
    name: "王鸿军",
    weeklyRank: 11,
    joinDays: 448,
    continuousDays: 1,
});

// 标签页状态
const activeTab = ref("record");
const courseType = ref("column");

// 课程列表数据
const columnCourses = ref([
    {
        id: 1,
        title: "考前赋能冥想",
        type: "video",
        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
        progress: 100,
        duration: 1200, // 20分钟
        studyTime: 1200,
    },
    {
        id: 2,
        title: "开学礼·让的智慧·心法老师·20241001（上）",
        type: "audio",
        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
        progress: 1,
        duration: 3600, // 1小时
        studyTime: 10,
    },
    {
        id: 1,
        title: "考前赋能冥想",
        type: "video",
        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
        progress: 100,
        duration: 1200, // 20分钟
        studyTime: 1200,
    },
    {
        id: 2,
        title: "开学礼·让的智慧·心法老师·20241001（上）",
        type: "video",
        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
        progress: 1,
        duration: 3600, // 1小时
        studyTime: 10,
    },
]);

const singleCourses = ref([
    {
        id: 3,
        title: "冬季课·影响孩子命运的家族六要素·心法老师20250207",
        type: "video",
        thumbnail: "https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg",
        progress: 1,
        duration: 3600,
        studyTime: 1,
    },
]);

// 学习统计数据
const stats = ref({
    totalDuration: 7200, // 2小时
    completedCourses: 1,
    studyDays: 30,
    avgDailyDuration: 1800, // 30分钟
});

// 格式化时长显示
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>
.study-page {
    min-height: 100vh;
    background-color: #fff;
}

.bg-primary {
    background-color: #4080ff;
}
</style>