<template>
  <div class="exam-list">
    <div class="page-header">
      <h2>考试管理</h2>
      <el-button type="primary" @click="handleAdd">创建考试</el-button>
    </div>
    
    <el-table :data="exams" v-loading="loading">
      <el-table-column prop="title" label="考试名称" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)
const exams = ref([
  {
    id: 1,
    title: '期末考试',
    startTime: '2024-06-20 09:00',
    endTime: '2024-06-20 11:00',
    status: 'upcoming'
  }
])

const getStatusType = (status) => {
  const types = {
    'upcoming': 'info',
    'ongoing': 'success',
    'ended': 'warning',
    'cancelled': 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    'upcoming': '未开始',
    'ongoing': '进行中',
    'ended': '已结束',
    'cancelled': '已取消'
  }
  return texts[status] || status
}

const handleAdd = () => {
  // 实现创建考试逻辑
}

const handleEdit = (row) => {
  // 实现编辑考试逻辑
}

const handleDelete = (row) => {
  // 实现删除考试逻辑
}
</script>

<style lang="scss" scoped>
.exam-list {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style> 