<template>
    <view class="course-list-container">
        <!-- 顶部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="filter-section">
            <view class="filter-row">
                <picker 
                    :key="`subject-picker-${subjectPickerKey}`"
                    mode="selector" 
                    :range="subjectPickerOptions" 
                    range-key="label"
                    :value="selectedSubjectIndex"
                    @change="onSubjectChange"
                >
                    <view class="filter-item">
                        <text class="filter-label">学科</text>
                        <text class="filter-value">{{ selectedSubjectName || '全部' }}</text>
                        <text class="filter-icon">▼</text>
                    </view>
                </picker>
                <picker 
                    mode="selector" 
                    :range="courseUnitPickerOptions" 
                    range-key="label"
                    :value="selectedCourseUnitIndex"
                    @change="onCourseUnitChange"
                >
                    <view class="filter-item">
                        <text class="filter-label">课程单元</text>
                        <text class="filter-value">{{ selectedCourseUnitName || '全部' }}</text>
                        <text class="filter-icon">▼</text>
                    </view>
                </picker>
            </view>
        </view>
        
        <!-- 日历/日程部分 -->
        <view class="calendar-section">
            <view class="week-days">
                <view 
                    v-for="(day, index) in weekDays" 
                    :key="index"
                    class="day-item"
                    :class="{ today: day.isToday }"
                >
                    <text class="day-name">{{ day.name }}</text>
                    <view class="day-date" :class="{ 'date-today': day.isToday }">
                        <text v-if="!day.isToday" class="date-text">{{ day.date }}</text>
                        <text v-else class="today-text">今</text>
                    </view>
                </view>
            </view>
            <view class="calendar-info">
                <view class="today-course-count">
                    <text class="count-label">今日共</text>
                    <text class="count-number">{{ todayCourseCount }}</text>
                    <text class="count-label">节课</text>
                </view>
                <text class="calendar-link" @click="toggleCalendar">
                    {{ showCalendar ? '收起日历' : '展开日历' }} 
                    <text class="calendar-arrow" :class="{ 'arrow-up': showCalendar }">›</text>
                </text>
            </view>
            
            <!-- 展开的日历 -->
            <view class="calendar-expanded" :class="{ 'expanded': showCalendar }">
                <view class="calendar-wrapper" v-if="showCalendar">
                    <u-calendar 
                        :key="calendarKey"
                        :show="true"
                        mode="date"
                        :formatter="calendarFormatter"
                        pageInline
                        :showConfirm="false"
                        :closeOnClickOverlay="false"
                    ></u-calendar>
                </view>
                
                <!-- 课程时间列表 -->
                <view class="course-time-list" v-if="showCalendar && courseTimeList.length > 0">
                    <view class="time-list-title">课程时间安排</view>
                    <view 
                        v-for="(item, index) in courseTimeList" 
                        :key="index"
                        class="time-item"
                    >
                        <view class="time-item-header">
                            <text class="time-course-name">{{ item.courseName }}</text>
                            <text class="time-status" :class="'status-' + item.status">{{ getStatusTextByStatus(item.status) }}</text>
                        </view>
                        <view class="time-item-info" v-if="item.startTime">
                            <text class="time-label">开始时间：</text>
                            <text class="time-value">{{ formatDateTime(item.startTime) }}</text>
                        </view>
                        <view class="time-item-info" v-if="item.endTime">
                            <text class="time-label">结束时间：</text>
                            <text class="time-value">{{ formatDateTime(item.endTime) }}</text>
                        </view>
                        <view class="time-item-info" v-if="!item.startTime && !item.endTime">
                            <text class="time-label">时间安排：</text>
                            <text class="time-value">进行中（无具体时间）</text>
                        </view>
                    </view>
                </view>
                <view v-else-if="showCalendar" class="no-course-time">
                    <text class="no-time-text">暂无课程时间安排</text>
                </view>
            </view>
        </view>
        
        <!-- 课程列表 -->
        <view v-if="filteredCourseList.length === 0" class="empty-wrapper">
            <view class="empty-illustration">
                <text class="empty-icon">💻</text>
            </view>
            <text class="empty-text">暂无课程</text>
        </view>
        
        <view v-else class="course-list">
            <view 
                v-for="course in filteredCourseList" 
                :key="course.id"
                class="course-item"
                @click="goToCourseDetail(course)"
            >
                <view class="course-header">
                    <view class="course-title-wrapper">
                        <text class="course-name">{{ course.courseName }}</text>
                        <text class="course-subject" v-if="course.subjectName">{{ course.subjectName }}</text>
                    </view>
                    <text class="course-status" :class="getStatusClass(course)">{{ getStatusText(course) }}</text>
                </view>
                <text class="course-desc">{{ course.description || '暂无描述' }}</text>
                
                <!-- 学习进度信息 -->
                <view class="course-progress" v-if="course.learningRecord">
                    <view class="progress-bar">
                        <view class="progress-fill" :style="{ width: (course.learningRecord.progress || 0) + '%' }"></view>
                    </view>
                    <view class="progress-info">
                        <text class="progress-text">学习进度：{{ course.learningRecord.progress || 0 }}%</text>
                        <text class="progress-time" v-if="course.learningRecord.totalDuration">
                            已学习：{{ formatDuration(course.learningRecord.totalDuration) }}
                        </text>
                    </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 { listSubject } from '@/api/study/subject.js'

export default {
    data() {
        return {
            courseList: [],
            filteredCourseList: [],
            loading: false,
            weekDays: [],
            todayCourseCount: 0,
            showCalendar: false, // 日历展开状态
            courseTimeList: [], // 课程时间列表
            calendarKey: 0, // 用于强制刷新日历组件
            // 学科相关
            subjectList: [],
            selectedSubjectId: null,
            selectedSubjectName: '',
            // 课程单元相关（课程状态筛选）
            courseUnitOptions: [
                { value: 'all', label: '全部' },
                { value: 'active', label: '进行中' },
                { value: 'pending', label: '未开始' },
                { value: 'ended', label: '已结束' }
            ],
            selectedCourseUnit: 'all',
            selectedCourseUnitName: '全部',
            selectedSubjectIndex: 0,
            selectedCourseUnitIndex: 0,
            // 用于强制重新渲染 picker 的 key
            subjectPickerKey: 0,
            hasLoadedOnce: false
        }
    },
    computed: {
        ...mapGetters('auth', ['userInfo']),
        subjectPickerOptions() {
            // 确保返回正确的数据格式
            const options = [
                { value: null, label: '全部' }
            ]
            
            // 如果学科列表存在且不为空，添加学科选项
            if (this.subjectList && Array.isArray(this.subjectList) && this.subjectList.length > 0) {
                const subjectOptions = this.subjectList
                    .filter(subject => subject && subject.id && subject.subjectName)
                    .map(subject => ({
                        value: subject.id,
                        label: subject.subjectName
                    }))
                options.push(...subjectOptions)
            }
            
            return options
        },
        courseUnitPickerOptions() {
            return this.courseUnitOptions
        }
    },
    onLoad() {
        this.initWeekDays()
        this.loadSubjectList()
        this.loadCourseList(true)
    },
    onShow() {
        // 每次显示时刷新列表（确保进度是最新的）
        if (this.hasLoadedOnce) {
            this.loadCourseList()
        }
        // 通知底部导航栏更新
        uni.$emit('tabbar-update')
    },
    methods: {
        initWeekDays() {
            const days = ['一', '二', '三', '四', '五', '六', '日']
            const today = new Date()
            const dayOfWeek = today.getDay() === 0 ? 7 : today.getDay() // 转换为周一到周日 1-7
            const startOfWeek = new Date(today)
            startOfWeek.setDate(today.getDate() - (dayOfWeek - 1))
            
            this.weekDays = days.map((name, index) => {
                const date = new Date(startOfWeek)
                date.setDate(startOfWeek.getDate() + index)
                const dateNum = date.getDate()
                const isToday = date.toDateString() === today.toDateString()
                
                return {
                    name,
                    date: dateNum,
                    isToday
                }
            })
        },
        
        async loadSubjectList() {
            try {
                const response = await listSubject()
                console.log('学科列表接口响应:', response)
                if (response.code === 200) {
                    // 确保数据正确赋值
                    const subjectData = response.data || []
                    // 使用 Vue.set 或直接赋值来触发响应式更新
                    this.subjectList = [...subjectData] // 创建新数组确保响应式更新
                    console.log('学科列表数据:', this.subjectList)
                    console.log('学科下拉选项:', this.subjectPickerOptions)
                    console.log('学科下拉选项数量:', this.subjectPickerOptions.length)
                    
                    // 使用 $nextTick 确保 DOM 更新完成后再更新 key 强制重新渲染
                    this.$nextTick(() => {
                        console.log('DOM 更新完成，学科下拉选项:', this.subjectPickerOptions)
                        // 更新 key 强制重新渲染 picker 组件
                        this.subjectPickerKey++
                    })
                } else {
                    console.error('学科列表接口返回错误:', response)
                    uni.showToast({
                        title: response.msg || '加载学科列表失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('加载学科列表失败:', error)
                uni.showToast({
                    title: '加载学科列表失败',
                    icon: 'none'
                })
            }
        },
        
        async loadCourseList(showSkeleton = false) {
            const shouldShowSkeleton = showSkeleton || !this.hasLoadedOnce
            if (shouldShowSkeleton) {
                this.loading = true
            }
            try {
                // 构建请求参数
                const params = {}
                if (this.selectedSubjectId) {
                    params.subjectId = this.selectedSubjectId
                }
                if (this.selectedCourseUnit !== 'all') {
                    params.courseUnit = this.selectedCourseUnit
                }
                
                // 使用学员端课程列表接口：GET /study/course/my-courses
                // 如果有筛选参数，使用 request.get；否则使用封装的 API
                const response = Object.keys(params).length > 0 
                    ? await request.get('/study/course/my-courses', params)
                    : await getMyCourses()
                console.log('课程列表响应:', response)
                
                if (response.code === 200) {
                    const courses = response.data || []
                    console.log('课程数据:', courses)
                    // 输出完整的课程数据结构，包括所有字段
                    console.log('课程数据详细信息:', courses.map(c => ({
                        id: c.id,
                        courseName: c.courseName,
                        startTime: c.startTime,
                        endTime: c.endTime,
                        createTime: c.createTime,
                        updateTime: c.updateTime,
                        status: c.status,
                        allFields: Object.keys(c)
                    })))
                    
                    // 获取学习记录
                    const learningRecordsResponse = await getMyRecords()
                    const learningRecords = learningRecordsResponse.code === 200 ? (learningRecordsResponse.data || []) : []
                    console.log('学习记录:', learningRecords)
                    
                    // 将学习记录关联到课程
                    const processedCourses = courses.map(course => {
                        const record = learningRecords.find(r => r.courseId === course.id)
                        return {
                            ...course,
                            learningRecord: record || null
                        }
                    })
                    
                    console.log('处理后的课程列表:', processedCourses)
                    
                    // 使用 Vue.set 或直接赋值确保响应式更新
                    this.courseList = processedCourses
                    // 应用搜索和筛选
                    this.applyFilter()
                    
                    // 计算今日课程数（今天有课的课程，包括进行中的课程）
                    const today = new Date()
                    today.setHours(0, 0, 0, 0)
                    
                    this.todayCourseCount = processedCourses.filter(course => {
                        // 如果课程状态是进行中，且没有明确的时间信息，也算今天有课
                        const courseStatus = this.getCourseStatus(course)
                        if (courseStatus === 'active' && !course.startTime && !course.endTime) {
                            return true
                        }
                        
                        // 如果有开始时间，按时间范围判断
                        if (course.startTime) {
                            const startDate = new Date(course.startTime)
                            startDate.setHours(0, 0, 0, 0)
                            
                            // 如果课程有结束时间
                            if (course.endTime) {
                                const endDate = new Date(course.endTime)
                                endDate.setHours(0, 0, 0, 0)
                                // 今天在课程时间范围内（开始时间 <= 今天 <= 结束时间）
                                return startDate.getTime() <= today.getTime() && endDate.getTime() >= today.getTime()
                            } else {
                                // 如果没有结束时间，只要开始时间 <= 今天就算今天有课
                                return startDate.getTime() <= today.getTime()
                            }
                        }
                        
                        return false
                    }).length
                    
                    console.log('今日课程数计算:', {
                        today: today.toISOString(),
                        totalCourses: processedCourses.length,
                        todayCount: this.todayCourseCount,
                        coursesWithTime: processedCourses.filter(c => c.startTime).map(c => ({
                            name: c.courseName,
                            startTime: c.startTime,
                            endTime: c.endTime,
                            startDate: c.startTime ? new Date(c.startTime).toISOString() : null
                        }))
                    })
                    
                    // 如果日历已展开，更新课程时间列表并刷新日历
                    if (this.showCalendar) {
                        this.$nextTick(() => {
                            this.loadCourseTimeList()
                            // 强制刷新日历组件，确保标记正确显示
                            this.calendarKey++
                        })
                    }
                } 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.hasLoadedOnce = true
            }
        },
        
        applyFilter() {
            let filtered = [...this.courseList]
            
            // 按学科筛选
            if (this.selectedSubjectId) {
                filtered = filtered.filter(course => {
                    return course.subjectId === this.selectedSubjectId
                })
            }
            
            // 按课程状态筛选
            if (this.selectedCourseUnit !== 'all') {
                filtered = filtered.filter(course => {
                    const status = this.getCourseStatus(course)
                    return status === this.selectedCourseUnit
                })
            }
            
            this.filteredCourseList = filtered
        },
        
        onSubjectChange(e) {
            const index = e.detail.value
            const selected = this.subjectPickerOptions[index]
            this.selectedSubjectIndex = index
            this.selectedSubjectId = selected.value
            this.selectedSubjectName = selected.value ? selected.label : ''
            // 应用筛选（包括搜索）
            this.applyFilter()
        },
        
        onCourseUnitChange(e) {
            const index = e.detail.value
            const selected = this.courseUnitPickerOptions[index]
            this.selectedCourseUnitIndex = index
            this.selectedCourseUnit = selected.value
            this.selectedCourseUnitName = selected.label
            // 应用筛选（包括搜索）
            this.applyFilter()
        },
        
        goToProfile() {
            uni.switchTab({
                url: '/pages/profile/profile'
            })
        },
        
        toggleCalendar() {
            this.showCalendar = !this.showCalendar
            if (this.showCalendar) {
                // 确保课程列表已加载后再加载时间列表
                this.$nextTick(() => {
                    this.loadCourseTimeList()
                    // 强制刷新日历组件，确保标记正确显示
                    this.calendarKey++
                })
            }
        },
        
        // 加载课程时间列表
        loadCourseTimeList() {
            // 从课程列表中提取所有课程（包括没有明确时间的进行中课程）
            this.courseTimeList = this.courseList
                .map(course => {
                    const courseStatus = this.getCourseStatus(course)
                    // 如果课程有开始时间，或者状态是进行中，都显示
                    if (course.startTime || courseStatus === 'active') {
                        return {
                            courseName: course.courseName,
                            startTime: course.startTime,
                            endTime: course.endTime,
                            status: courseStatus
                        }
                    }
                    return null
                })
                .filter(item => item !== null)
                .sort((a, b) => {
                    // 按开始时间排序，没有开始时间的排在后面
                    if (!a.startTime && !b.startTime) return 0
                    if (!a.startTime) return 1
                    if (!b.startTime) return -1
                    return new Date(a.startTime) - new Date(b.startTime)
                })
            console.log('课程时间列表:', this.courseTimeList)
            console.log('课程列表原始数据:', this.courseList.map(c => ({
                name: c.courseName,
                startTime: c.startTime,
                endTime: c.endTime,
                status: this.getCourseStatus(c)
            })))
            console.log('所有课程数量:', this.courseList.length)
            console.log('所有课程完整信息:', this.courseList.map(c => ({
                id: c.id,
                courseName: c.courseName,
                startTime: c.startTime,
                endTime: c.endTime,
                createTime: c.createTime,
                updateTime: c.updateTime,
                status: c.status,
                allFields: Object.keys(c)
            })))
        },
        
        // 日历格式化器（标记有课程的日期）
        calendarFormatter(day) {
            // 直接从课程列表检查，确保数据是最新的
            const dayDate = new Date(day.date)
            dayDate.setHours(0, 0, 0, 0)
            const today = new Date()
            today.setHours(0, 0, 0, 0)
            
            // 检查该日期是否有课程（包括开始日期和结束日期之间的所有日期）
            const hasCourse = this.courseList.some(course => {
                // 如果课程有开始时间，按时间范围判断
                if (course.startTime) {
                    const startDate = new Date(course.startTime)
                    startDate.setHours(0, 0, 0, 0)
                    
                    // 如果只有开始时间，只标记开始日期
                    if (!course.endTime) {
                        const isMatch = startDate.getTime() === dayDate.getTime()
                        if (isMatch) {
                            console.log('标记课程日期（只有开始时间）:', {
                                courseName: course.courseName,
                                startTime: course.startTime,
                                startDate: startDate.toISOString(),
                                dayDate: dayDate.toISOString()
                            })
                        }
                        return isMatch
                    }
                    
                    // 如果有结束时间，标记从开始到结束的所有日期
                    const endDate = new Date(course.endTime)
                    endDate.setHours(0, 0, 0, 0)
                    
                    const isInRange = dayDate.getTime() >= startDate.getTime() && dayDate.getTime() <= endDate.getTime()
                    if (isInRange) {
                        console.log('标记课程日期（时间范围）:', {
                            courseName: course.courseName,
                            startTime: course.startTime,
                            endTime: course.endTime,
                            startDate: startDate.toISOString(),
                            endDate: endDate.toISOString(),
                            dayDate: dayDate.toISOString()
                        })
                    }
                    return isInRange
                }
                
                // 如果课程没有明确的时间信息，根据状态判断
                if (!course.startTime && !course.endTime) {
                    const courseStatus = this.getCourseStatus(course)
                    if (courseStatus === 'active') {
                        // 对于进行中的课程，如果没有明确时间，只标记今天
                        return dayDate.getTime() === today.getTime()
                    } else if (courseStatus === 'pending') {
                        // 对于未开始的课程，如果没有明确时间，可能是长期课程，标记今天和未来
                        return dayDate.getTime() >= today.getTime()
                    }
                }
                
                return false
            })
            
            if (hasCourse) {
                day.bottomInfo = '有课'
                day.dot = true
            }
            return day
        },
        
        // 格式化日期时间
        formatDateTime(dateTime) {
            if (!dateTime) return ''
            const date = new Date(dateTime)
            const year = date.getFullYear()
            const month = (date.getMonth() + 1).toString().padStart(2, '0')
            const day = date.getDate().toString().padStart(2, '0')
            const hour = date.getHours().toString().padStart(2, '0')
            const minute = date.getMinutes().toString().padStart(2, '0')
            return `${year}-${month}-${day} ${hour}:${minute}`
        },
        
        getCourseStatus(course) {
            // 如果课程出现在列表中，说明已经分配，即使status是0，也应该允许查看
            // 主要根据时间来判断状态
            const now = new Date()
            
            // 如果课程明确被禁用（status是'2'或2），则显示禁用
            if (course.status === '2' || course.status === 2) {
                return 'disabled'
            }
            
            // 根据时间判断状态
            if (course.startTime && new Date(course.startTime) > now) {
                return 'pending'
            }
            if (course.endTime && new Date(course.endTime) < now) {
                return 'ended'
            }
            
            // 如果status是0或null，但时间有效，显示为active（因为已经在列表中，说明已分配）
            return 'active'
        },
        
        goToCourseDetail(course) {
            uni.navigateTo({
                url: `/pages/course/detail?id=${course.id}`
            })
        },
        getStatusText(course) {
            const status = this.getCourseStatus(course)
            return this.getStatusTextByStatus(status)
        },
        
        getStatusTextByStatus(status) {
            const statusMap = {
                'active': '进行中',
                'pending': '未开始',
                'ended': '已结束',
                'disabled': '已禁用'
            }
            return statusMap[status] || '未知'
        },
        getStatusClass(course) {
            const status = this.getCourseStatus(course)
            return `status-${status}`
        },
        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}分钟`
        }
    }
}
</script>

<style lang="scss" scoped>
.course-list-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;
    }
}

// 顶部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;
                    }
                }
            }
        }
    }
}

// 日历/日程部分
.calendar-section {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    @media (min-width: 768px) {
        padding: 30rpx 40rpx;
        margin-bottom: 20rpx;
    }
    
    .week-days {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
        
        @media (min-width: 768px) {
            margin-bottom: 24rpx;
        }
        
        .day-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12rpx;
            
            @media (min-width: 768px) {
                gap: 10rpx;
            }
            
            .day-name {
                font-size: 24rpx;
                color: #666;
                
                @media (min-width: 768px) {
                    font-size: 22rpx;
                }
            }
            
            .day-date {
                width: 60rpx;
                height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                
                @media (min-width: 768px) {
                    width: 50rpx;
                    height: 50rpx;
                }
                
                .date-text {
                    font-size: 28rpx;
                    color: #333;
                    
                    @media (min-width: 768px) {
                        font-size: 26rpx;
                    }
                }
                
                &.date-today {
                    background: rgb(55 140 224);
                    
                    .today-text {
                        font-size: 24rpx;
                        color: #fff;
                        font-weight: bold;
                        
                        @media (min-width: 768px) {
                            font-size: 22rpx;
                        }
                    }
                }
            }
            
            &.today {
                .day-name {
                    color: rgb(55 140 224);
                    font-weight: 600;
                }
            }
        }
    }
    
    .calendar-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        @media (min-width: 768px) {
            margin-bottom: 16rpx;
        }
        
        .today-course-count {
            display: flex;
            align-items: baseline;
            gap: 8rpx;
            
            .count-label {
                font-size: 26rpx;
                color: #666;
                
                @media (min-width: 768px) {
                    font-size: 24rpx;
                }
            }
            
            .count-number {
                font-size: 32rpx;
                color: rgb(55 140 224);
                font-weight: bold;
                
                @media (min-width: 768px) {
                    font-size: 30rpx;
                }
            }
        }
        
        .calendar-link {
            font-size: 26rpx;
            color: rgb(55 140 224);
            font-weight: 500;
            
            @media (min-width: 768px) {
                font-size: 24rpx;
            }
        }
    }
    
    .calendar-link {
        display: flex;
        align-items: center;
        gap: 8rpx;
        
        .calendar-arrow {
            font-size: 32rpx;
            transition: transform 0.3s;
            display: inline-block;
            
            &.arrow-up {
                transform: rotate(-90deg);
            }
        }
    }
    
    .calendar-expanded {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, margin-top 0.3s ease-out, padding-top 0.3s ease-out;
        border-top: 0 solid #f0f0f0;
        
        &.expanded {
            max-height: 2000rpx;
            margin-top: 30rpx;
            padding-top: 30rpx;
            border-top-width: 1rpx;
        
        @media (min-width: 768px) {
                margin-top: 24rpx;
                padding-top: 24rpx;
            }
        }
        
        .calendar-wrapper {
            width: 100%;
            
            // 覆盖 u-calendar 的弹窗样式，确保内联显示
            :deep(.u-calendar) {
                position: relative !important;
                transform: none !important;
                background: transparent !important;
                box-shadow: none !important;
            }
            
            :deep(.u-popup) {
                position: relative !important;
                display: block !important;
            }
            
            :deep(.u-popup__content) {
                position: relative !important;
                transform: none !important;
            }
        }
        
        .course-time-list {
            margin-top: 30rpx;
            
            @media (min-width: 768px) {
                margin-top: 24rpx;
            }
            
            .time-list-title {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 24rpx;
                
                @media (min-width: 768px) {
                    font-size: 28rpx;
                    margin-bottom: 20rpx;
                }
            }
            
            .time-item {
                background: #f8f9fa;
                border-radius: 12rpx;
                padding: 24rpx;
                margin-bottom: 20rpx;
                
                @media (min-width: 768px) {
                    padding: 28rpx;
                    margin-bottom: 16rpx;
                }
                
                .time-item-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 16rpx;
                    
                    .time-course-name {
                        font-size: 30rpx;
                        font-weight: bold;
                        color: #1a1a1a;
                        flex: 1;
                        
                        @media (min-width: 768px) {
                            font-size: 28rpx;
                        }
                    }
                    
                    .time-status {
                        font-size: 22rpx;
                        padding: 4rpx 12rpx;
                        border-radius: 12rpx;
                        font-weight: 500;
                        
                        @media (min-width: 768px) {
                            font-size: 20rpx;
                            padding: 6rpx 14rpx;
                        }
                        
                        &.status-active {
                            background: #e6f7ff;
                            color: rgb(55 140 224);
                        }
                        
                        &.status-pending {
                            background: #fff7e6;
                            color: #fa8c16;
                        }
                        
                        &.status-ended {
                            background: #f5f5f5;
                            color: #999;
                        }
                    }
                }
                
                .time-item-info {
                    display: flex;
                    align-items: center;
                    margin-bottom: 12rpx;
                    font-size: 26rpx;
                    
                    @media (min-width: 768px) {
            font-size: 24rpx;
                        margin-bottom: 10rpx;
                    }
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                    
                    .time-label {
                        color: #666;
                        margin-right: 8rpx;
                    }
                    
                    .time-value {
                        color: #1a1a1a;
                        font-weight: 500;
                    }
                }
            }
        }
        
        .no-course-time {
            text-align: center;
            padding: 60rpx 0;
            
            @media (min-width: 768px) {
                padding: 80rpx 0;
            }
            
            .no-time-text {
                font-size: 26rpx;
            color: #999;
            
            @media (min-width: 768px) {
                    font-size: 24rpx;
                }
            }
        }
    }
}

.empty-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 150rpx 0;
    
    @media (min-width: 768px) {
        padding: 200rpx 0;
    }
    
    .empty-illustration {
        margin-bottom: 40rpx;
        
        @media (min-width: 768px) {
            margin-bottom: 30rpx;
        }
        
        .empty-icon {
            font-size: 120rpx;
            opacity: 0.3;
            
            @media (min-width: 768px) {
                font-size: 100rpx;
            }
        }
    }
    
    .empty-text {
        font-size: 28rpx;
        color: #999;
        
        @media (min-width: 768px) {
            font-size: 26rpx;
        }
    }
}

.filter-section {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    @media (min-width: 768px) {
        padding: 20rpx 40rpx;
        margin-bottom: 20rpx;
    }
    
    .filter-row {
        display: flex;
        gap: 20rpx;
        
        @media (min-width: 768px) {
            gap: 30rpx;
        }
        
        .filter-item {
            flex: 0 0 calc((100% - 20rpx) / 2);
            display: flex;
            align-items: center;
            padding: 24rpx 28rpx;
            background: #f5f7fa;
            border-radius: 16rpx;
            transition: background-color 0.2s;
            min-height: 88rpx;
            
            @media (min-width: 768px) {
                flex: 0 0 calc((100% - 30rpx) / 2);
                padding: 28rpx 36rpx;
                border-radius: 20rpx;
                min-height: 96rpx;
            }
            
            &:active {
                background: #e8eef5;
            }
            
            .filter-label {
                font-size: 30rpx;
                color: #666;
                margin-right: 16rpx;
                font-weight: 500;
                
                @media (min-width: 768px) {
                    font-size: 32rpx;
                    margin-right: 20rpx;
                }
            }
            
            .filter-value {
                flex: 1;
                font-size: 30rpx;
                color: #1a1a1a;
                font-weight: 500;
                
                @media (min-width: 768px) {
                    font-size: 32rpx;
                }
            }
            
            .filter-icon {
                font-size: 24rpx;
                color: #999;
                margin-left: 16rpx;
                
                @media (min-width: 768px) {
                    font-size: 26rpx;
                    margin-left: 20rpx;
                }
            }
        }
    }
}

.course-list {
    padding: 20rpx 30rpx;
    
    @media (min-width: 768px) {
        padding: 20rpx 40rpx;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24rpx;
    }
    
    .course-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: 40rpx;
            margin-bottom: 0;
            border-radius: 20rpx;
        }
        
        &:active {
            transform: scale(0.98);
            box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
        }
        
        .course-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16rpx;
            
            @media (min-width: 768px) {
                margin-bottom: 20rpx;
            }
            
            .course-title-wrapper {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 8rpx;
            }
            
            .course-name {
                font-size: 34rpx;
                font-weight: bold;
                color: #1a1a1a;
                line-height: 1.4;
                
                @media (min-width: 768px) {
                    font-size: 36rpx;
                }
            }
            
            .course-subject {
                font-size: 24rpx;
                color: rgb(55 140 224);
                background: rgba(55, 140, 224, 0.1);
                padding: 4rpx 12rpx;
                border-radius: 8rpx;
                align-self: flex-start;
                
                @media (min-width: 768px) {
                    font-size: 22rpx;
                    padding: 6rpx 14rpx;
                }
            }
            
            .course-status {
                font-size: 22rpx;
                padding: 6rpx 16rpx;
                border-radius: 20rpx;
                font-weight: 500;
                margin-left: 16rpx;
                flex-shrink: 0;
                
                @media (min-width: 768px) {
                    font-size: 24rpx;
                    padding: 8rpx 20rpx;
                }
                
                &.status-active {
                    background: #e6f7ff;
                    color: rgb(55 140 224);
                }
                
                &.status-pending {
                    background: #fff7e6;
                    color: #fa8c16;
                }
                
                &.status-ended {
                    background: #f5f5f5;
                    color: #999;
                }
                
                &.status-disabled {
                    background: #fff1f0;
                    color: #ff4d4f;
                }
            }
        }
        
        .course-desc {
            display: block;
            font-size: 28rpx;
            color: #666;
            margin-bottom: 24rpx;
            line-height: 1.5;
            
            @media (min-width: 768px) {
                font-size: 30rpx;
                margin-bottom: 32rpx;
            }
        }
        
        .course-progress {
            margin-top: 24rpx;
            padding-top: 24rpx;
            border-top: 1rpx solid #f0f0f0;
            
            @media (min-width: 768px) {
                margin-top: 32rpx;
                padding-top: 32rpx;
            }
            
            .progress-bar {
                height: 10rpx;
                background: #f0f0f0;
                border-radius: 5rpx;
                overflow: hidden;
                margin-bottom: 16rpx;
                
                @media (min-width: 768px) {
                    height: 12rpx;
                    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;
                }
            }
            
            .progress-info {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 26rpx;
                
                @media (min-width: 768px) {
                    font-size: 28rpx;
                }
                
                .progress-text {
                    color: #1a1a1a;
                    font-weight: 500;
                }
                
                .progress-time {
                    color: #999;
                }
            }
        }
    }
}
</style>

