<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="mb-4">
      <h1 class="text-primary">系统管理首页</h1>
      <p class="text-muted">欢迎管理员登录系统后台管理界面</p>
    </div>

    <!-- 数据概览卡片 -->
    <div class="row mb-4">
      <div class="col-md-3">
        <div class="card bg-primary text-white">
          <div class="card-body">
            <h5 class="card-title">总考生数</h5>
            <p class="card-text text-4xl">{{ examineeCount }}</p>
            <a href="#" class="text-white">查看详情</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card bg-success text-white">
          <div class="card-body">
            <h5 class="card-title">总题目数</h5>
            <p class="card-text text-4xl">{{ questionCount }}</p>
            <a href="#" class="text-white">查看详情</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card bg-warning text-white">
          <div class="card-body">
            <h5 class="card-title">总考试数</h5>
            <p class="card-text text-4xl">{{ examCount }}</p>
            <a href="#" class="text-white">查看详情</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card bg-info text-white">
          <div class="card-body">
            <h5 class="card-title">已完成考试</h5>
            <p class="card-text text-4xl">{{ completedExamCount }}</p>
            <a href="#" class="text-white">查看详情</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminHomeView',
  components: {
    ElButton: require('element-ui').Button,
    ElTable: require('element-ui').Table,
    ElTableColumn: require('element-ui').TableColumn
  },
  data() {
    return {
      examineeCount: 0,
      questionCount: 0,
      examCount: 0,
      completedExamCount: 0,
      recentActivities: [
        // 模拟数据
        {
          time: '2025-08-28 09:30',
          user: 'admin',
          action: '登录',
          details: '管理员成功登录系统'
        },
        {
          time: '2025-08-27 16:45',
          user: 'system',
          action: '更新',
          details: '系统题库已更新至最新版本'
        },
        {
          time: '2025-08-27 14:20',
          user: 'admin',
          action: '添加',
          details: '添加了10名新考生'
        }
      ]
    }
  },
  mounted() {
    this.fetchDashboardData()
  },
  methods: {
    async fetchDashboardData() {
      try {
        // 这里可以添加实际的数据获取逻辑
        // 暂时使用模拟数据
        console.log('获取仪表盘数据...')

        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 500))

        // 模拟数据
        this.examineeCount = 120
        this.questionCount = 500
        this.examCount = 5
        this.completedExamCount = 3
      } catch (error) {
        console.error('获取仪表盘数据失败:', error)
        this.$message.error('获取数据失败，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  height: 100%;
}

.card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card-body {
  padding: 15px;
}

.card-title {
  margin-bottom: 10px;
  font-weight: 600;
}

.text-4xl {
  font-size: 2.5rem;
  font-weight: 700;
}

/* 适配移动设备 */
@media (max-width: 768px) {
  .row > div {
    margin-bottom: 15px;
  }

  .text-4xl {
    font-size: 2rem;
  }
}
</style>