<template>
    <view class="learning-record-container">
        <!-- 顶部导航栏 -->
        <custom-navbar title="学习记录"></custom-navbar>
        
        <view class="stats-section">
            <view class="stat-card">
                <text class="stat-value">{{ totalDurationText }}</text>
                <text class="stat-label">总学习时长</text>
            </view>
            <view class="stat-card">
                <text class="stat-value">{{ totalCount }}</text>
                <text class="stat-label">学习次数</text>
            </view>
            <view class="stat-card">
                <text class="stat-value">{{ completedCourses }}</text>
                <text class="stat-label">已完成课程</text>
            </view>
        </view>
        
        <view class="record-list-section">
            <view class="section-title">
                <text class="title-text">学习记录</text>
            </view>
            
            <u-empty v-if="recordList.length === 0 && !loading" mode="data" text="暂无学习记录"></u-empty>
            
            <view v-else class="record-list">
                <view 
                    v-for="record in recordList" 
                    :key="record.id"
                    class="record-item"
                    @click="viewRecordDetail(record)"
                >
                    <view class="record-header">
                        <text class="course-name">{{ record.courseName || '未知课程' }}</text>
                        <text class="progress-badge" :class="getProgressClass(record.progress)">
                            {{ record.progress || 0 }}%
                        </text>
                    </view>
                    
                    <view class="record-info">
                        <text class="info-item">
                            <text class="info-label">学习时长：</text>
                            <text class="info-value">{{ formatDuration(record.totalDuration) }}</text>
                        </text>
                        <text class="info-item">
                            <text class="info-label">学习次数：</text>
                            <text class="info-value">{{ record.learnCount || 0 }}次</text>
                        </text>
                    </view>
                    
                    <view class="progress-bar">
                        <view class="progress-fill" :style="{ width: (record.progress || 0) + '%' }"></view>
                    </view>
                    
                    <view class="record-footer">
                        <text class="last-time" v-if="record.lastLearnTime">
                            最后学习：{{ formatTime(record.lastLearnTime) }}
                        </text>
                    </view>
                </view>
            </view>
            
        </view>
    </view>
</template>

<script>
import { getMyRecords } from '@/api/study/learningRecord.js'
import { getMyCourses } from '@/api/study/course.js'
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'

export default {
    components: {
        CustomNavbar
    },
    data() {
        return {
            recordList: [],
            loading: false,
            totalDuration: 0,
            totalCount: 0,
            completedCourses: 0
        }
    },
    computed: {
        totalDurationText() {
            return this.formatDuration(this.totalDuration)
        }
    },
    onLoad() {
        this.loadLearningRecords()
    },
    onShow() {
        // 每次显示时刷新
        this.loadLearningRecords()
    },
    methods: {
        async loadLearningRecords() {
            this.loading = true
            try {
                // 获取学习记录
                const response = await getMyRecords()
                if (response.code === 200) {
                    const records = response.data || []
                    
                    // 获取课程信息并关联
                    const coursesResponse = await getMyCourses()
                    const courses = coursesResponse.code === 200 ? (coursesResponse.data || []) : []
                    
                    // 关联课程信息
                    this.recordList = records.map(record => {
                        const course = courses.find(c => c.id === record.courseId)
                        console.log('[学习记录] 课程:', course ? course.courseName : '未知', '后端进度:', record.progress + '%')
                        return {
                            ...record,
                            courseName: course ? course.courseName : '未知课程'
                        }
                    })
                    
                    console.log('[学习记录] ✅ 使用后端返回的进度值（已修复2025-12-05）')
                    
                    // 计算统计信息
                    this.calculateStats()
                }
            } catch (error) {
                uni.showToast({
                    title: error.message || '加载失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },
        
        calculateStats() {
            // 总学习时长
            this.totalDuration = this.recordList.reduce((sum, record) => {
                return sum + (record.totalDuration || 0)
            }, 0)
            
            // 总学习次数
            this.totalCount = this.recordList.reduce((sum, record) => {
                return sum + (record.learnCount || 0)
            }, 0)
            
            // 已完成课程数（进度>=100%）
            this.completedCourses = this.recordList.filter(record => {
                return (record.progress || 0) >= 100
            }).length
        },
        
        viewRecordDetail(record) {
            // 跳转到课程详情页
            uni.navigateTo({
                url: `/pages/course/detail?id=${record.courseId}`
            })
        },
        
        getProgressClass(progress) {
            const p = progress || 0
            if (p >= 100) {
                return 'progress-completed'
            } else if (p >= 50) {
                return 'progress-good'
            } else if (p > 0) {
                return 'progress-start'
            }
            return 'progress-none'
        },
        
        formatDuration(seconds) {
            if (!seconds) return '0分钟'
            const hours = Math.floor(seconds / 3600)
            const minutes = Math.floor((seconds % 3600) / 60)
            if (hours > 0) {
                return `${hours}小时${minutes}分钟`
            }
            return `${minutes}分钟`
        },
        
        formatTime(timeStr) {
            if (!timeStr) return ''
            const date = new Date(timeStr)
            const now = new Date()
            const diff = now - date
            
            // 今天
            if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
                return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
            }
            
            // 昨天
            if (diff < 48 * 60 * 60 * 1000) {
                return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
            }
            
            // 更早
            return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + 
                   ' ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
        }
    }
}
</script>

<style lang="scss" scoped>
.learning-record-container {
    padding: 30rpx;
    /* 预留足够空间给顶部固定导航栏，避免横屏时统计卡片被遮挡 */
    padding-top: calc(30rpx + 120rpx + env(safe-area-inset-top));
    background-color: #f5f7fa;
    min-height: 100vh;
    
    @media (min-width: 768px) {
        padding: 60rpx;
        /* 大屏横屏时再多预留一些高度 */
        padding-top: calc(60rpx + 140rpx + env(safe-area-inset-top));
    }
}

.stats-section {
    display: flex;
    gap: 20rpx;
    margin-bottom: 40rpx;
    
    @media (min-width: 768px) {
        gap: 30rpx;
        margin-bottom: 60rpx;
    }
    
    .stat-card {
        flex: 1;
        background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
        border-radius: 20rpx;
        padding: 36rpx 24rpx;
        text-align: center;
        box-shadow: 0 4rpx 16rpx rgba(55, 140, 224, 0.2);
        
        @media (min-width: 768px) {
            padding: 48rpx 32rpx;
            border-radius: 24rpx;
        }
        
        &:nth-child(2) {
            background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
            box-shadow: 0 4rpx 16rpx rgba(82, 196, 26, 0.2);
        }
        
        &:nth-child(3) {
            background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
            box-shadow: 0 4rpx 16rpx rgba(250, 140, 22, 0.2);
        }
        
        .stat-value {
            display: block;
            font-size: 40rpx;
            font-weight: bold;
            color: #fff;
            margin-bottom: 12rpx;
            
            @media (min-width: 768px) {
                font-size: 48rpx;
                margin-bottom: 16rpx;
            }
        }
        
        .stat-label {
            display: block;
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.9);
            
            @media (min-width: 768px) {
                font-size: 30rpx;
            }
        }
    }
}

.record-list-section {
    .section-title {
        margin-bottom: 24rpx;
        padding: 0 10rpx;
        
        .title-text {
            font-size: 34rpx;
            font-weight: bold;
            color: #1a1a1a;
        }
    }
    
    .record-list {
        @media (min-width: 768px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30rpx;
        }
        
        .record-item {
            background: #fff;
            border-radius: 20rpx;
            padding: 36rpx;
            margin-bottom: 24rpx;
            box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
            transition: transform 0.2s, box-shadow 0.2s;
            
            @media (min-width: 768px) {
                padding: 48rpx;
                margin-bottom: 0;
                border-radius: 24rpx;
            }
            
            &:active {
                transform: scale(0.98);
                box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
            }
            
            .record-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 24rpx;
                
                .course-name {
                    font-size: 34rpx;
                    font-weight: bold;
                    color: #1a1a1a;
                    flex: 1;
                    line-height: 1.4;
                }
                
                .progress-badge {
                    font-size: 22rpx;
                    padding: 6rpx 16rpx;
                    border-radius: 20rpx;
                    font-weight: 500;
                    margin-left: 16rpx;
                    flex-shrink: 0;
                    
                    &.progress-completed {
                        background: #e6f7ff;
                        color: rgb(55 140 224);
                    }
                    
                    &.progress-good {
                        background: #e6f7ff;
                        color: rgb(55 140 224);
                    }
                    
                    &.progress-start {
                        background: #fff7e6;
                        color: #fa8c16;
                    }
                    
                    &.progress-none {
                        background: #f5f5f5;
                        color: #999;
                    }
                }
            }
            
            .record-info {
                display: flex;
                gap: 40rpx;
                margin-bottom: 24rpx;
                
                .info-item {
                    font-size: 28rpx;
                    
                    .info-label {
                        color: #999;
                        margin-right: 8rpx;
                    }
                    
                    .info-value {
                        color: #1a1a1a;
                        font-weight: 500;
                    }
                }
            }
            
            .progress-bar {
                height: 10rpx;
                background: #f0f0f0;
                border-radius: 5rpx;
                overflow: hidden;
                margin-bottom: 20rpx;
                
                .progress-fill {
                    height: 100%;
                    background: linear-gradient(90deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
                    transition: width 0.3s;
                    border-radius: 5rpx;
                }
            }
            
            .record-footer {
                .last-time {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
    }
}
</style>

