<template>
    <view class="exam-list-container">
        <!-- 顶部导航栏 -->
        <custom-navbar title="我的考试"></custom-navbar>
        
        <!-- 筛选栏 -->
        <view class="filter-section">
            <view class="filter-row">
                <view class="filter-item" @click="showStatusPicker = true">
                    <text class="filter-label">状态：</text>
                    <text class="filter-value">{{ selectedStatusName || '全部' }}</text>
                    <text class="filter-icon">▼</text>
                </view>
            </view>
            <view class="filter-actions" v-if="hasFilter">
                <text class="reset-btn" @click="resetFilter">重置</text>
            </view>
        </view>
        
        <!-- 状态选择器 -->
        <u-picker 
            :show="showStatusPicker" 
            :columns="[statusOptions]"
            keyName="label"
            @confirm="onStatusConfirm"
            @cancel="showStatusPicker = false"
        ></u-picker>
        
        <u-empty v-if="filteredExamList.length === 0 && !loading" mode="data" text="暂无考试"></u-empty>
        
        <view v-else class="exam-list">
            <view 
                v-for="exam in filteredExamList" 
                :key="exam.id"
                class="exam-item"
                @click="goToExamDetail(exam)"
            >
                <view class="exam-header">
                    <text class="exam-name">{{ exam.examName }}</text>
                    <text class="exam-status" :class="getStatusClass(exam)">{{ getStatusText(exam) }}</text>
                </view>
                
                <view class="exam-info">
                    <view class="info-row">
                        <text class="info-label">学科：</text>
                        <text class="info-value">{{ exam.subjectName || '未知' }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">题目数：</text>
                        <text class="info-value">{{ exam.questionCount || 0 }}题</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">时长：</text>
                        <text class="info-value">{{ exam.duration || 0 }}分钟</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">总分：</text>
                        <text class="info-value">{{ exam.totalScore || 0 }}分</text>
                    </view>
                </view>
                
                <view class="exam-time" v-if="exam.publishTime">
                    <text class="time-label">发布时间：</text>
                    <text class="time-value">{{ formatTime(exam.publishTime) }}</text>
                </view>
                
                <view class="exam-actions">
                    <button 
                        v-if="getExamStatus(exam) === 'active'" 
                        class="btn-start"
                        @click.stop="startExam(exam)"
                    >开始考试</button>
                    <button 
                        v-else-if="getExamStatus(exam) === 'pending'" 
                        class="btn-disabled"
                        disabled
                    >未开始</button>
                    <button 
                        v-else-if="getExamStatus(exam) === 'completed' || getExamStatus(exam) === 'ended'" 
                        class="btn-view"
                        @click.stop="viewResult(exam)"
                    >查看结果</button>
                </view>
            </view>
        </view>
        
        
        <!-- 开始考试确认弹窗 -->
        <view class="confirm-modal" v-if="showConfirmModal" @click.stop>
            <view class="modal-mask" @click="showConfirmModal = false"></view>
            <view class="modal-content">
                <view class="modal-header">
                    <text class="modal-title">开始考试</text>
                </view>
                <view class="modal-body">
                    <text class="modal-text">确定要开始考试"{{ currentExam?.examName }}"吗？</text>
                    <view class="modal-info">
                        <text class="info-item">考试时长：{{ currentExam?.duration || 0 }}分钟</text>
                    </view>
                </view>
                <view class="modal-footer">
                    <button class="btn-cancel" @click="showConfirmModal = false">取消</button>
                    <button class="btn-confirm" @click="confirmStartExam">开始</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getMyExams } from '@/api/study/exam.js'
import { getMyScores } from '@/api/study/score.js'
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'

export default {
    components: {
        CustomNavbar
    },
    data() {
        return {
            examList: [],
            filteredExamList: [],
            loading: false,
            statusOptions: [
                { value: null, label: '全部' },
                { value: 'active', label: '进行中' },
                { value: 'pending', label: '未开始' },
                { value: 'completed', label: '已完成' },
                { value: 'ended', label: '已结束' }
            ],
            selectedStatus: null,
            selectedStatusName: null,
            showStatusPicker: false,
            showConfirmModal: false,
            currentExam: null
        }
    },
    computed: {
        hasFilter() {
            return this.selectedStatus !== null
        }
    },
    onLoad() {
        this.loadExamList()
    },
    onShow() {
        // 每次显示页面时刷新考试列表，确保状态最新
        console.log('[考试列表] 页面显示，刷新列表')
        this.loadExamList()
    },
    onPullDownRefresh() {
        this.loadExamList().finally(() => {
            uni.stopPullDownRefresh()
        })
    },
    methods: {
        async loadExamList() {
            this.loading = 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
                    this.applyFilter()
                } else {
                    uni.showToast({
                        title: examResponse.msg || '加载失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('加载考试列表失败', error)
                uni.showToast({
                    title: error.message || '加载失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },
        
        applyFilter() {
            let filtered = [...this.examList]
            
            // 按状态筛选（使用计算后的状态，而不是原始status字段）
            if (this.selectedStatus !== null) {
                filtered = filtered.filter(exam => {
                    const examStatus = this.getExamStatus(exam)
                    return examStatus === this.selectedStatus
                })
            }
            
            this.filteredExamList = filtered
        },
        
        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' // 进行中
        },
        
        onStatusConfirm(e) {
            const selected = e.value[0]
            this.selectedStatus = selected.value
            this.selectedStatusName = selected.label
            this.showStatusPicker = false
            this.applyFilter()
        },
        
        resetFilter() {
            this.selectedStatus = null
            this.selectedStatusName = null
            this.applyFilter()
        },
        
        goToExamDetail(exam) {
            const status = this.getExamStatus(exam)
            if (status === 'active') {
                this.startExam(exam)
            } else if (status === 'completed' || status === 'ended') {
                this.viewResult(exam)
            } else {
                uni.showToast({
                    title: '考试尚未开始',
                    icon: 'none'
                })
            }
        },
        
        startExam(exam) {
            this.currentExam = exam
            this.showConfirmModal = true
        },
        
        confirmStartExam() {
            if (this.currentExam) {
                this.showConfirmModal = false
                uni.navigateTo({
                    url: `/pages/exam/detail?id=${this.currentExam.id}`
                })
                this.currentExam = null
            }
        },
        
        viewResult(exam) {
            // 跳转到成绩列表，筛选该考试的成绩
            uni.navigateTo({
                url: `/pages/score/list?examId=${exam.id}`
            })
        },
        
        getStatusText(exam) {
            const status = this.getExamStatus(exam)
            const statusMap = {
                'active': '进行中',
                'pending': '未开始',
                'ended': '已结束',
                'completed': '已完成'
            }
            return statusMap[status] || '未知'
        },
        
        getStatusClass(exam) {
            const status = this.getExamStatus(exam)
            return `status-${status}`
        },
        
        formatTime(timeStr) {
            if (!timeStr) return ''
            const date = new Date(timeStr)
            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}`
        }
    }
}
</script>

<style lang="scss" scoped>
.exam-list-container {
    padding: 30rpx;
    padding-top: 0;
    background-color: #f5f7fa;
    min-height: 100vh;
    
    // custom-navbar 是 fixed 定位，需要为它留出空间
    // 导航栏总高度 = 状态栏高度 + 88rpx (移动端) 或 80rpx (桌面端)
    // 使用 var(--status-bar-height) 与课程列表页面保持一致
    padding-top: calc(var(--status-bar-height) + 88rpx + 20rpx);
    
    @media (min-width: 768px) {
        padding: 60rpx;
        padding-top: calc(var(--status-bar-height) + 80rpx + 40rpx);
    }
}

.filter-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    @media (min-width: 768px) {
        padding: 40rpx;
        border-radius: 24rpx;
        margin-bottom: 40rpx;
    }
    
    .filter-row {
        display: flex;
        gap: 20rpx;
        
        .filter-item {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 20rpx 24rpx;
            background: #f5f7fa;
            border-radius: 12rpx;
            transition: background-color 0.2s;
            
            &:active {
                background: #e8eef5;
            }
            
            .filter-label {
                font-size: 28rpx;
                color: #666;
                margin-right: 12rpx;
                font-weight: 500;
            }
            
            .filter-value {
                flex: 1;
                font-size: 28rpx;
                color: #1a1a1a;
                font-weight: 500;
            }
            
            .filter-icon {
                font-size: 20rpx;
                color: #999;
                margin-left: 12rpx;
            }
        }
    }
    
    .filter-actions {
        margin-top: 24rpx;
        text-align: right;
        
        .reset-btn {
            font-size: 28rpx;
            color: rgb(55 140 224);
            padding: 12rpx 24rpx;
            font-weight: 500;
        }
    }
}

.exam-list {
    @media (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30rpx;
    }
    
    .exam-item {
        background: #fff;
        border-radius: 20rpx;
        padding: 36rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        transition: transform 0.2s, box-shadow 0.2s;
        
        @media (min-width: 768px) {
            padding: 48rpx;
            margin-bottom: 0;
            border-radius: 24rpx;
        }
        
        &:active {
            transform: scale(0.98);
            box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
        }
        
        .exam-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 24rpx;
            
            .exam-name {
                font-size: 34rpx;
                font-weight: bold;
                color: #1a1a1a;
                flex: 1;
                line-height: 1.4;
            }
            
            .exam-status {
                font-size: 22rpx;
                padding: 6rpx 16rpx;
                border-radius: 20rpx;
                font-weight: 500;
                margin-left: 16rpx;
                flex-shrink: 0;
                
                &.status-active {
                    background: #e6f7ff;
                    color: rgb(55 140 224);
                }
                
                &.status-pending {
                    background: #fff7e6;
                    color: #fa8c16;
                }
                
                &.status-ended {
                    background: #f5f5f5;
                    color: #999;
                }
                
                &.status-completed {
                    background: #f6ffed;
                    color: #52c41a;
                }
            }
        }
        
        .exam-info {
            margin-bottom: 24rpx;
            
            .info-row {
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;
                font-size: 28rpx;
                
                .info-label {
                    color: #999;
                    width: 140rpx;
                }
                
                .info-value {
                    color: #1a1a1a;
                    font-weight: 500;
                }
            }
        }
        
        .exam-time {
            padding-top: 24rpx;
            border-top: 1rpx solid #f0f0f0;
            margin-bottom: 24rpx;
            font-size: 26rpx;
            color: #999;
            
            .time-label {
                margin-right: 8rpx;
            }
        }
        
        .exam-actions {
            margin-top: 24rpx;
            
            .btn-start {
                width: 100%;
                background: linear-gradient(135deg, rgb(55 140 224) 0%, rgb(45 120 200) 100%);
                color: #fff;
                border: none;
                border-radius: 12rpx;
                padding: 24rpx;
                font-size: 30rpx;
                font-weight: 500;
                box-shadow: 0 4rpx 16rpx rgba(55, 140, 224, 0.3);
            }
            
            .btn-disabled {
                width: 100%;
                background: #f5f5f5;
                color: #999;
                border: none;
                border-radius: 12rpx;
                padding: 24rpx;
                font-size: 30rpx;
            }
            
            .btn-view {
                width: 100%;
                background: #e6f7ff;
                color: rgb(55 140 224);
                border: none;
                border-radius: 12rpx;
                padding: 24rpx;
                font-size: 30rpx;
                font-weight: 500;
            }
        }
    }
}

// 确认弹窗样式
.confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    
    .modal-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4rpx);
    }
    
    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600rpx;
        max-width: 90%;
        background: #fff;
        border-radius: 24rpx;
        overflow: hidden;
        box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
        
        @media (min-width: 768px) {
            width: 500px;
            border-radius: 20px;
        }
        
        .modal-header {
            padding: 40rpx 30rpx 30rpx;
            text-align: center;
            border-bottom: 1rpx solid #f0f0f0;
            
            @media (min-width: 768px) {
                padding: 36px 30px 24px;
            }
            
            .modal-title {
                font-size: 36rpx;
                font-weight: bold;
                color: #1a1a1a;
                
                @media (min-width: 768px) {
                    font-size: 32px;
                }
            }
        }
        
        .modal-body {
            padding: 40rpx 30rpx;
            
            @media (min-width: 768px) {
                padding: 36px 30px;
            }
            
            .modal-text {
                display: block;
                font-size: 30rpx;
                color: #333;
                margin-bottom: 24rpx;
                text-align: center;
                line-height: 1.6;
                
                @media (min-width: 768px) {
                    font-size: 28px;
                    margin-bottom: 20px;
                }
            }
            
            .modal-info {
                background: #f8f9fa;
                border-radius: 12rpx;
                padding: 24rpx;
                text-align: center;
                
                @media (min-width: 768px) {
                    border-radius: 10px;
                    padding: 20px;
                }
                
                .info-item {
                    font-size: 28rpx;
                    color: #666;
                    line-height: 1.5;
                    
                    @media (min-width: 768px) {
                        font-size: 26px;
                    }
                }
            }
        }
        
        .modal-footer {
            display: flex;
            border-top: 1rpx solid #f0f0f0;
            
            .btn-cancel,
            .btn-confirm {
                flex: 1;
                border: none;
                padding: 28rpx;
                font-size: 30rpx;
                font-weight: 500;
                background: transparent;
                transition: background-color 0.2s;
                
                @media (min-width: 768px) {
                    padding: 24px;
                    font-size: 28px;
                }
            }
            
            .btn-cancel {
                color: #666;
                border-right: 1rpx solid #f0f0f0;
                
                &:active {
                    background: #f5f5f5;
                }
            }
            
            .btn-confirm {
                color: rgb(55 140 224);
                font-weight: 600;
                
                &:active {
                    background: rgba(55, 140, 224, 0.1);
                }
            }
        }
    }
}
</style>

