<template>
  <div class="dashboard">
    <h1 class="page-title">控制台</h1>
    
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="data-card">
          <h3>总课程数</h3>
          <div class="number">{{ stats.courseCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <h3>总用户数</h3>
          <div class="number">{{ stats.userCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <h3>考试数量</h3>
          <div class="number">{{ stats.examCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <h3>教师数量</h3>
          <div class="number">{{ stats.teacherCount }}</div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户注册趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成 ECharts 等图表库 -->
            <div class="placeholder-chart">用户注册趋势图表</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>课程分类分布</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成 ECharts 等图表库 -->
            <div class="placeholder-chart">课程分类分布图表</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最新用户</span>
              <el-button type="text" @click="$router.push('/admin/users')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="latestUsers" style="width: 100%">
            <el-table-column prop="name" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="registerTime" label="注册时间" />
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最新课程</span>
              <el-button type="text" @click="$router.push('/admin/courses')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="latestCourses" style="width: 100%">
            <el-table-column prop="title" label="课程名称" />
            <el-table-column prop="categoryName" label="分类" />
            <el-table-column prop="createTime" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { User, Reading, UserFilled, Files } from '@element-plus/icons-vue'

// 模拟数据
const stats = ref({
  courseCount: 125,
  userCount: 1580,
  examCount: 45,
  teacherCount: 32
})

const latestUsers = ref([
  { name: '张三', email: 'zhangsan@example.com', registerTime: '2023-05-15 10:23:45' },
  { name: '李四', email: 'lisi@example.com', registerTime: '2023-05-14 16:42:18' },
  { name: '王五', email: 'wangwu@example.com', registerTime: '2023-05-14 09:15:30' },
  { name: '赵六', email: 'zhaoliu@example.com', registerTime: '2023-05-13 14:28:56' },
  { name: '钱七', email: 'qianqi@example.com', registerTime: '2023-05-12 11:37:22' }
])

const latestCourses = ref([
  { title: 'Vue.js 高级教程', categoryName: '前端开发', createTime: '2023-05-15 08:12:34' },
  { title: 'React 实战项目', categoryName: '前端开发', createTime: '2023-05-14 15:23:45' },
  { title: 'Node.js 服务端开发', categoryName: '后端开发', createTime: '2023-05-13 10:45:12' },
  { title: 'Python 数据分析', categoryName: '数据科学', createTime: '2023-05-12 16:32:18' },
  { title: 'Java Spring Boot 入门', categoryName: '后端开发', createTime: '2023-05-11 09:28:56' }
])

// 在实际应用中，这里应该从API获取数据
onMounted(() => {
  // fetchDashboardData()
})
</script>

<style lang="scss" scoped>
.dashboard {
  .data-card {
    text-align: center;
    padding: 20px;
    
    h3 {
      color: #666;
      margin-bottom: 10px;
    }
    
    .number {
      font-size: 24px;
      font-weight: bold;
      color: #409EFF;
    }
  }
  
  .chart-row {
    margin-bottom: 20px;
  }
  
  .chart-card, .table-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .chart-container {
    height: 300px;
    
    .placeholder-chart {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #909399;
      background-color: #f5f7fa;
      border-radius: 4px;
    }
  }
}
</style> 