<template>
  <div class="exam-center">
    <h1 class="page-title">在线考试</h1>
    
    <div class="exam-filter">
      <el-select v-model="statusFilter" placeholder="考试状态" clearable>
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      
      <el-input v-model="searchKeyword" placeholder="搜索考试名称" prefix-icon="Search" clearable />
    </div>
    
    <div class="exam-list">
      <el-table :data="filteredExams" style="width: 100%">
        <el-table-column prop="title" label="考试名称" min-width="200" />
        <el-table-column prop="startTime" label="开始时间" width="180" />
        <el-table-column prop="endTime" label="结束时间" width="180" />
        <el-table-column prop="duration" label="考试时长" width="100">
          <template #default="scope">
            {{ scope.row.duration }}分钟
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button 
              v-if="scope.row.status === 'ongoing'" 
              type="primary" 
              size="small" 
              @click="startExam(scope.row.id)"
            >
              开始考试
            </el-button>
            <el-button 
              v-else-if="scope.row.status === 'completed'" 
              type="info" 
              size="small" 
              @click="viewResult(scope.row.id)"
            >
              查看成绩
            </el-button>
            <el-button 
              v-else 
              type="info" 
              size="small" 
              disabled
            >
              {{ getActionText(scope.row.status) }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const statusFilter = ref('')
const searchKeyword = ref('')

const statusOptions = [
  { value: 'upcoming', label: '未开始' },
  { value: 'ongoing', label: '进行中' },
  { value: 'completed', label: '已完成' },
  { value: 'expired', label: '已过期' }
]

const exams = ref([
  {
    id: 1,
    title: '保密法律法规基础知识考试',
    startTime: '2023-06-01 09:00',
    endTime: '2023-06-30 18:00',
    duration: 60,
    status: 'completed'
  },
  {
    id: 2,
    title: '气象云图识别技能测试',
    startTime: '2023-07-15 10:00',
    endTime: '2023-07-20 18:00',
    duration: 90,
    status: 'expired'
  },
  {
    id: 3,
    title: '天气预报分析能力评估',
    startTime: '2023-08-01 09:00',
    endTime: '2023-09-01 18:00',
    duration: 120,
    status: 'ongoing'
  },
  {
    id: 4,
    title: '企业安全培训考核',
    startTime: '2023-09-15 09:00',
    endTime: '2023-09-20 18:00',
    duration: 45,
    status: 'upcoming'
  }
])

const filteredExams = computed(() => {
  let result = exams.value
  
  if (statusFilter.value) {
    result = result.filter(exam => exam.status === statusFilter.value)
  }
  
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(exam => 
      exam.title.toLowerCase().includes(keyword)
    )
  }
  
  return result
})

const getStatusType = (status) => {
  const types = {
    upcoming: 'info',
    ongoing: 'success',
    completed: 'primary',
    expired: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    upcoming: '未开始',
    ongoing: '进行中',
    completed: '已完成',
    expired: '已过期'
  }
  return texts[status] || '未知'
}

const getActionText = (status) => {
  const texts = {
    upcoming: '未开始',
    expired: '已过期'
  }
  return texts[status] || '未知'
}

const startExam = (examId) => {
  router.push(`/exam/${examId}`)
}

const viewResult = (examId) => {
  router.push(`/exam/${examId}/result`)
}
</script>

<style lang="scss" scoped>
.exam-center {
  max-width: 1200px;
  margin: 0 auto;
  
  .page-title {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }
  
  .exam-filter {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    
    .el-select, .el-input {
      width: 200px;
    }
  }
  
  .exam-list {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style> 