<!--
  Description: 我的批改页面
  Author: BaiQi
  Created Date: 2024-7-25
-->
<template>
  <div class="course-page">
    <!-- 左侧菜单栏 -->
    <div class="left-sidebar">
      <!-- EAI平台装饰栏 -->
      <div class="platform-header">
        <div class="platform-name">EAI专业英语平台</div>
      </div>
      
      <!-- 搜索框 -->
      <div class="search-section">
        <div class="search-input-container" @click="openSearchDialog">
          <el-icon class="search-icon"><Search /></el-icon>
          <input type="text" placeholder="搜索" class="search-input" readonly />
        </div>
      </div>
      
      <!-- 菜单列表 -->
      <div class="menu-section">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-text">加载中...</div>
        </div>
        <div class="menu-item" v-for="course in courseList" :key="course.courseId">
          <div class="course-header" @click="toggleCourse(course.courseId)">
            <el-icon class="expand-icon" :class="{ 'expanded': course.expanded }">
              <ArrowDown v-if="course.expanded" />
              <ArrowRight v-else />
            </el-icon>
            <el-icon class="course-icon"><Document /></el-icon>
            <span class="course-name">{{ course.courseName }}</span>
          </div>
          
          <!-- 作业子菜单 -->
          <div class="assignment-list" v-if="course.expanded">
            <div 
              class="assignment-item" 
              v-for="assignment in course.assignments" 
              :key="assignment.assignmentId"
              :class="{ 'active': assignment.active }"
              @click="selectAssignment(assignment.assignmentId)"
            >
              <el-icon class="assignment-icon" :class="{ 'active-icon': assignment.active }">
                <Document />
              </el-icon>
              <span class="assignment-name">{{ assignment.assignmentName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="right-content">
      <!-- 当没有选中作业时显示空白状态 -->
      <div v-if="!selectedAssignment" class="empty-state">
        <div class="empty-content">
          <el-icon class="empty-icon"><Document /></el-icon>
          <div class="empty-text">请选择一个作业开始批改</div>
        </div>
      </div>
      
      <!-- 当选中作业时显示内容 -->
      <div v-else class="assignment-content">
        <!-- 右上角数据看板按钮 - 仅写作类型作业显示 -->
        <div class="top-actions" v-if="isWritingAssignment">
          <el-button type="primary" class="dashboard-button" @click="goToBehaviorDashboard">数据看板</el-button>
        </div>
        
        <!-- 统计卡片区域 -->
        <div class="stats-container">
          <div class="stats-card">
            <div class="stats-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-label">作业总人数</div>
              <div class="stats-value">{{ statsData.totalStudents }}</div>
            </div>
          </div>
          
          <div class="stats-card">
            <div class="stats-icon completed-icon">
              <el-icon><CircleCheck /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-label">已批改人数</div>
              <div class="stats-value">{{ statsData.correctedCount }}</div>
            </div>
          </div>
          
          <div class="stats-card">
            <div class="stats-icon pending-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-label">已提交未批改人数</div>
              <div class="stats-value">{{ statsData.submittedNotCorrectedCount }}</div>
            </div>
          </div>
          
          <div class="stats-card">
            <div class="stats-icon not-submitted-icon">
              <el-icon><WarningFilled /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-label">未提交人数</div>
              <div class="stats-value">{{ statsData.notSubmittedCount }}</div>
            </div>
          </div>
        </div>
        
        <div class="assignment-body">
          <!-- 课程作业标题 -->
          <div class="assignment-title-section">
            <h3 class="assignment-full-title">
              {{ selectedAssignment.courseName }}：{{ selectedAssignment.assignmentName }}
              <span class="assignment-type-badge" :class="getAssignmentTypeClass(selectedAssignment.type)">
                {{ getAssignmentTypeLabel(selectedAssignment.type) }}
              </span>
            </h3>
          </div>
          
          <!-- 搜索筛选栏 -->
          <div class="filter-section">
            <div class="filter-controls">
              <el-icon class="reset-icon" @click="resetFilters"><Refresh /></el-icon>
              <div class="search-input-wrapper">
                <input 
                  type="text" 
                  placeholder="请输入内容" 
                  class="filter-search-input" 
                  v-model="filterQuery"
                />
              </div>
              <el-select v-model="statusFilter" placeholder="状态" class="filter-select">
                <el-option label="全部" value=""></el-option>
                <el-option label="未提交" value="未提交"></el-option>
                <el-option label="已提交未批改" value="已提交未批改"></el-option>
                <el-option label="已批改" value="已批改"></el-option>
                <el-option label="补交_未批改" value="补交_未批改"></el-option>
                <el-option label="补交_已批改" value="补交_已批改"></el-option>
              </el-select>
              <el-select v-model="classFilter" placeholder="班级" class="filter-select" @change="handleClassFilterChange">
                <el-option label="全部" value=""></el-option>
                <el-option 
                  v-for="classItem in classList" 
                  :key="classItem.classId" 
                  :label="classItem.className" 
                  :value="classItem.classId.toString()"
                ></el-option>
              </el-select>
              <el-button type="primary" class="search-button">搜索</el-button>
            </div>
          </div>
          
          <!-- 学生作业表格 -->
          <div class="table-section">
            <el-table :data="filteredStudentList" class="student-table" stripe>
              <el-table-column prop="status" label="状态" min-width="140" align="left">
                <template #default="scope">
                  <span :class="getStatusClass(scope.row.status)" class="status-badge">
                    {{ statusMap[scope.row.status] || scope.row.status }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="stuName" label="学生姓名" min-width="120"></el-table-column>
              <el-table-column label="班级" min-width="140">
                <template #default="scope">
                  {{ getStudentClassName(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column prop="score" label="得分" min-width="120">
                <template #header>
                  <div class="score-header" @click="toggleSort">
                    <span>得分</span>
                    <el-icon class="sort-icon" :class="getSortIconClass()">
                      <Sort />
                    </el-icon>
                  </div>
                </template>
                <template #default="scope">
                  <span :class="getScoreClass(scope.row)" class="score-badge">
                    {{ getScoreDisplay(scope.row) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" min-width="100">
                <template #default="scope">
                  <span v-if="isLateSubmission(scope.row.status)" class="late-submission-badge">
                    补交
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="110" fixed="right">
                <template #default="scope">
                  <el-button 
                    type="primary" 
                    size="small" 
                    class="action-button"
                    :disabled="scope.row.status === 'NOT_SUBMITTED'"
                    @click="handleCorrect(scope.row)"
                  >
                    <el-icon class="correct-icon"><ZoomIn /></el-icon>
                    批改
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
          <div class="example-pagination-block">
              <el-pagination
                v-model:current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total"
                :page-count="totalPages"
                @current-change="handleCurrentChange"
              />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 搜索弹窗 -->
    <el-dialog
      v-model="searchDialogVisible"
      title="搜索课程和作业"
      :width="dialogWidth"
      :before-close="handleCloseSearchDialog"
      class="search-dialog"
    >
      <div class="search-dialog-container">
        <!-- 搜索框部分 -->
        <div class="dialog-search-section">
          <div class="dialog-search-input-container">
            <el-icon class="dialog-search-icon"><Search /></el-icon>
            <input 
              type="text" 
              placeholder="输入课程或作业名称..." 
              class="dialog-search-input" 
              v-model="searchQuery"
              @input="performSearch"
              ref="dialogSearchInput"
            />
          </div>
        </div>
        
        <!-- 搜索结果部分 -->
        <div class="search-results-section">
          <div v-if="searchResults.length === 0" class="no-results">
            <span>{{ searchQuery ? '没有找到相关结果' : '请输入搜索内容' }}</span>
          </div>
          <div v-else class="search-results-list">
            <div 
              v-for="result in searchResults" 
              :key="result.id" 
              class="search-result-item"
              @click="handleSearchResultClick(result)"
            >
              <el-icon class="result-icon" v-if="result.type === 'course'">
                <Document />
              </el-icon>
              <el-icon class="result-icon assignment-result-icon" v-else>
                <Document />
              </el-icon>
              <div class="result-content">
                <div class="result-title">{{ result.name }}</div>
                <div class="result-path" v-if="result.type === 'assignment'">
                  课程: {{ result.courseName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import useApis from "@/apis";
  import {ref, reactive, computed, onMounted, onUnmounted} from "vue";
  import {useRouter, useRoute} from "vue-router";
  import {Refresh, Search, Document, ArrowDown, ArrowRight, User, CircleCheck, WarningFilled, Sort, ZoomIn} from "@element-plus/icons-vue";
  import type {ClassDTO, StudentAssignmentStatusDTO} from "@/types/dto";
  import type {CourseVO, IAssignment} from "@/types/vo";
  import "./CoursePage.scss"
  import {useStore} from "@/store";
  const store = useStore()
  const router = useRouter()
  const route = useRoute()

  const apis = useApis()
  const selectedAssignment = ref(null)
  
  // 定义课程和作业的数据结构
  interface CourseWithAssignments {
    courseId: number;
    courseName: string;
    expanded: boolean;
    assignments: AssignmentWithStatus[];
  }
  
  interface AssignmentWithStatus {
    assignmentId: number;
    assignmentName: string;
    active: boolean;
    courseId: number;
  }
  
  // 真实数据 - 课程和作业列表
  const courseList = reactive<CourseWithAssignments[]>([])
  
  // 原始课程数据（从API获取）
  const rawCourses = reactive<CourseVO[]>([])
  
  // 原始作业数据（从API获取）
  const rawAssignments = reactive<IAssignment[]>([])
  
  // 加载状态
  const loading = ref(false)
  
  // 加载所有课程
  const loadCourses = async () => {
    try {
      loading.value = true
      // 使用正确的CourseQuery来获取所有课程
      const courseQuery = {
        courseId: null,
        teacherId: store.user.id,
        teacherPid: store.user.pid ? Number(store.user.pid) : null,
        studentId: null,
        courseName: null,
        semester: null,
      }
      const response = await apis.getAllCourse(courseQuery, 1, 1000)
      
      if (response.data.code === 200) {
        // 根据其他代码，数据可能在response.data.data.records中
        const courseData = response.data.data.records || response.data.data.content || response.data.data
        console.log('加载到的课程数据 1:', courseData)
        rawCourses.splice(0, rawCourses.length, ...courseData)
        await loadAllAssignments()
        buildCourseTree()
      }
    } catch (error) {
      console.error('加载课程失败 :', error)
    } finally {
      loading.value = false
    }
  }
  
  // 加载所有作业
  const loadAllAssignments = async () => {
    try {
      // 使用正确的AssignmentQuery来获取所有作业
      const assignmentQuery = {
        assignmentId: null,
        teacherId: store.user.id,
        courseId: null,
        assignmentName: null,
        status: null,
        type: null,
      }
      const response = await apis.getAssignmentByQuery(assignmentQuery, 1, 1000)
      
      if (response.data.code === 200) {
        // 数据可能在不同的路径中
        const assignmentData = response.data.data.records || response.data.data.content || response.data.data
        console.log('加载到的作业数据:', assignmentData)
        rawAssignments.splice(0, rawAssignments.length, ...assignmentData)
      }
    } catch (error) {
      console.error('加载作业失败:', error)
    }
  }
  
  // 构建课程树结构
  const buildCourseTree = () => {
    const courseMap = new Map<number, CourseWithAssignments>()
    
    console.log('构建课程树 - 课程数量:', rawCourses.length, '作业数量:', rawAssignments.length)
    
    // 初始化课程
    rawCourses.forEach(course => {
      courseMap.set(course.courseId, {
        courseId: course.courseId,
        courseName: course.courseName,
        expanded: false,
        assignments: []
      })
    })
    
    // 添加作业到对应课程
    rawAssignments.forEach(assignment => {
      const course = courseMap.get(assignment.courseId)
      if (course) {
        course.assignments.push({
          assignmentId: assignment.assignmentId,
          assignmentName: assignment.assignmentName,
          active: false,
          courseId: assignment.courseId
        })
      }
    })
    
    // 更新courseList
    courseList.splice(0, courseList.length, ...Array.from(courseMap.values()))
    console.log('构建完成的课程树:', courseList.length, '个课程')
  }

  // 切换课程展开/收起
  const toggleCourse = (courseId: number) => {
    const course = courseList.find(c => c.courseId === courseId)
    if (course) {
      course.expanded = !course.expanded
    }
  }
  
  // 选择作业
  const selectAssignment = async (assignmentId: number) => {
    // 清除所有作业的active状态
    courseList.forEach(course => {
      course.assignments.forEach(assignment => {
        assignment.active = false
      })
    })
    
    // 设置选中的作业为active
    courseList.forEach(course => {
      const assignment = course.assignments.find(a => a.assignmentId === assignmentId)
      if (assignment) {
        assignment.active = true
        // 从rawAssignments中获取完整的作业信息，包括type
        const fullAssignment = rawAssignments.find(a => a.assignmentId === assignmentId)
        // 设置选中的作业信息
        selectedAssignment.value = {
          assignmentId: assignment.assignmentId,
          assignmentName: assignment.assignmentName,
          courseName: course.courseName,
          courseId: course.courseId,
          type: fullAssignment?.type || ''
        }
        
        // 加载相关数据
        onAssignmentSelected({
          assignmentId: assignment.assignmentId,
          courseId: course.courseId
        })
      }
    })
  }
  
  // 搜索弹窗相关逻辑
  const searchDialogVisible = ref(false)
  const searchQuery = ref('')
  const searchResults = ref([])
  const dialogSearchInput = ref(null)
  
  // 响应式对话框宽度
  const dialogWidth = computed(() => {
    if (typeof window === 'undefined') return '50%'
    const width = window.innerWidth
    if (width <= 768) return '90%'
    if (width <= 1024) return '70%'
    if (width <= 1440) return '60%'
    return '50%'
  })
  
  // 筛选相关逻辑
  const filterQuery = ref('')
  const statusFilter = ref('')
  const classFilter = ref('')
  
  // 监听班级筛选变化
  const handleClassFilterChange = async () => {
    if (selectedAssignment.value && classFilter.value) {
      // 重新加载选中班级的学生数据
      studentList.splice(0, studentList.length)
      await loadStudentAssignmentStatus(classFilter.value, selectedAssignment.value.assignmentId.toString())
    } else if (selectedAssignment.value && !classFilter.value) {
      // 如果选择了"全部"，重新加载所有班级的数据
      await loadAllStudentAssignmentStatus(selectedAssignment.value.assignmentId)
    }
  }
  
  // 排序相关逻辑
  const sortOrder = ref(0) // 0: 原始顺序, 1: 高到低, 2: 低到高
  
  // 学生数据
  const studentList = reactive<StudentAssignmentStatusDTO[]>([])
  
  // 班级列表数据
  const classList = reactive<ClassDTO[]>([])
  
  // 统计卡片数据
  const statsData = reactive({
    totalStudents: 0,
    correctedCount: 0,
    submittedNotCorrectedCount: 0,
    notSubmittedCount: 0
  })
  
  // 学生班级映射数据（用于存储学生ID到班级名称的映射）
  const studentClassMap = reactive(new Map<number, string>())
  
  // 状态映射
  const statusMap = {
    'NOT_SUBMITTED': '未提交',
    'SUBMITTED': '已提交未批改', 
    'CORRECTED': '已批改',
    'LATE_SUBMITTED': '补交_未批改',
    'LATE_SUBMITTED_CORRECTED': '补交_已批改'
  }
  
  // 当前页码
  const currentPage = ref(1)
  // 每页显示条数
  const pageSize = 10

  // 计算筛选后的学生列表（包含分页）
  const filteredStudentList = computed(() => {
    let filtered = [...studentList]
    
    // 筛选逻辑
    if (filterQuery.value) {
      filtered = filtered.filter(student => 
        student.stuName.toLowerCase().includes(filterQuery.value.toLowerCase())
      )
    }
    
    if (statusFilter.value) {
      filtered = filtered.filter(student => statusMap[student.status] === statusFilter.value)
    }
    
    if (classFilter.value) {
      // 根据选中的班级ID重新加载数据
      // 这里可以实现按班级筛选的逻辑
      // 暂时保持原有的筛选逻辑
    }
    
    // 排序逻辑
    if (sortOrder.value === 1) {
      // 高到低排序
      filtered.sort((a, b) => {
        const scoreA = getScoreForSort(a)
        const scoreB = getScoreForSort(b)
        return scoreB - scoreA
      })
    } else if (sortOrder.value === 2) {
      // 低到高排序
      filtered.sort((a, b) => {
        const scoreA = getScoreForSort(a)
        const scoreB = getScoreForSort(b)
        return scoreA - scoreB
      })
    }
    // sortOrder.value === 0 时保持原始顺序
    
    // 分页逻辑
    const startIndex = (currentPage.value - 1) * pageSize
    const endIndex = startIndex + pageSize
    return filtered.slice(startIndex, endIndex)
  })

  // 单独的计算属性来获取总页数
  const totalPages = computed(() => {
    let filtered = [...studentList]
    
    if (filterQuery.value) {
      filtered = filtered.filter(student => 
        student.stuName.toLowerCase().includes(filterQuery.value.toLowerCase())
      )
    }
    
    if (statusFilter.value) {
      filtered = filtered.filter(student => statusMap[student.status] === statusFilter.value)
    }
    
    if (classFilter.value) {
      // 根据选中的班级ID重新加载数据
      // 这里可以实现按班级筛选的逻辑
      // 暂时保持原有的筛选逻辑
    }
    
    return Math.ceil(filtered.length / pageSize)
  })



  // 总条目数
  const total = computed(() => {
    let filtered = [...studentList]
    if (filterQuery.value) {
      filtered = filtered.filter(student => 
        student.stuName.toLowerCase().includes(filterQuery.value.toLowerCase())
      )
    }
    if (statusFilter.value) {
      filtered = filtered.filter(student => statusMap[student.status] === statusFilter.value)
    }
    if (classFilter.value) {
      // 根据选中的班级ID重新加载数据
      // 这里可以实现按班级筛选的逻辑
      // 暂时保持原有的筛选逻辑
    }
    return filtered.length
  })
  
  // 重置筛选条件
  const resetFilters = () => {
    filterQuery.value = ''
    statusFilter.value = ''
    classFilter.value = ''
    sortOrder.value = 0
    currentPage.value = 1 // 重置页码
    
    // 重新加载所有数据并更新统计
    if (selectedAssignment.value) {
      loadAllStudentAssignmentStatus(selectedAssignment.value.assignmentId)
    }
  }

  // 处理页码改变
  const handleCurrentChange = (val: number) => {
    currentPage.value = val
  }
  
  // 获取用于排序的分数值
  const getScoreForSort = (student: StudentAssignmentStatusDTO) => {
    if ((student.status === 'CORRECTED' || student.status === 'LATE_SUBMITTED_CORRECTED') && student.score !== null) {
      return student.score
    } else if (student.status === 'SUBMITTED' || student.status === 'LATE_SUBMITTED') {
      return -1 // 未批改排在未提交前面
    } else {
      return -2 // 未提交排在最后
    }
  }
  
  // 切换排序状态
  const toggleSort = () => {
    sortOrder.value = (sortOrder.value + 1) % 3
  }
  
  // 获取排序图标样式
  const getSortIconClass = () => {
    return {
      'sort-asc': sortOrder.value === 2,
      'sort-desc': sortOrder.value === 1,
      'sort-default': sortOrder.value === 0
    }
  }
  
  // 获取状态样式类
  const getStatusClass = (status: string) => {
    const mappedStatus = statusMap[status] || status
    return `status-${mappedStatus.replace(/[^a-zA-Z0-9]/g, '')}`
  }
  
  // 获取分数样式类
  const getScoreClass = (row: StudentAssignmentStatusDTO) => {
    if (row.status === 'NOT_SUBMITTED') return 'score-not-submitted'
    if (row.status === 'SUBMITTED' || row.status === 'LATE_SUBMITTED') return 'score-not-graded'
    if ((row.status === 'CORRECTED' || row.status === 'LATE_SUBMITTED_CORRECTED') && row.score !== null) {
      return row.score < 60 ? 'score-low' : 'score-high'
    }
    return ''
  }
  
  // 获取分数显示内容
  const getScoreDisplay = (row: StudentAssignmentStatusDTO) => {
    if (row.status === 'NOT_SUBMITTED') return '未提交'
    if (row.status === 'SUBMITTED' || row.status === 'LATE_SUBMITTED') return '未批改'
    if (row.status === 'CORRECTED' || row.status === 'LATE_SUBMITTED_CORRECTED') {
      return row.score !== null ? row.score : '未批改'
    }
    return '未批改'
  }
  
  // 判断是否为补交状态
  const isLateSubmission = (status: string) => {
    return status === 'LATE_SUBMITTED' || status === 'LATE_SUBMITTED_CORRECTED'
  }
  
  // 获取作业类型标签文本
  const getAssignmentTypeLabel = (type: string) => {
    if (!type) return ''
    if (type === 'AI_SPEAKING' || type === 'AI口语') return 'AI口语'
    if (type === 'WRITING' || type === '写作') return '写作'
    return type
  }
  
  // 获取作业类型标签样式
  const getAssignmentTypeClass = (type: string) => {
    if (!type) return ''
    if (type === 'AI_SPEAKING' || type === 'AI口语') return 'type-ai-speaking'
    if (type === 'WRITING' || type === '写作') return 'type-writing'
    return ''
  }
  
  // 判断当前选中的作业是否为写作类型
  const isWritingAssignment = computed(() => {
    if (!selectedAssignment.value) return false
    const type = selectedAssignment.value.type
    return type === 'WRITING' || type === '写作'
  })
  
  // 跳转到行为数据分析页面
  const goToBehaviorDashboard = () => {
    if (selectedAssignment.value) {
      router.push({
        path: '/home/behavior/main',
        query: {
          courseId: selectedAssignment.value.courseId,
          assignmentId: selectedAssignment.value.assignmentId,
          assignmentName: selectedAssignment.value.assignmentName
        }
      })
    }
  }
  
  // 处理批改操作
  const handleCorrect = (row: StudentAssignmentStatusDTO) => {
    console.log('批改学生作业:', row)
    
    if (selectedAssignment.value) {
      const assignmentType = selectedAssignment.value.type
      
      // 根据作业类型跳转到不同的批改页面
      if (assignmentType === 'AI_SPEAKING' || assignmentType === 'AI口语') {
        // 跳转到口语作业批改页面
        router.push({
          path: `/home/assignment/${selectedAssignment.value.assignmentId}/airecord`,
          query: {
            userId: row.studentId.toString(),
            assignmentId: selectedAssignment.value.assignmentId.toString(),
            assignmentName: selectedAssignment.value.assignmentName
          }
        })
      } else {
        // 跳转到写作作业批改页面（默认）
        router.push({
          path: `/home/assignment/${selectedAssignment.value.assignmentId}/correct`,
          query: {
            studentId: row.studentId.toString()
          }
        })
      }
    }
  }
  
  // 加载班级列表
  const loadClassList = async (courseId: number) => {
    try {
      const response = await apis.getClassesByCourse(courseId)
      if (response.data.code === 200) {
        classList.splice(0, classList.length, ...response.data.data)
      }
    } catch (error) {
      console.error('加载班级列表失败:', error)
    }
  }
  
  // 加载学生作业状态
  const loadStudentAssignmentStatus = async (classId: string, assignmentId: string) => {
    try {
      const response = await apis.getAssignmentStatusByClass(classId, assignmentId)
      if (response.data.code === 200) {
        // 获取班级名称
        const classItem = classList.find(c => c.classId.toString() === classId)
        const className = classItem ? classItem.className : '未知班级'
        // console.log(response.data.data)
        // 为每个学生建立班级映射关系
        response.data.data.forEach((student: StudentAssignmentStatusDTO) => {
          studentClassMap.set(student.studentId, className)
        })
        
        // 追加数据而不是替换
        studentList.push(...response.data.data)
      }
    } catch (error) {
      console.error('加载学生作业状态失败:', error)
    }
  }
  
  // 当选择作业时加载相关数据
  const onAssignmentSelected = async (assignment: any) => {
    if (assignment && assignment.courseId) {
      // 首先加载班级列表
      await loadClassList(assignment.courseId)
      
      // 加载所有班级的学生作业状态
      if (classList.length > 0) {
        await loadAllStudentAssignmentStatus(assignment.assignmentId)
      }
    }
  }
  
  // 加载所有班级的学生作业状态
  const loadAllStudentAssignmentStatus = async (assignmentId: number) => {
    try {
      // 清空现有学生数据
      studentList.splice(0, studentList.length)
      
      // 遍历所有班级，加载每个班级的学生数据
      for (const classItem of classList) {
        await loadStudentAssignmentStatus(classItem.classId.toString(), assignmentId.toString())
      }
      
      // 更新统计数据
      updateStatsData()
    } catch (error) {
      console.error('加载所有学生作业状态失败:', error)
    }
  }
  
  // 获取学生班级名称
  const getStudentClassName = (student: StudentAssignmentStatusDTO) => {
    // 由于StudentAssignmentStatusDTO中没有班级信息，我们需要通过其他方式获取
    // 这里暂时返回一个默认值，实际项目中可能需要通过API获取学生班级信息
    return studentClassMap.get(student.studentId) || '未知班级'
  }
  
  // 更新统计数据
  const updateStatsData = () => {
    console.log(studentList)
    const total = studentList.length
    const corrected = studentList.filter(student => 
      student.status === 'CORRECTED' || student.status === 'LATE_SUBMITTED_CORRECTED'
    ).length
    const submittedNotCorrected = studentList.filter(student => 
      student.status === 'SUBMITTED' || student.status === 'LATE_SUBMITTED'
    ).length
    const notSubmitted = studentList.filter(student => student.status === 'NOT_SUBMITTED').length
    
    statsData.totalStudents = total
    statsData.correctedCount = corrected
    statsData.submittedNotCorrectedCount = submittedNotCorrected
    statsData.notSubmittedCount = notSubmitted
  }
  

  
  const openSearchDialog = () => {
    searchDialogVisible.value = true
    // 延迟聚焦，确保对话框渲染完成
    setTimeout(() => {
      if (dialogSearchInput.value) {
        dialogSearchInput.value.focus()
      }
    }, 100)
  }
  
  const handleCloseSearchDialog = (done) => {
    searchQuery.value = ''
    searchResults.value = []
    done()
  }
  
  const performSearch = () => {
    const query = searchQuery.value.trim().toLowerCase()
    if (!query) {
      searchResults.value = []
      return
    }
    
    const results = []
    
    // 搜索课程和作业
    courseList.forEach(course => {
      // 搜索课程
      if (course.courseName.toLowerCase().includes(query)) {
        results.push({
          id: course.courseId,
          name: course.courseName,
          type: 'course'
        })
      }
      
      // 搜索作业
      course.assignments.forEach(assignment => {
        if (assignment.assignmentName.toLowerCase().includes(query)) {
          results.push({
            id: assignment.assignmentId,
            name: assignment.assignmentName,
            courseName: course.courseName,
            type: 'assignment'
          })
        }
      })
    })
    
    searchResults.value = results
  }
  
  const handleSearchResultClick = (result) => {
    if (result.type === 'course') {
      // 展开对应的课程
      const course = courseList.find(c => c.courseId === result.id)
      if (course) {
        course.expanded = true
      }
    } else {
      // 选中对应的作业并展开对应课程
      courseList.forEach(course => {
        const assignment = course.assignments.find(a => a.assignmentId === result.id)
        if (assignment) {
          course.expanded = true
        }
      })
      selectAssignment(result.id)
    }
    // 关闭弹窗
    searchDialogVisible.value = false
    searchQuery.value = ''
    searchResults.value = []
  }
  
  // 自动选中课程和作业的函数
  const autoSelectFromRoute = () => {
    const courseIdFromRoute = route.query.courseId
    const assignmentIdFromRoute = route.query.assignmentId
    const fromCorrect = route.query.fromCorrect
    
    if (fromCorrect && courseIdFromRoute && assignmentIdFromRoute) {
      const courseId = Number(courseIdFromRoute)
      const assignmentId = Number(assignmentIdFromRoute)
      
      console.log('准备自动选中:', { courseId, assignmentId })
      
      // 使用递归检查数据是否加载完成
      const checkAndSelect = (attempts = 0) => {
        if (attempts > 20) { // 最多尝试20次，避免无限循环
          console.warn('自动选中超时，数据可能未加载完成')
          return
        }
        
        const course = courseList.find(c => c.courseId === courseId)
        if (course && course.assignments.length > 0) {
          // 数据已加载，执行选中
          course.expanded = true
          
          // 确保作业存在
          const assignment = course.assignments.find(a => a.assignmentId === assignmentId)
          if (assignment) {
            selectAssignment(assignmentId)
            console.log('自动选中成功:', { courseName: course.courseName, assignmentName: assignment.assignmentName })
            
            // 清理URL参数，避免刷新时重复执行
            router.replace({
              name: 'myCorrectWithCourse'
            })
          } else {
            console.warn('未找到指定的作业:', assignmentId)
          }
        } else {
          // 数据未加载完成，继续等待
          setTimeout(() => checkAndSelect(attempts + 1), 200)
        }
      }
      
      checkAndSelect()
    }
  }
  
  // 窗口尺寸变化监听
  const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920)
  
  const handleResize = () => {
    windowWidth.value = window.innerWidth
  }
  
  // 组件挂载时加载数据
  onMounted(async () => {
    await loadCourses()
    // 检查是否需要自动选中
    autoSelectFromRoute()
    
    // 添加窗口大小变化监听
    if (typeof window !== 'undefined') {
      window.addEventListener('resize', handleResize)
    }
  })
  
  // 组件卸载时移除监听
  onUnmounted(() => {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', handleResize)
    }
  })
</script>

<script lang="ts">
export default {
  name: "CoursePage"
}
</script>
<style scoped>
/* 响应式CSS变量 */
:root {
  --sidebar-width: 250px;
  --content-padding: 1.25rem;
  --card-padding: 1rem;
  --base-font-size: 0.875rem;
}

.course-page {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: "Noto Sans SC", sans-serif;
  overflow-x: hidden; /* 防止水平滚动 */
}

.left-sidebar {
  width: 16.67%; /* 响应式宽度 */
  min-width: 200px;
  max-width: 280px;
  background: linear-gradient(180deg, #89CDF1 0%, #1890FF 100%);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex-shrink: 0;  /* 防止侧边栏被压缩 */
}

/* 平板设备 */
@media (max-width: 1440px) {
  .left-sidebar {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
  }
}

/* 小屏幕 */
@media (max-width: 1024px) {
  .left-sidebar {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }
}

/* 超大屏幕优化 */
@media (min-width: 2560px) {
  .left-sidebar {
    width: 300px;
    min-width: 280px;
    max-width: 350px;
  }
  
  .platform-name {
    font-size: 1.5rem;
  }
  
  .course-header {
    font-size: 1rem;
    padding: 1.125rem 1.875rem;
  }
  
  .assignment-item {
    font-size: 0.9375rem;
    padding: 0.875rem 1.875rem 0.875rem 3.5rem;
  }
}

.platform-header {
  height: 60px;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
}

.platform-name {
  color: white;
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  font-family: "Noto Sans SC", sans-serif;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .platform-header {
    height: 56px;
    padding: 0 1rem;
  }
  
  .platform-name {
    font-size: 1.125rem; /* 18px */
  }
}

.search-section {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
}

@media (max-width: 1024px) {
  .search-section {
    padding: 0.75rem 1rem;
  }
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Noto Sans SC", sans-serif;
  cursor: pointer;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem; /* 16px */
}

@media (max-width: 1024px) {
  .search-icon {
    left: 0.625rem;
    font-size: 0.875rem; /* 14px */
  }
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 0.75rem 0 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-size: 0.875rem; /* 14px */
  outline: none;
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  font-family: "Noto Sans SC", sans-serif;
  cursor: pointer;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1024px) {
  .search-input {
    height: 32px;
    font-size: 0.8125rem; /* 13px */
    padding: 0 0.625rem 0 2rem;
  }
}

.menu-section {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;  /* 防止水平滚动 */
  padding: 0 0;
  height: calc(100vh - 112px);
  width: 100%;  /* 确保宽度不超过父容器 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Webkit浏览器滚动条美化 */
.menu-section::-webkit-scrollbar {
  width: 6px;
}

.menu-section::-webkit-scrollbar-track {
  background: transparent;
}

.menu-section::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.menu-section::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.menu-item {
  margin-bottom: 0px;
}

.course-header {
  display: flex;
  align-items: center;
  padding: 0.9375rem 1.5625rem; /* 15px 25px */
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Noto Sans SC", sans-serif;
  background-color: transparent;
  color: white;
  border-left: 4px solid transparent;
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
}

@media (max-width: 1024px) {
  .course-header {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem; /* 13px */
  }
}

.course-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-left-color: white;
}

.expand-icon {
  font-size: 12px;
  color: white;
  margin-right: 8px;
  transition: transform 0.2s;
}

.expand-icon.expanded {
  transform: rotate(0deg);
}

.course-icon {
  font-size: 16px;
  color: white;
  margin-right: 8px;
}

.course-name {
  font-size: 14px;
  color: white;
  font-weight: 500;
  font-family: "Noto Sans SC", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignment-list {
  background-color: transparent;
}

.assignment-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5625rem 0.75rem 3rem; /* 12px 25px 12px 48px */
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Noto Sans SC", sans-serif;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;  /* 防止文本换行 */
  overflow: hidden;     /* 隐藏超出部分 */
  text-overflow: ellipsis;  /* 显示省略号 */
  border-left: 4px solid transparent;
  font-size: 0.8125rem; /* 13px */
}

@media (max-width: 1024px) {
  .assignment-item {
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    font-size: 0.75rem; /* 12px */
  }
}

.assignment-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-left-color: white;
  color: white;
}

.assignment-item.active {
  background-color: rgba(255, 255, 255, 0.2);
  border-left-color: white;
  color: white;
  font-weight: 600;
}

.assignment-icon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-right: 8px;
}

.assignment-icon.active-icon {
  color: white;
}

.assignment-name {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  font-family: "Noto Sans SC", sans-serif;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignment-item.active .assignment-name {
  color: white;
  font-weight: 600;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.loading-text {
  color: white;
  font-size: 14px;
  font-family: "Noto Sans SC", sans-serif;
}

.right-content {
  flex: 1;
  background-color: white;
  padding: 1.25rem; /* 20px */
  min-height: 100vh;
  overflow-x: auto; /* 允许水平滚动以适应小屏幕 */
}

/* 响应式内边距 */
@media (max-width: 1440px) {
  .right-content {
    padding: 1rem; /* 16px */
  }
}

@media (max-width: 1024px) {
  .right-content {
    padding: 0.75rem; /* 12px */
  }
}

/* 空白状态样式 */
.empty-state {
  height: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.empty-content {
  text-align: center;
  color: #999;
}

.empty-icon {
  font-size: 4rem; /* 64px */
  color: #d9d9d9;
  margin-bottom: 1rem;
}

.empty-text {
  font-size: 1rem; /* 16px */
  font-family: "Noto Sans SC", sans-serif;
}

@media (max-width: 1024px) {
  .empty-state {
    min-height: 300px;
    padding: 1.5rem;
  }
  
  .empty-icon {
    font-size: 3rem; /* 48px */
  }
  
  .empty-text {
    font-size: 0.875rem; /* 14px */
  }
}

  /* 作业内容样式 */
  .assignment-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* 右上角按钮样式 */
  .top-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.625rem;
  }
  
  .dashboard-button {
    background-color: #4A90C4;
    border-color: #4A90C4;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem; /* 12px */
    font-family: "Noto Sans SC", sans-serif;
  }
  
  @media (max-width: 1024px) {
    .dashboard-button {
      font-size: 0.6875rem; /* 11px */
      padding: 0.3rem 0.6rem;
    }
  }
  
  /* 统计卡片区域样式 */
  .stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0;
  }
  
  .stats-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 0; /* 允许缩小 */
  }
  
  /* 响应式统计卡片 */
  @media (max-width: 1440px) {
    .stats-container {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    
    .stats-card {
      padding: 0.875rem;
    }
  }
  
  @media (max-width: 1024px) {
    .stats-container {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
    
    .stats-card {
      padding: 0.75rem;
    }
  }
  
  @media (max-width: 768px) {
    .stats-container {
      grid-template-columns: 1fr;
    }
  }
  
  /* 超大屏幕统计卡片优化 */
  @media (min-width: 2560px) {
    .stats-container {
      gap: 1.5rem;
    }
    
    .stats-card {
      padding: 1.25rem;
    }
  }
  
  .stats-icon {
    width: 48px;
    height: 48px;
    min-width: 48px; /* 防止压缩 */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    font-size: 1.5rem;
    color: white;
  }
  
  @media (max-width: 1024px) {
    .stats-icon {
      width: 40px;
      height: 40px;
      min-width: 40px;
      font-size: 1.25rem;
      margin-right: 0.5rem;
    }
  }
  
  @media (min-width: 2560px) {
    .stats-icon {
      width: 56px;
      height: 56px;
      min-width: 56px;
      font-size: 1.75rem;
      margin-right: 1rem;
    }
  }
  
  .user-icon {
    background-color: #70BBD9;
  }
  
  .completed-icon {
    background-color: #90D7B4;
  }
  
  .pending-icon {
    background-color: #B8B8B8;
  }
  
  .not-submitted-icon {
    background-color: #F5A658;
  }
  
  .stats-content {
    flex: 1;
  }
  
  .stats-label {
    font-size: 0.875rem; /* 14px */
    color: #666;
    margin-bottom: 0.25rem;
    font-family: "Noto Sans SC", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .stats-value {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    color: #333;
    font-family: "Noto Sans SC", sans-serif;
  }
  
  @media (max-width: 1440px) {
    .stats-label {
      font-size: 0.8125rem; /* 13px */
    }
    
    .stats-value {
      font-size: 1.375rem; /* 22px */
    }
  }
  
  @media (max-width: 1024px) {
    .stats-label {
      font-size: 0.75rem; /* 12px */
    }
    
    .stats-value {
      font-size: 1.25rem; /* 20px */
    }
  }
  
  /* 超大屏幕字体优化 */
  @media (min-width: 2560px) {
    .stats-label {
      font-size: 1rem; /* 16px */
    }
    
    .stats-value {
      font-size: 1.75rem; /* 28px */
    }
  }
  

  
  .assignment-body {
    flex: 1;
    padding: 1.25rem 0;
  }
  
  @media (max-width: 1024px) {
    .assignment-body {
      padding: 1rem 0;
    }
  }
  
  /* 作业标题区域 */
  .assignment-title-section {
    margin-bottom: 1.25rem;
  }
  
  .assignment-full-title {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #333;
    margin: 0;
    font-family: "Noto Sans SC", sans-serif;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap; /* 允许标签换行 */
  }
  
  @media (max-width: 1440px) {
    .assignment-full-title {
      font-size: 1rem; /* 16px */
    }
  }
  
  @media (max-width: 1024px) {
    .assignment-title-section {
      margin-bottom: 1rem;
    }
    
    .assignment-full-title {
      font-size: 0.9375rem; /* 15px */
      gap: 0.5rem;
    }
  }
  
  @media (min-width: 2560px) {
    .assignment-full-title {
      font-size: 1.375rem; /* 22px */
      gap: 1rem;
    }
  }
  
  /* 通用响应式工具类 */
  * {
    box-sizing: border-box;
  }
  
  /* 平滑过渡 */
  .left-sidebar,
  .right-content,
  .stats-card,
  .filter-controls,
  .student-table {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 作业类型标签样式 */
  .assignment-type-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    font-family: "Noto Sans SC", sans-serif;
    white-space: nowrap;
  }
  
  @media (max-width: 1024px) {
    .assignment-type-badge {
      padding: 0.2rem 0.5rem;
      font-size: 0.6875rem; /* 11px */
    }
  }
  
  .type-ai-speaking {
    background-color: #70BBD9;
    color: white;
  }
  
  .type-writing {
    background-color: #7ADBB0;
    color: white;
  }
  
  /* 筛选区域样式 */
  .filter-section {
    margin-bottom: 1.25rem;
  }
  
  .filter-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap; /* 允许换行 */
  }
  
  @media (max-width: 1024px) {
    .filter-controls {
      gap: 0.5rem;
    }
  }
  
  .reset-icon {
    font-size: 1.125rem; /* 18px */
    color: #666;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
  }
  
  .reset-icon:hover {
    background-color: #f5f5f5;
  }
  
  @media (max-width: 1024px) {
    .reset-icon {
      font-size: 1rem;
      padding: 0.375rem;
    }
  }
  
  .search-input-wrapper {
    flex: 1 1 auto;
    min-width: 150px;
    max-width: 300px;
  }
  
  .filter-search-input {
    width: 100%;
    height: 32px;
    padding: 0 0.75rem;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 0.875rem;
    outline: none;
    font-family: "Noto Sans SC", sans-serif;
  }
  
  .filter-search-input:focus {
    border-color: #4A90C4;
  }
  
  .filter-select {
    width: 120px;
    flex-shrink: 0;
  }
  
  @media (max-width: 1024px) {
    .search-input-wrapper {
      min-width: 120px;
      max-width: 200px;
    }
    
    .filter-select {
      width: 100px;
    }
  }
  
  @media (max-width: 768px) {
    .search-input-wrapper {
      flex: 1 1 100%;
      max-width: 100%;
    }
    
    .filter-select {
      flex: 1 1 calc(50% - 0.25rem);
      min-width: 100px;
    }
  }
  
  .search-button {
    background-color: #4A90C4;
    border-color: #4A90C4;
    font-family: "Noto Sans SC", sans-serif;
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  @media (max-width: 768px) {
    .search-button {
      flex: 1 1 auto;
      width: 100%;
    }
  }
  
  /* 表格区域样式 */
  .table-section {
    margin-bottom: 1.25rem;
    overflow-x: auto; /* 小屏幕允许横向滚动 */
  }
  
  .student-table {
    width: 100%;
    min-width: 730px; /* 最小宽度确保表格不会过度压缩 */
    font-family: "Noto Sans SC", sans-serif;
  }
  
  @media (max-width: 1024px) {
    .table-section {
      margin-bottom: 1rem;
    }
    
    .student-table {
      min-width: 650px;
    }
  }
  
  /* 超大屏幕表格优化 */
  @media (min-width: 2560px) {
    .student-table {
      font-size: 1rem;
    }
  }
  
  /* 状态标签样式 */
  .status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    display: inline-block;
    max-width: 100%;
    text-align: left;
    font-family: "Noto Sans SC", sans-serif;
    white-space: nowrap;
  }
  
  @media (max-width: 1024px) {
    .status-badge {
      font-size: 0.6875rem; /* 11px */
      padding: 0.2rem 0.4rem;
    }
  }
  
  /* 状态列单元格左对齐 */
  .student-table .el-table__cell {
    text-align: left !important;
  }
  
  .student-table .el-table__header-wrapper .el-table__cell {
    text-align: left !important;
  }
  
  .status-未提交 {
    background-color: #F4A261;
    color: white;
  }
  
  .status-已提交未批改 {
    background-color: #D9D9D9;
    color: #666;
  }
  
  .status-已批改 {
    background-color: #7ADBB0;
    color: white;
  }
  
  .status-补交未批改 {
    background-color: #F2A947;
    color: white;
  }
  
  .status-补交已批改 {
    background-color: #52C41A;
    color: white;
  }
  
  /* 分数标签样式 */
  .score-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    display: inline-block;
    min-width: 60px;
    text-align: center;
    font-family: "Noto Sans SC", sans-serif;
  }
  
  @media (max-width: 1024px) {
    .score-badge {
      font-size: 0.6875rem; /* 11px */
      min-width: 50px;
      padding: 0.2rem 0.4rem;
    }
  }
  
  .score-not-submitted {
    background-color: #F4A261;
    color: white;
  }
  
  .score-not-graded {
    background-color: #D9D9D9;
    color: #666;
  }
  
  .score-low {
    background-color: #F0C05A;
    color: white;
  }
  
  .score-high {
    background-color: #7ADBB0;
    color: white;
  }
  
  /* 操作按钮样式 */
  .action-button {
    min-width: 60px;
    height: 30px;
    border-radius: 4px;
    background-color: #4A90C4;
    border-color: #4A90C4;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem; /* 13px */
    font-family: "Noto Sans SC", sans-serif;
  }
  
  /* 禁用状态的按钮样式 */
  .action-button:disabled {
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    color: #bfbfbf;
    cursor: not-allowed;
  }
  
  .action-button:disabled .correct-icon {
    color: #bfbfbf;
  }

  /* 批改按钮图标样式 */
  .correct-icon {
    font-size: 1rem; /* 16px */
    margin-right: 0.25rem;
  }
  
  @media (max-width: 1024px) {
    .action-button {
      min-width: 56px;
      height: 28px;
      font-size: 0.75rem; /* 12px */
      padding: 0.2rem 0.4rem;
    }
    
    .correct-icon {
      font-size: 0.875rem; /* 14px */
    }
  }
  
  /* 排序头部样式 */
  .score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-family: "Noto Sans SC", sans-serif;
  }
  
  .sort-icon {
    font-size: 14px;
    color: #999;
    transition: color 0.2s;
  }
  
  .sort-icon.sort-asc {
    color: #4A90C4;
    transform: rotate(0deg);
  }
  
  .sort-icon.sort-desc {
    color: #4A90C4;
    transform: rotate(180deg);
  }
  
  .sort-icon.sort-default {
    color: #999;
  }
  
  .score-header:hover .sort-icon {
    color: #4A90C4;
  }
  
  /* 补交标识样式 */
  .late-submission-badge {
    padding: 0.25rem 0.5rem;
    background-color: #C45C4A;
    color: white;
    border-radius: 4px;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    display: inline-block;
    min-width: 60px;
    text-align: center;
    font-family: "Noto Sans SC", sans-serif;
  }
  
  @media (max-width: 1024px) {
    .late-submission-badge {
      font-size: 0.6875rem; /* 11px */
      min-width: 50px;
      padding: 0.2rem 0.4rem;
    }
  }
  


/* 搜索弹窗样式 */
.search-dialog-container {
  display: flex;
  flex-direction: column;
  height: 60vh;
  min-height: 300px;
  max-height: 600px;
}

.dialog-search-section {
  padding-bottom: 1rem;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .search-dialog-container {
    height: 50vh;
    min-height: 250px;
  }
  
  .dialog-search-section {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
  }
}

.dialog-search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Noto Sans SC", sans-serif;
}

.dialog-search-icon {
  position: absolute;
  left: 12px;
  color: #999;
  font-size: 18px;
}

.dialog-search-input {
  width: 100%;
  height: 40px;
  padding: 0 0.75rem 0 2.5rem;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 1rem; /* 16px */
  outline: none;
  background-color: #FFFFFF;
  font-family: "Noto Sans SC", sans-serif;
}

.dialog-search-input:focus {
  border-color: #1890ff;
}

@media (max-width: 1024px) {
  .dialog-search-input {
    height: 36px;
    font-size: 0.875rem; /* 14px */
    padding: 0 0.625rem 0 2.25rem;
  }
  
  .dialog-search-icon {
    font-size: 16px;
  }
}

.search-results-section {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}

/* Webkit浏览器滚动条美化 */
.search-results-section::-webkit-scrollbar {
  width: 6px;
}

.search-results-section::-webkit-scrollbar-track {
  background: transparent;
}

.search-results-section::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.search-results-section::-webkit-scrollbar-thumb:hover {
  background: #bfbfbf;
}

.no-results {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.875rem; /* 14px */
  font-family: "Noto Sans SC", sans-serif;
  padding: 2rem;
  text-align: center;
}

@media (max-width: 1024px) {
  .no-results {
    font-size: 0.8125rem; /* 13px */
    padding: 1.5rem;
  }
}

.search-results-list {
  height: 100%;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
  transition: background-color 0.2s;
  font-family: "Noto Sans SC", sans-serif;
}

.search-result-item:hover {
  background-color: #F0F2F5;
}

.result-icon {
  font-size: 1.125rem; /* 18px */
  color: #606266;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.assignment-result-icon {
  font-size: 1rem; /* 16px */
  margin-left: 1rem;
}

.result-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 允许文本截断 */
}

.result-title {
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: #606266;
  font-family: "Noto Sans SC", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-path {
  font-size: 0.75rem; /* 12px */
  color: #999;
  margin-top: 0.25rem;
  font-family: "Noto Sans SC", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .search-result-item {
    padding: 0.625rem 0.75rem;
  }
  
  .result-icon {
    font-size: 1rem;
    margin-right: 0.5rem;
  }
  
  .result-title {
    font-size: 0.8125rem; /* 13px */
  }
  
  .result-path {
    font-size: 0.6875rem; /* 11px */
  }
}

.example-pagination-block {
  margin-top: 0.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* 响应式分页 */
@media (max-width: 768px) {
  .example-pagination-block :deep(.el-pagination) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .example-pagination-block :deep(.el-pager) {
    margin: 0.25rem 0;
  }
}

/* 打印样式优化 */
@media print {
  .left-sidebar {
    display: none;
  }
  
  .filter-section,
  .top-actions,
  .action-button {
    display: none;
  }
  
  .right-content {
    width: 100%;
    padding: 0;
  }
  
  .stats-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .course-page {
    border: 2px solid currentColor;
  }
  
  .stats-card {
    border: 2px solid currentColor;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
</style>

