<template>
    <view class="index-container" :class="{ 'landscape-mode': isLandscapeLayout }">
        <!-- 顶部header -->
        <view class="top-header">
            <view class="header-left">
                <text class="app-title">国语教育平台</text>
            </view>
            <view class="header-right">
                <view class="avatar-wrapper" @click="goToProfile">
                    <image 
                        v-if="userInfo.avatar" 
                        :src="userInfo.avatar" 
                        class="avatar"
                        mode="aspectFill"
                    />
                    <view v-else class="avatar-placeholder">
                        <text class="avatar-text">{{ (userInfo.realName || userInfo.username || 'U').charAt(0) }}</text>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="page-layout" :class="{ 'landscape': isLandscapeLayout }">
            <view class="page-main">
                <!-- 搜索栏 -->
                <view class="search-section">
                    <view class="search-box" @click="handleSearch">
                        <text class="search-icon">🔍</text>
                        <text class="search-placeholder">搜索课程...</text>
                    </view>
                </view>
                
                <!-- 课程Banner（学生端） -->
                <view class="banner-section" v-if="featuredCourse && isStudent">
                    <view class="banner-card" @click="goToCourseDetail(featuredCourse)">
                        <view class="banner-content">
                            <view class="banner-text">
                                <text class="banner-title">{{ featuredCourse.courseName }}</text>
                                <text class="banner-desc">{{ featuredCourse.description || '掌握核心技能' }}</text>
                                <view class="banner-btn">立即学习</view>
                            </view>
                            <view class="banner-image">
                                <text class="banner-icon">💻</text>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 快捷功能区域 -->
                <view class="quick-actions-section">
                    <view class="section-title">快捷功能</view>
                    <view class="quick-actions-grid">
                        <view class="action-item" @click="goToVoiceEvaluation">
                            <view class="action-icon-wrapper voice">
                                <text class="action-icon">🎤</text>
                            </view>
                            <text class="action-text">语音测评</text>
                        </view>
                        <view class="action-item" @click="goToExamList">
                            <view class="action-icon-wrapper exam">
                                <text class="action-icon">📝</text>
                            </view>
                            <text class="action-text">我的考核</text>
                        </view>
                        <view class="action-item" @click="goToScoreList">
                            <view class="action-icon-wrapper score">
                                <text class="action-icon">📊</text>
                            </view>
                            <text class="action-text">我的成绩</text>
                        </view>
                        <view class="action-item" @click="goToLearningRecord">
                            <view class="action-icon-wrapper record">
                                <text class="action-icon">📚</text>
                            </view>
                            <text class="action-text">学习记录</text>
                        </view>
                    </view>
                </view>
                
                <!-- 精选课程（学生端） -->
                <view class="course-section" v-if="isStudent">
                    <view class="section-header">
                        <text class="section-title">精选课程</text>
                        <text class="more-btn" @click="goToCourseList">查看全部 ></text>
                    </view>
                    
                    <view v-if="courseList.length === 0" class="empty-wrapper">
                        <text class="empty-text">暂无课程</text>
                    </view>
                    
                    <view v-else class="course-list" :class="{ 'landscape-grid': isLandscapeLayout }">
                        <view 
                            v-for="course in courseList" 
                            :key="course.id"
                            class="course-card"
                            @click="goToCourseDetail(course)"
                        >
                            <view class="course-thumbnail">
                                <text class="course-thumbnail-icon">💻</text>
                            </view>
                            <view class="course-info">
                                <text class="course-name">{{ course.courseName }}</text>
                                <view class="course-rating">
                                    <text class="rating-star">★</text>
                                    <text class="rating-value">{{ course.rating || 4.8 }}</text>
                                </view>
                                <view class="course-progress">
                                    <view class="progress-info">
                                        <text class="progress-label">学习时长：</text>
                                        <text class="progress-value">{{ formatLearningTime(course) }}</text>
                                    </view>
                                    <view class="progress-info" v-if="course.learningRecord">
                                        <text class="progress-label">学习次数：</text>
                                        <text class="progress-value">{{ course.learningRecord.learnCount || 0 }}次</text>
                                    </view>
                                </view>
                                <view class="course-action">
                                    <view class="continue-btn">继续学习</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
            <view class="page-side" v-if="isStudent">
                <view class="summary-panel">
                    <view class="summary-header">
                        <text class="summary-title">学习概览</text>
                        <text class="summary-tip">横屏体验优化</text>
                    </view>
                    <view class="summary-items">
                        <view class="summary-item">
                            <text class="item-value">{{ courseList.length }}</text>
                            <text class="item-label">课程数量</text>
                        </view>
                        <view class="summary-item">
                            <text class="item-value">{{ pendingExamCount }}</text>
                            <text class="item-label">待完成考核</text>
                        </view>
                    </view>
                </view>
                
                <!-- 我的考核（学生端） -->
                <view class="exam-section">
                    <view class="section-header">
                        <text class="section-title">我的考核</text>
                        <text class="more-btn" @click="goToExamList">查看全部 ></text>
                    </view>
                    
                    <view v-if="examList.length === 0" class="empty-wrapper">
                        <text class="empty-text">暂无考核</text>
                    </view>
                    
                    <view v-else class="exam-list">
                        <view 
                            v-for="exam in examList.slice(0, 3)" 
                            :key="exam.id"
                            class="exam-item"
                        >
                            <view class="exam-border" :class="getExamBorderClass(exam)"></view>
                            <view class="exam-content">
                                <view class="exam-header">
                                    <text class="exam-name">{{ exam.examName }}</text>
                                    <view class="exam-status-badge" :class="getStatusClass(exam)">
                                        <text class="status-text">{{ getStatusText(exam) }}</text>
                                    </view>
                                </view>
                                <view class="exam-info">
                                    <text class="exam-deadline">截止:{{ formatDate(exam.deadline || exam.endTime) }}</text>
                                    <view class="exam-time-info">
                                        <text class="clock-icon">🕒</text>
                                        <text class="time-text">{{ getRemainingTime(exam) }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request.js'
import { getMyCourses } from '@/api/study/course.js'
import { getMyRecords } from '@/api/study/learningRecord.js'
import { getMyExams } from '@/api/study/exam.js'
import { getMyScores } from '@/api/study/score.js'

export default {
    data() {
        return {
            courseList: [],
            loading: false,
            featuredCourse: null,
            examList: [],
            examLoading: false,
            isLandscapeLayout: false,
            resizeListener: null,
            hasLoadedCourses: false,
            hasLoadedExams: false
        }
    },
    computed: {
        ...mapGetters('auth', ['userInfo', 'userRole']),
        isStudent() {
            return this.userRole === 'student'
        },
        // 计算待完成的考试数量（排除已完成的）
        pendingExamCount() {
            if (!this.examList || this.examList.length === 0) return 0
            return this.examList.filter(exam => {
                // 已完成的考试不计入
                if (exam.isCompleted || exam.scoreId) return false
                // 已结束的考试不计入
                if (exam.status === '2') return false
                return true
            }).length
        }
    },
    onLoad() {
        this.loadCourseList(true)
        this.loadExamList(true)
        this.detectLandscape()
        this.bindResizeListener()
    },
    onShow() {
        // 每次显示时刷新课程列表和考试列表（首次加载后再后台刷新）
        if (this.hasLoadedCourses) {
            this.loadCourseList()
        }
        if (this.hasLoadedExams) {
            this.loadExamList()
        }
        // 通知底部导航栏更新
        uni.$emit('tabbar-update')
        this.detectLandscape()
        this.bindResizeListener()
    },
    onHide() {
        this.unbindResizeListener()
    },
    onUnload() {
        this.unbindResizeListener()
    },
    methods: {
        detectLandscape() {
            try {
                const info = uni.getSystemInfoSync()
                this.isLandscapeLayout = info.windowWidth > info.windowHeight
            } catch (error) {
                this.isLandscapeLayout = false
            }
        },
        bindResizeListener() {
            if (this.resizeListener) return
            this.resizeListener = (res) => {
                const { windowWidth, windowHeight } = res.size
                this.isLandscapeLayout = windowWidth > windowHeight
            }
            uni.onWindowResize(this.resizeListener)
        },
        unbindResizeListener() {
            if (this.resizeListener) {
                uni.offWindowResize(this.resizeListener)
                this.resizeListener = null
            }
        },
    async loadCourseList(showSkeleton = false) {
            // 只有学生端才加载课程列表
            if (!this.isStudent) {
                return
            }
        const shouldShowSkeleton = showSkeleton || !this.hasLoadedCourses
        if (shouldShowSkeleton) {
            this.loading = true
        }
            try {
                // 获取课程列表（只取前6个用于首页展示）
                const response = await getMyCourses()
                console.log('课程列表响应:', response)
                
                if (response.code === 200) {
                    const courses = response.data || []
                    console.log('课程数据:', courses)
                    
                    // 获取学习记录
                    const learningRecordsResponse = await getMyRecords()
                    const learningRecords = learningRecordsResponse.code === 200 ? (learningRecordsResponse.data || []) : []
                    console.log('学习记录:', learningRecords)
                    
                    // 将学习记录关联到课程，并只取前6个
                    const coursesWithRecords = courses.slice(0, 6).map(course => {
                        const record = learningRecords.find(r => r.courseId === course.id)
                        return {
                            ...course,
                            learningRecord: record || null,
                            progress: record ? record.progress : 0
                        }
                    })
                    
                    console.log('处理后的课程列表:', coursesWithRecords)
                    this.courseList = coursesWithRecords
                    
                    // 设置特色课程（第一个课程作为banner）
                    if (coursesWithRecords.length > 0) {
                        this.featuredCourse = coursesWithRecords[0]
                    } else {
                        this.featuredCourse = null
                    }
                } else {
                    console.error('课程列表接口返回错误:', response)
                    uni.showToast({
                        title: response.msg || '加载课程失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('加载课程列表失败:', error)
                uni.showToast({
                    title: error.message || '加载失败',
                    icon: 'none'
                })
        } finally {
            if (shouldShowSkeleton) {
                this.loading = false
            }
            this.hasLoadedCourses = true
            }
        },
        
    async loadExamList(showSkeleton = false) {
            // 只有学生端才加载考试列表
            if (!this.isStudent) {
                return
            }
        const shouldShowSkeleton = showSkeleton || !this.hasLoadedExams
        if (shouldShowSkeleton) {
            this.examLoading = true
        }
            try {
                // 并行加载考试列表和成绩列表
                const [examResponse, scoreResponse] = await Promise.all([
                    getMyExams(),
                    getMyScores().catch(() => ({ code: 200, data: [] })) // 如果成绩接口失败，返回空数组
                ])
                
                if (examResponse.code === 200) {
                    let examList = examResponse.data || []
                    const scoreList = (scoreResponse.code === 200 && scoreResponse.data) ? scoreResponse.data : []
                    
                    // 创建已完成考试的examId集合
                    const completedExamIds = new Set(scoreList.map(score => score.examId))
                    
                    // 标记已完成的考试
                    examList = examList.map(exam => {
                        if (completedExamIds.has(exam.id)) {
                            return { ...exam, isCompleted: true, scoreId: scoreList.find(s => s.examId === exam.id)?.id }
                        }
                        return exam
                    })
                    
                    this.examList = examList
                } else {
                    uni.showToast({
                        title: examResponse.msg || '加载失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('加载考试列表失败:', error)
                uni.showToast({
                    title: error.message || '加载失败',
                    icon: 'none'
                })
        } finally {
            if (shouldShowSkeleton) {
                this.examLoading = false
            }
            this.hasLoadedExams = true
            }
        },
        
        // 获取考试状态（考虑结束时间）
        getExamStatus(exam) {
            // 优先检查用户是否已完成考试
            if (exam.scoreId || exam.isCompleted || exam.hasCompleted || exam.completed || exam.isFinished) {
                return 'completed' // 已完成
            }
            
            if (!exam.status || exam.status === '0') {
                return 'pending' // 未开始
            }
            if (exam.status === '2') {
                return 'ended' // 已结束
            }
            // status === '1' 已发布，需要检查实际时间
            const now = new Date()
            if (exam.startTime && new Date(exam.startTime) > now) {
                return 'pending' // 未开始
            }
            // 检查结束时间（支持 deadline 和 endTime 两种字段名）
            const endTime = exam.endTime || exam.deadline
            if (endTime && new Date(endTime) < now) {
                return 'ended' // 已结束
            }
            return 'active' // 进行中
        },
        
        getStatusText(exam) {
            const status = this.getExamStatus(exam)
            const statusMap = {
                'pending': '未开始',
                'active': '进行中',
                'ended': '已结束',
                'completed': '已完成'
            }
            return statusMap[status] || '未知'
        },
        
        getStatusClass(exam) {
            const status = this.getExamStatus(exam)
            const classMap = {
                'pending': 'status-pending',
                'active': 'status-progress',
                'ended': 'status-completed',
                'completed': 'status-completed'
            }
            return classMap[status] || ''
        },
        
        getExamBorderClass(exam) {
            const status = this.getExamStatus(exam)
            if (status === 'pending') {
                return 'border-blue'
            }
            if (status === 'active') {
                const days = this.getRemainingDays(exam)
                if (days <= 1) {
                    return 'border-orange'
                }
                return 'border-purple'
            }
            if (status === 'ended') {
                return 'border-green'
            }
            return 'border-blue'
        },
        
        getRemainingTime(exam) {
            if (!exam.deadline && !exam.endTime) {
                return '暂无截止时间'
            }
            const deadline = exam.deadline || exam.endTime
            const now = new Date()
            const endTime = new Date(deadline)
            const diff = endTime - now
            const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
            
            if (days < 0) {
                return '已过期'
            }
            if (days === 0) {
                return '今天截止'
            }
            if (days === 1) {
                return '剩余1天'
            }
            return `剩余${days}天`
        },
        
        getRemainingDays(exam) {
            if (!exam.deadline && !exam.endTime) {
                return 999
            }
            const deadline = exam.deadline || exam.endTime
            const now = new Date()
            const endTime = new Date(deadline)
            const diff = endTime - now
            return Math.ceil(diff / (1000 * 60 * 60 * 24))
        },
        
        formatDate(dateStr) {
            if (!dateStr) return ''
            const date = new Date(dateStr)
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        
        goToExamDetail(exam) {
            uni.navigateTo({
                url: `/pages/exam/detail?id=${exam.id}`
            })
        },
        
        handleSearch() {
            // 跳转到搜索页面
            uni.navigateTo({
                url: '/pages/search/index'
            })
        },
        
        goToProfile() {
            uni.switchTab({
                url: '/pages/profile/profile'
            })
        },
        
        goToCourseList() {
            uni.switchTab({
                url: '/pages/course/list'
            })
        },
        
        goToCourseDetail(course) {
            uni.navigateTo({
                url: `/pages/course/detail?id=${course.id}`
            })
        },
        
        goToExamList() {
            uni.navigateTo({
                url: '/pages/exam/list'
            })
        },
        
        goToScoreList() {
            uni.navigateTo({
                url: '/pages/score/list'
            })
        },
        
        goToVoiceEvaluation() {
            uni.navigateTo({
                url: '/pages/speech/speech'
            })
        },
        
        goToLearningRecord() {
            uni.navigateTo({
                url: '/pages/learning/record'
            })
        },
        
        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}分钟`
        },
        
        // 获取课程学习进度
        getCourseProgress(course) {
            if (course.learningRecord && course.learningRecord.progress != null) {
                // 确保返回整数
                return Math.round(course.learningRecord.progress)
            }
            return 0
        },
        
        // 格式化学习时长
        formatLearningTime(course) {
            if (!course.learningRecord || !course.learningRecord.totalDuration) {
                return '未开始'
            }
            const seconds = course.learningRecord.totalDuration
            const hours = Math.floor(seconds / 3600)
            const minutes = Math.floor((seconds % 3600) / 60)
            
            if (hours > 0) {
                return `${hours}小时${minutes}分钟`
            } else if (minutes > 0) {
                return `${minutes}分钟`
            } else {
                return `${seconds}秒`
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.index-container {
    width: 100%;
    padding: 0;
    background-color: #f5f7fa;
    min-height: 100vh;
    padding-bottom: 120rpx; // 为底部导航栏留出空间
    box-sizing: border-box;
    
    @media (min-width: 768px) {
        padding-bottom: 140rpx;
    }
}

.page-layout {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    padding: 20rpx 30rpx 40rpx;
    
    @media (min-width: 768px) {
        padding: 24rpx 40rpx 60rpx;
    }
    
    &.landscape {
        flex-direction: row;
        align-items: flex-start;
        gap: 32rpx;
        padding: 24rpx 40rpx 60rpx;
    }
}

.page-main {
    flex: 1;
    min-width: 0;
    
    .course-section,
    .quick-actions-section,
    .banner-section {
        margin-bottom: 24rpx;
    }
}

.page-side {
    width: 420rpx;
    max-width: 40vw;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    
    @media (max-width: 1024px) {
        width: 360rpx;
    }
    
    @media (orientation: portrait) {
        width: 100%;
        max-width: 100%;
        flex-direction: row;
        gap: 20rpx;
        flex-wrap: wrap;
    }
}

.summary-panel {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
    
    .summary-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;
        
        .summary-title {
            font-size: 30rpx;
            font-weight: 600;
            color: #1a1a1a;
        }
        
        .summary-tip {
            font-size: 22rpx;
            color: #8794a1;
        }
    }
    
    .summary-items {
        display: flex;
        justify-content: space-between;
        gap: 16rpx;
        
        .summary-item {
            flex: 1;
            background: #f7f9fc;
            border-radius: 20rpx;
            padding: 20rpx;
            text-align: center;
            
            .item-value {
                display: block;
                font-size: 40rpx;
                font-weight: bold;
                color: rgb(55 140 224);
                margin-bottom: 8rpx;
            }
            
            .item-label {
                font-size: 24rpx;
                color: #8794a1;
            }
        }
    }
}

// 顶部header
.top-header {
    background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    padding-top: calc(var(--status-bar-height) + 20rpx);
    
    @media (min-width: 768px) {
        padding: 20rpx 40rpx;
        padding-top: calc(var(--status-bar-height) + 20rpx);
    }
    
    .header-left {
        flex: 1;
        
        .app-title {
            font-size: 36rpx;
            font-weight: bold;
            color: #fff;
            
            @media (min-width: 768px) {
                font-size: 32rpx;
            }
        }
    }
    
    .header-right {
        display: flex;
        align-items: center;
        
        .avatar-wrapper {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            
            @media (min-width: 768px) {
                width: 56rpx;
                height: 56rpx;
            }
            
            .avatar {
                width: 100%;
                height: 100%;
            }
            
            .avatar-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.3);
                
                .avatar-text {
                    font-size: 28rpx;
                    color: #fff;
                    font-weight: bold;
                    
                    @media (min-width: 768px) {
                        font-size: 24rpx;
                    }
                }
            }
        }
    }
}

// 搜索栏
.search-section {
    padding: 20rpx 30rpx;
    
    @media (min-width: 768px) {
        padding: 24rpx 40rpx;
    }
    
    .search-box {
        background: #fff;
        border-radius: 50rpx;
        padding: 20rpx 30rpx;
        display: flex;
        align-items: center;
        gap: 16rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
        
        @media (min-width: 768px) {
            padding: 20rpx 30rpx;
            border-radius: 50rpx;
        }
        
        .search-icon {
            font-size: 36rpx;
            line-height: 1;
        }
        
        .search-placeholder {
            font-size: 28rpx;
            color: #999;
            
            @media (min-width: 768px) {
                font-size: 28rpx;
            }
        }
    }
}

// 分类标签
.category-section {
    padding: 0 30rpx 20rpx;
    
    @media (min-width: 768px) {
        padding: 0 60rpx 30rpx;
    }
    
    .category-scroll {
        white-space: nowrap;
        
        .category-list {
            display: inline-flex;
            gap: 20rpx;
            
            @media (min-width: 768px) {
                gap: 30rpx;
            }
            
            .category-item {
                padding: 12rpx 32rpx;
                border-radius: 50rpx;
                background: #fff;
                white-space: nowrap;
                transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
                
                @media (min-width: 768px) {
                    padding: 16rpx 40rpx;
                }
                
                .category-text {
                    font-size: 26rpx;
                    color: #666;
                    
                    @media (min-width: 768px) {
                        font-size: 30rpx;
                    }
                }
                
                &.active {
                    background: rgb(55 140 224);
                    
                    .category-text {
                        color: #fff;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}

// 课程Banner
.banner-section {
    padding: 0 0 30rpx;
    
    @media (min-width: 768px) {
        padding: 0 0 30rpx;
    }
    
    .banner-card {
        background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
        border-radius: 24rpx;
        padding: 40rpx;
        overflow: hidden;
        position: relative;
        
        @media (min-width: 768px) {
            border-radius: 20rpx;
            padding: 30rpx;
        }
        
        .banner-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .banner-text {
                flex: 1;
                z-index: 2;
                
                .banner-title {
                    display: block;
                    font-size: 40rpx;
                    font-weight: bold;
                    color: #fff;
                    margin-bottom: 16rpx;
                    
                    @media (min-width: 768px) {
                        font-size: 38rpx;
                        margin-bottom: 12rpx;
                    }
                }
                
                .banner-desc {
                    display: block;
                    font-size: 26rpx;
                    color: rgba(255, 255, 255, 0.9);
                    margin-bottom: 30rpx;
                    
                    @media (min-width: 768px) {
                        font-size: 26rpx;
                        margin-bottom: 24rpx;
                    }
                }
                
                .banner-btn {
                    display: inline-block;
                    background: rgba(255, 255, 255, 0.25);
                    backdrop-filter: blur(10rpx);
                    padding: 16rpx 40rpx;
                    border-radius: 50rpx;
                    font-size: 28rpx;
                    color: #fff;
                    font-weight: 500;
                    
                    @media (min-width: 768px) {
                        padding: 16rpx 40rpx;
                        font-size: 28rpx;
                    }
                }
            }
            
            .banner-image {
                width: 200rpx;
                height: 200rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                
                @media (min-width: 768px) {
                    width: 180rpx;
                    height: 180rpx;
                }
                
                .banner-icon {
                    font-size: 120rpx;
                    opacity: 0.3;
                    
                    @media (min-width: 768px) {
                        font-size: 120rpx;
                    }
                }
            }
        }
    }
}

// 快捷功能区域
.quick-actions-section {
    background: #fff;
    margin: -30rpx 0 30rpx;
    border-radius: 24rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    @media (min-width: 768px) {
        margin: -20rpx 0 20rpx;
        padding: 30rpx;
        border-radius: 20rpx;
    }
    
    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #1a1a1a;
        margin-bottom: 24rpx;
        
        @media (min-width: 768px) {
            font-size: 30rpx;
            margin-bottom: 20rpx;
        }
    }
    
    .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24rpx;
        
        @media (min-width: 768px) {
            grid-template-columns: repeat(4, 1fr);
            gap: 24rpx;
        }
        
        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .action-icon-wrapper {
                width: 88rpx;
                height: 88rpx;
                border-radius: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 12rpx;
                
                @media (min-width: 768px) {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 24rpx;
                    margin-bottom: 12rpx;
                }
                
                &.exam {
                    background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
                }
                
                &.score {
                    background: linear-gradient(135deg, rgb(70 130 220) 0%, rgb(55 140 224) 100%);
                }
                
                &.voice {
                    background: linear-gradient(135deg, rgb(100 150 230) 0%, rgb(70 130 220) 100%);
                }
                
                &.record {
                    background: linear-gradient(135deg, rgb(80 160 240) 0%, rgb(55 140 224) 100%);
                }
                
                .action-icon {
                    font-size: 44rpx;
                    
                    @media (min-width: 768px) {
                        font-size: 50rpx;
                    }
                }
            }
            
            .action-text {
                font-size: 24rpx;
                color: #666;
                
                @media (min-width: 768px) {
                    font-size: 24rpx;
                }
            }
        }
    }
}

// 我的课程区域
.course-section {
    margin: 0;
    
    @media (min-width: 768px) {
        margin: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;
        
        @media (min-width: 768px) {
            margin-bottom: 20rpx;
        }
        
        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #1a1a1a;
            
            @media (min-width: 768px) {
                font-size: 30rpx;
            }
        }
        
        .more-btn {
            font-size: 26rpx;
            color: rgb(55 140 224);
            
            @media (min-width: 768px) {
                font-size: 26rpx;
            }
        }
    }
    
    .empty-wrapper {
        text-align: center;
        padding: 60rpx 0;
        
        @media (min-width: 768px) {
            padding: 100rpx 0;
        }
        
        .loading-text,
        .empty-text {
            font-size: 28rpx;
            color: #999;
            
            @media (min-width: 768px) {
                font-size: 32rpx;
            }
        }
    }
    
    .course-list {
        display: flex;
        flex-direction: column;
        gap: 24rpx;
        
        &.landscape-grid {
            display: grid;
            /* 横屏模式下，课程卡片改为单列排列，避免多列挤压内容 */
            grid-template-columns: 1fr;
            gap: 24rpx;
        }
        
        @media (min-width: 768px) {
            gap: 20rpx;
        }
        
        .course-card {
            background: #fff;
            border-radius: 20rpx;
            padding: 24rpx;
            display: flex;
            gap: 24rpx;
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
            
            @media (min-width: 768px) {
                border-radius: 18rpx;
                padding: 24rpx;
                gap: 24rpx;
                max-width: 100%;
            }
            
            .course-thumbnail {
                width: 200rpx;
                height: 150rpx;
                background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
                border-radius: 16rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                
                @media (min-width: 768px) {
                    width: 200rpx;
                    height: 150rpx;
                    border-radius: 16rpx;
                }
                
                .course-thumbnail-icon {
                    font-size: 80rpx;
                    
                    @media (min-width: 768px) {
                        font-size: 100rpx;
                    }
                }
            }
            
            .course-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .course-name {
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #1a1a1a;
                    margin-bottom: 12rpx;
                    
                    @media (min-width: 768px) {
                        font-size: 36rpx;
                        margin-bottom: 16rpx;
                    }
                }
                
                .course-rating {
                    display: flex;
                    align-items: center;
                    gap: 8rpx;
                    margin-bottom: 12rpx;
                    
                    @media (min-width: 768px) {
                        margin-bottom: 16rpx;
                    }
                    
                    .rating-star {
                        font-size: 24rpx;
                        color: #ffa500;
                        
                        @media (min-width: 768px) {
                            font-size: 28rpx;
                        }
                    }
                    
                    .rating-value {
                        font-size: 24rpx;
                        color: #666;
                        
                        @media (min-width: 768px) {
                            font-size: 28rpx;
                        }
                    }
                }
                
                .course-progress {
                    display: flex;
                    flex-direction: column;
                    gap: 8rpx;
                    margin-bottom: 16rpx;
                    
                    @media (min-width: 768px) {
                        margin-bottom: 14rpx;
                    }
                    
                    .progress-info {
                        display: flex;
                        align-items: center;
                        
                        .progress-label {
                            font-size: 22rpx;
                            color: #999;
                            
                            @media (min-width: 768px) {
                                font-size: 24rpx;
                            }
                        }
                        
                        .progress-value {
                            font-size: 22rpx;
                            color: #333;
                            font-weight: 500;
                            
                            @media (min-width: 768px) {
                                font-size: 24rpx;
                            }
                        }
                    }
                }
                
                .course-action {
                    .continue-btn {
                        display: inline-block;
                        background: rgb(55 140 224);
                        color: #fff;
                        padding: 12rpx 32rpx;
                        border-radius: 50rpx;
                        font-size: 24rpx;
                        font-weight: 500;
                        
                        @media (min-width: 768px) {
                            padding: 12rpx 32rpx;
                            font-size: 26rpx;
                        }
                    }
                }
            }
        }
    }
}

// 我的考核区域
.exam-section {
    margin: 0;
    margin-top: 30rpx;
    
    @media (min-width: 768px) {
        margin: 20rpx 0 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;
        
        @media (min-width: 768px) {
            margin-bottom: 20rpx;
        }
        
        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #1a1a1a;
            
            @media (min-width: 768px) {
                font-size: 30rpx;
            }
        }
        
        .more-btn {
            font-size: 26rpx;
            color: rgb(55 140 224);
            
            @media (min-width: 768px) {
                font-size: 26rpx;
            }
        }
    }
    
    .empty-wrapper {
        text-align: center;
        padding: 60rpx 0;
        
        @media (min-width: 768px) {
            padding: 100rpx 0;
        }
        
        .loading-text,
        .empty-text {
            font-size: 28rpx;
            color: #999;
            
            @media (min-width: 768px) {
                font-size: 32rpx;
            }
        }
    }
    
    .exam-list {
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        
        @media (min-width: 768px) {
            gap: 24rpx;
        }
        
        .exam-item {
            background: #fff;
            border-radius: 20rpx;
            padding: 24rpx;
            display: flex;
            position: relative;
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
            overflow: hidden;
            
            @media (min-width: 768px) {
                border-radius: 18rpx;
                padding: 24rpx;
            }
            
            .exam-border {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 6rpx;
                
                @media (min-width: 768px) {
                    width: 8rpx;
                }
                
                &.border-blue {
                    background: rgb(55 140 224);
                }
                
                &.border-purple {
                    background: rgb(70 130 220);
                }
                
                &.border-orange {
                    background: rgb(60 150 240);
                }
                
                &.border-green {
                    background: rgb(55 140 224);
                }
            }
            
            .exam-content {
                flex: 1;
                margin-left: 20rpx;
                
                @media (min-width: 768px) {
                    margin-left: 24rpx;
                }
                
                .exam-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 16rpx;
                    
                    @media (min-width: 768px) {
                        margin-bottom: 20rpx;
                    }
                    
                    .exam-name {
                        font-size: 30rpx;
                        font-weight: bold;
                        color: #1a1a1a;
                        flex: 1;
                        
                        @media (min-width: 768px) {
                            font-size: 30rpx;
                        }
                    }
                    
                    .exam-status-badge {
                        padding: 8rpx 20rpx;
                        border-radius: 50rpx;
                        font-size: 22rpx;
                        
                        @media (min-width: 768px) {
                            padding: 8rpx 20rpx;
                            font-size: 22rpx;
                        }
                        
                        .status-text {
                            font-size: 22rpx;
                            font-weight: 500;
                            
                            @media (min-width: 768px) {
                                font-size: 22rpx;
                            }
                        }
                        
                        &.status-pending {
                            background: rgba(55, 140, 224, 0.1);
                            
                            .status-text {
                                color: rgb(55 140 224);
                            }
                        }
                        
                        &.status-progress {
                            background: rgba(70, 130, 220, 0.1);
                            
                            .status-text {
                                color: rgb(70 130 220);
                            }
                        }
                        
                        &.status-completed {
                            background: rgba(55, 140, 224, 0.1);
                            
                            .status-text {
                                color: rgb(55 140 224);
                            }
                        }
                    }
                }
                
                .exam-info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    
                    .exam-deadline {
                        font-size: 24rpx;
                        color: #666;
                        
                        @media (min-width: 768px) {
                            font-size: 24rpx;
                        }
                    }
                    
                    .exam-time-info {
                        display: flex;
                        align-items: center;
                        gap: 8rpx;
                        
                        .clock-icon {
                            font-size: 28rpx;
                            line-height: 1;
                        }
                        
                        .time-text {
                            font-size: 24rpx;
                            color: #999;
                            
                            @media (min-width: 768px) {
                                font-size: 24rpx;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>

