<template>
  <div class="course-list">
    <div class="page-header">
      <h2>课程管理</h2>
      <el-button type="primary" @click="handleAdd">添加课程</el-button>
    </div>
    
    <el-table :data="courses" v-loading="loading">
      <el-table-column prop="title" label="课程名称" />
      <el-table-column prop="teacher" label="授课教师" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.status === 'published' ? 'success' : 'info'">
            {{ row.status === 'published' ? '已发布' : '草稿' }}
          </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 courses = ref([
  {
    id: 1,
    title: '示例课程1',
    teacher: '张老师',
    category: '计算机科学',
    status: 'published'
  }
])

const handleAdd = () => {
  // 实现添加课程逻辑
}

const handleEdit = (row) => {
  // 实现编辑课程逻辑
}

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

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