<template>
  <div class="student-scores-container">
    <div class="page-header">
      <h1 class="page-title">学员考试成绩</h1>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
        <el-button type="primary" @click="refreshData">
          <el-icon class="el-icon--left"><Refresh /></el-icon>
          刷新数据
        </el-button>
        <el-button @click="exportScores">
          <el-icon class="el-icon--left"><Download /></el-icon>
          导出成绩
        </el-button>
      </div>
    </div>

    <!-- 成绩统计概览 -->
    <div class="stats-overview">
      <div class="stat-card card" v-for="stat in scoreStats" :key="stat.label">
        <div class="stat-icon" :style="{ backgroundColor: stat.bgColor }">
          <el-icon :size="32" :color="stat.color">
            <component :is="stat.icon" />
          </el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
          <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'" v-if="stat.trend !== 0">
            <el-icon><component :is="stat.trend > 0 ? 'Top' : 'Bottom'" /></el-icon>
            {{ Math.abs(stat.trend) }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="学员姓名">
          <el-input 
            v-model="filterForm.studentName" 
            placeholder="搜索学员姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="filterForm.position" placeholder="请选择" clearable>
            <el-option label="全部岗位" value="" />
            <el-option label="美容师" value="beautician" />
            <el-option label="美容顾问" value="beauty_consultant" />
            <el-option label="医美医生" value="doctor" />
            <el-option label="客户服务" value="service" />
          </el-select>
        </el-form-item>
        <el-form-item label="课程">
          <el-select v-model="filterForm.course" placeholder="请选择" clearable>
            <el-option label="全部课程" value="" />
            <el-option label="皮肤管理基础" value="skin_management" />
            <el-option label="美容产品知识" value="beauty_products" />
            <el-option label="客户沟通技巧" value="communication" />
            <el-option label="轻医美项目" value="light_medical" />
          </el-select>
        </el-form-item>
        <el-form-item label="成绩范围">
          <el-select v-model="filterForm.scoreRange" placeholder="请选择" clearable>
            <el-option label="全部成绩" value="" />
            <el-option label="优秀 (90-100)" value="excellent" />
            <el-option label="良好 (80-89)" value="good" />
            <el-option label="及格 (60-79)" value="pass" />
            <el-option label="不及格 (0-59)" value="fail" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon class="el-icon--left"><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 成绩列表 -->
    <div class="scores-list card">
      <el-table 
        :data="filteredScoresList" 
        style="width: 100%" 
        v-loading="loading"
        @row-click="viewScoreDetail"
      >
        <el-table-column prop="student_name" label="学员姓名" width="120" />
        <el-table-column prop="position" label="岗位" width="120">
          <template #default="scope">
            <el-tag size="small">{{ getPositionText(scope.row.position) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="course_name" label="课程名称" min-width="200" />
        <el-table-column prop="exam_type" label="考试类型" width="120">
          <template #default="scope">
            <el-tag :type="getExamTypeTag(scope.row.exam_type)" size="small">
              {{ getExamTypeText(scope.row.exam_type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="三轮成绩" width="200">
          <template #default="scope">
            <div class="round-scores">
              <el-tag 
                :type="scope.row.round1_score ? getScoreTagType(scope.row.round1_score) : 'info'" 
                size="small"
              >
                第1轮: {{ scope.row.round1_score !== null ? scope.row.round1_score : '-' }}
              </el-tag>
              <el-tag 
                :type="scope.row.round2_score ? getScoreTagType(scope.row.round2_score) : 'info'" 
                size="small"
              >
                第2轮: {{ scope.row.round2_score !== null ? scope.row.round2_score : '-' }}
              </el-tag>
              <el-tag 
                :type="scope.row.round3_score ? getScoreTagType(scope.row.round3_score) : 'info'" 
                size="small"
              >
                第3轮: {{ scope.row.round3_score !== null ? scope.row.round3_score : '-' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="total_score" label="总分" width="80">
          <template #default="scope">
            <span class="total-score">{{ scope.row.total_score }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="accuracy" label="正确率" width="100" sortable>
          <template #default="scope">
            <el-progress 
              :percentage="scope.row.accuracy" 
              :color="getAccuracyColor(scope.row.accuracy)"
              :stroke-width="8"
            />
          </template>
        </el-table-column>
        <el-table-column prop="duration_seconds" label="用时" width="100">
          <template #default="scope">
            <span>{{ formatDuration(scope.row.duration_seconds) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="exam_date" label="考试时间" width="180" sortable />
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.stop="viewScoreDetail(scope.row)">
              <el-icon><View /></el-icon>
              详情
            </el-button>
            <el-button link type="warning" size="small" @click.stop="viewMistakes(scope.row)">
              <el-icon><Document /></el-icon>
              错题
            </el-button>
            <el-button link type="primary" size="small" @click.stop="contactStudent(scope.row.student_name)">
              <el-icon><Message /></el-icon>
              联系
            </el-button>
            <el-button link type="danger" size="small" @click.stop="handleDeleteRecord(scope.row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 错题记录弹窗 -->
    <el-dialog
      v-model="mistakesDialogVisible"
      :title="`${currentScore?.student_name} - ${currentScore?.course_name} - 错题记录`"
      width="900px"
      top="5vh"
    >
      <div v-if="mistakesList.length > 0" class="mistakes-list">
        <el-alert
          :title="`共 ${mistakesList.length} 道错题`"
          type="warning"
          :closable="false"
          style="margin-bottom: 20px"
        />
        <div v-for="(mistake, index) in mistakesList" :key="mistake.id" class="mistake-item">
          <div class="mistake-header">
            <el-tag type="danger" size="small">错题 {{ index + 1 }}</el-tag>
            <el-tag type="info" size="small">{{ getQuestionTypeText(mistake.question_type) }}</el-tag>
          </div>
          <div class="mistake-question">
            <strong>题目：</strong>
            <div v-html="mistake.question_content"></div>
          </div>
          <div class="mistake-answer">
            <div class="answer-item correct">
              <strong>正确答案：</strong>
              <span>{{ mistake.correct_answer }}</span>
            </div>
            <div class="answer-item wrong">
              <strong>学员答案：</strong>
              <span>{{ mistake.user_answer }}</span>
            </div>
          </div>
          <div v-if="mistake.analysis" class="mistake-analysis">
            <strong>解析：</strong>
            <div>{{ mistake.analysis }}</div>
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无错题记录" />
    </el-dialog>

    <!-- 成绩详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      :title="`${currentScore?.student_name} - ${currentScore?.course_name} - 成绩详情`"
      width="800px"
    >
      <div class="score-detail" v-if="currentScore">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h3>基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="学员姓名">{{ currentScore.student_name }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ getPositionText(currentScore.position) }}</el-descriptions-item>
            <el-descriptions-item label="课程名称">{{ currentScore.course_name }}</el-descriptions-item>
            <el-descriptions-item label="考试类型">{{ getExamTypeText(currentScore.exam_type) }}</el-descriptions-item>
            <el-descriptions-item label="考试时间">{{ currentScore.exam_date }}</el-descriptions-item>
            <el-descriptions-item label="用时">{{ formatDuration(currentScore.duration_seconds) }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 成绩统计 -->
        <div class="detail-section">
          <h3>成绩统计</h3>
          <div class="score-stats">
            <div class="stat-item">
              <div class="stat-label">总得分</div>
              <div class="stat-value score" :class="getScoreClass(currentScore.score)">
                {{ currentScore.score }}/{{ currentScore.total_score }}
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-label">正确率</div>
              <div class="stat-value">
                <el-progress 
                  :percentage="currentScore.accuracy || 0" 
                  :color="getAccuracyColor(currentScore.accuracy || 0)"
                  :stroke-width="12"
                />
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-label">题目统计</div>
              <div class="stat-value">
                <div class="question-stats">
                  <span class="correct">正确: {{ currentScore.correct_count }}</span>
                  <span class="wrong">错误: {{ currentScore.wrong_count }}</span>
                  <span class="total">总计: {{ currentScore.total_count }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分题型统计 -->
        <div class="detail-section">
          <h3>分题型统计</h3>
          <el-table :data="currentScore.questionTypeStats" size="small">
            <el-table-column prop="type" label="题型" width="120">
              <template #default="scope">
                <el-tag size="small">{{ scope.row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="total" label="总题数" width="100" />
            <el-table-column prop="correct" label="正确数" width="100" />
            <el-table-column prop="accuracy" label="正确率" width="150">
              <template #default="scope">
                <el-progress 
                  :percentage="scope.row.accuracy" 
                  :stroke-width="6"
                  :show-text="false"
                />
                <span style="margin-left: 8px;">{{ scope.row.accuracy }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="得分" width="100">
              <template #default="scope">
                {{ scope.row.score }}/{{ scope.row.totalScore }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getStudentScores, getStudentScoresStatistics, getExamMistakes, deleteExamRecord, type StudentScoreRecord, type MistakeRecord } from '@/api/manager/scores'

// 加载状态
const loading = ref(false)

// 日期范围
const dateRange = ref<[Date, Date]>([
  new Date(new Date().setDate(new Date().getDate() - 30)),
  new Date()
])

// 分页
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 弹窗状态
const detailDialogVisible = ref(false)
const currentScore = ref<any>(null)

// 错题记录弹窗
const mistakesDialogVisible = ref(false)
const mistakesList = ref<MistakeRecord[]>([])

// 筛选表单
const filterForm = reactive({
  studentName: '',
  position: '',
  course: '',
  scoreRange: ''
})

// 成绩统计数据
const scoreStats = ref([
  {
    label: '总考试次数',
    value: '0',
    icon: 'Document',
    color: '#667eea',
    bgColor: 'rgba(102, 126, 234, 0.1)',
    trend: 0
  },
  {
    label: '平均分',
    value: '0',
    icon: 'TrendCharts',
    color: '#67c23a',
    bgColor: 'rgba(103, 194, 58, 0.1)',
    trend: 0
  },
  {
    label: '通过率',
    value: '0%',
    icon: 'CircleCheck',
    color: '#e6a23c',
    bgColor: 'rgba(230, 162, 60, 0.1)',
    trend: 0
  },
  {
    label: '优秀率',
    value: '0%',
    icon: 'Trophy',
    color: '#f56c6c',
    bgColor: 'rgba(245, 108, 108, 0.1)',
    trend: 0
  }
])

// 学员成绩列表（真实数据）
const scoresList = ref<StudentScoreRecord[]>([])

// 筛选后的成绩列表直接返回（后端已处理筛选和分页）
const filteredScoresList = computed(() => scoresList.value)

/**
 * 获取岗位文本
 */
const getPositionText = (position: string) => {
  const positionMap: Record<string, string> = {
    beautician: '美容师',
    beauty_consultant: '美容顾问',
    doctor: '医美医生',
    service: '客户服务'
  }
  return positionMap[position] || position
}

/**
 * 获取考试类型标签样式
 */
const getExamTypeTag = (type: string) => {
  const tagMap: Record<string, string> = {
    assessment: 'primary',
    practice: 'success',
    quiz: 'warning'
  }
  return tagMap[type] || ''
}

/**
 * 获取考试类型文本
 */
const getExamTypeText = (type: string) => {
  const textMap: Record<string, string> = {
    assessment: '评估考试',
    practice: '练习考试',
    quiz: '快速测验'
  }
  return textMap[type] || type
}

/**
 * 获取分数样式类
 */
const getScoreClass = (score: number) => {
  if (score >= 90) return 'score-excellent'
  if (score >= 80) return 'score-good'
  if (score >= 60) return 'score-pass'
  return 'score-fail'
}

/**
 * 获取正确率颜色
 */
const getAccuracyColor = (accuracy: number) => {
  if (accuracy >= 90) return '#67c23a'
  if (accuracy >= 80) return '#409eff'
  if (accuracy >= 60) return '#e6a23c'
  return '#f56c6c'
}

/**
 * 格式化时长
 */
const formatDuration = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  } else if (minutes > 0) {
    return `${minutes}分钟${secs}秒`
  } else {
    return `${secs}秒`
  }
}

/**
 * 日期变化处理
 */
const handleDateChange = () => {
  currentPage.value = 1
  loadScoresList()
}

/**
 * 加载学员考试成绩列表
 */
const loadScoresList = async () => {
  try {
    loading.value = true
    
    // 构建查询参数
    const params: any = {
      page: currentPage.value,
      size: pageSize.value
    }
    
    // 添加筛选条件
    if (filterForm.studentName) {
      params.student_name = filterForm.studentName
    }
    if (filterForm.position) {
      params.position = getPositionText(filterForm.position)
    }
    if (filterForm.scoreRange) {
      params.score_range = filterForm.scoreRange
    }
    if (dateRange.value && dateRange.value.length === 2) {
      params.start_date = dateRange.value[0].toISOString().split('T')[0]
      params.end_date = dateRange.value[1].toISOString().split('T')[0]
    }
    
    const res = await getStudentScores(params)
    if (res.code === 200 && res.data) {
      scoresList.value = res.data.items
      total.value = res.data.total
    } else {
      ElMessage.error(res.message || '获取考试成绩失败')
    }
  } catch (error) {
    console.error('加载考试成绩失败:', error)
    ElMessage.error('加载考试成绩失败')
  } finally {
    loading.value = false
  }
}

/**
 * 加载统计数据
 */
const loadStatistics = async () => {
  try {
    const res = await getStudentScoresStatistics()
    if (res.code === 200 && res.data) {
      scoreStats.value[0].value = String(res.data.total_exams)
      scoreStats.value[1].value = String(res.data.avg_score)
      scoreStats.value[2].value = `${res.data.pass_rate}%`
      scoreStats.value[3].value = `${res.data.excellent_rate}%`
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

/**
 * 刷新数据
 */
const refreshData = () => {
  loadScoresList()
  loadStatistics()
    ElMessage.success('数据已刷新')
}

/**
 * 导出成绩
 */
const exportScores = () => {
  ElMessage.success('正在导出学员成绩数据...')
}

/**
 * 搜索处理
 */
const handleSearch = () => {
  currentPage.value = 1
  loadScoresList()
}

/**
 * 重置筛选
 */
const handleReset = () => {
  filterForm.studentName = ''
  filterForm.position = ''
  filterForm.course = ''
  filterForm.scoreRange = ''
  dateRange.value = [
    new Date(new Date().setDate(new Date().getDate() - 30)),
    new Date()
  ]
  currentPage.value = 1
  loadScoresList()
}

/**
 * 分页大小改变
 */
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadScoresList()
}

/**
 * 当前页改变
 */
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadScoresList()
}

/**
 * 查看成绩详情
 */
const viewScoreDetail = (score: any) => {
  currentScore.value = score
  detailDialogVisible.value = true
}

/**
 * 查看错题记录
 */
const viewMistakes = async (score: any) => {
  try {
    currentScore.value = score
    loading.value = true
    
    const res = await getExamMistakes(score.id)
    if (res.code === 200 && res.data) {
      mistakesList.value = res.data.items
      mistakesDialogVisible.value = true
      
      if (mistakesList.value.length === 0) {
        ElMessage.info('该考试暂无错题记录')
      }
    } else {
      ElMessage.error(res.message || '获取错题记录失败')
    }
  } catch (error) {
    console.error('获取错题记录失败:', error)
    ElMessage.error('获取错题记录失败')
  } finally {
    loading.value = false
  }
}

/**
 * 获取题型文本
 */
const getQuestionTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    'single': '单选题',
    'multiple': '多选题',
    'judge': '判断题',
    'blank': '填空题',
    'essay': '问答题'
  }
  return typeMap[type] || type
}

/**
 * 获取分数标签类型
 */
const getScoreTagType = (score: number) => {
  if (score >= 90) return 'success'
  if (score >= 80) return ''
  if (score >= 60) return 'warning'
  return 'danger'
}

/**
 * 联系学员
 */
const contactStudent = (studentName: string) => {
  ElMessage.info(`正在联系学员 ${studentName}...`)
}

/**
 * 删除考试记录
 */
const handleDeleteRecord = async (record: StudentScoreRecord) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除 ${record.student_name} 的《${record.course_name}》考试记录吗？此操作不可恢复。`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger'
      }
    )
    
    loading.value = true
    const res = await deleteExamRecord(record.id)
    
    if (res.code === 200) {
      ElMessage.success('删除成功')
      // 刷新列表和统计
      loadScoresList()
      loadStatistics()
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error(error.message || '删除失败')
    }
  } finally {
    loading.value = false
  }
}

// 组件挂载时初始化数据
onMounted(() => {
  loadScoresList()
  loadStatistics()
})
</script>

<style lang="scss" scoped>
.student-scores-container {
  max-width: 1400px;
  margin: 0 auto;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  .stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;

    .stat-card {
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 20px;

      .stat-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .stat-content {
        flex: 1;

        .stat-value {
          font-size: 32px;
          font-weight: 700;
          color: #333;
          line-height: 1;
          margin-bottom: 8px;
        }

        .stat-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 8px;
        }

        .stat-trend {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          font-weight: 500;

          &.up {
            color: #67c23a;
          }

          &.down {
            color: #f56c6c;
          }
        }
      }
    }
  }

  .filter-section {
    padding: 20px;
    margin-bottom: 20px;

    .filter-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .scores-list {
    padding: 24px;

    .score-text {
      font-weight: 600;
      font-size: 16px;

      &.score-excellent {
        color: #67c23a;
      }

      &.score-good {
        color: #409eff;
      }

      &.score-pass {
        color: #e6a23c;
      }

      &.score-fail {
        color: #f56c6c;
      }
    }

    .total-score {
      color: #666;
      font-size: 14px;
    }

    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }
  }

  .score-detail {
    .detail-section {
      margin-bottom: 24px;

      h3 {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #f0f0f0;
      }
    }

    .score-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;

      .stat-item {
        text-align: center;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 8px;

        .stat-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 12px;
        }

        .stat-value {
          &.score {
            font-size: 24px;
            font-weight: 700;
          }

          .question-stats {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 14px;

            .correct {
              color: #67c23a;
            }

            .wrong {
              color: #f56c6c;
            }

            .total {
              color: #333;
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  .round-scores {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mistakes-list {
    max-height: 600px;
    overflow-y: auto;

    .mistake-item {
      padding: 16px;
      margin-bottom: 16px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      background-color: #f9fafc;

      .mistake-header {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
      }

      .mistake-question {
        margin-bottom: 12px;
        padding: 12px;
        background-color: #fff;
        border-radius: 4px;
        border-left: 3px solid #409eff;

        strong {
          color: #303133;
          display: block;
          margin-bottom: 8px;
        }
      }

      .mistake-answer {
        margin-bottom: 12px;

        .answer-item {
          padding: 8px 12px;
          margin-bottom: 8px;
          border-radius: 4px;

          strong {
            display: inline-block;
            min-width: 100px;
          }

          &.correct {
            background-color: #f0f9ff;
            border-left: 3px solid #67c23a;
          }

          &.wrong {
            background-color: #fef0f0;
            border-left: 3px solid #f56c6c;
          }
        }
      }

      .mistake-analysis {
        padding: 12px;
        background-color: #fff7e6;
        border-radius: 4px;
        border-left: 3px solid #e6a23c;

        strong {
          color: #e6a23c;
          display: block;
          margin-bottom: 8px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .student-scores-container {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }

    .stats-overview {
      grid-template-columns: 1fr;
    }

    .filter-form {
      .el-form-item {
        display: block;
        margin-bottom: 16px !important;
      }
    }

    .score-stats {
      grid-template-columns: 1fr;
    }
  }
}
</style>

