<template>
  <div class="exam-workbench">
    <!-- 数据统计 -->
    <div class="statistics-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa-solid fa-file-lines"></i>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ statistics.examCount }}</div>
              <div class="stat-label">考试总数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa-solid fa-pen"></i>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ statistics.practiceCount }}</div>
              <div class="stat-label">练习总数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa-solid fa-book"></i>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ statistics.courseCount }}</div>
              <div class="stat-label">课程总数</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="fa-solid fa-users"></i>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ statistics.studentCount }}</div>
              <div class="stat-label">考生总数</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 快捷功能 -->
    <div class="quick-actions">
      <h3 class="section-title">快捷功能</h3>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="action-card" @click="handleCreateExam">
            <div class="action-icon">
              <i class="fa-solid fa-file-circle-plus"></i>
            </div>
            <div class="action-label">创建考试</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="action-card" @click="handleCreatePractice">
            <div class="action-icon">
              <i class="fa-solid fa-pen-to-square"></i>
            </div>
            <div class="action-label">创建练习</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="action-card" @click="handleCreateCourse">
            <div class="action-icon">
              <i class="fa-solid fa-book-open"></i>
            </div>
            <div class="action-label">创建课程</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="action-card" @click="handleBatchImport">
            <div class="action-icon">
              <i class="fa-solid fa-file-import"></i>
            </div>
            <div class="action-label">批量导题</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="action-card" @click="handleStudentManage">
            <div class="action-icon">
              <i class="fa-solid fa-user-group"></i>
            </div>
            <div class="action-label">考生管理</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="action-card" @click="handleQuestionBank">
            <div class="action-icon">
              <i class="fa-solid fa-database"></i>
            </div>
            <div class="action-label">试题库</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();

const statistics = ref({
  examCount: 0,
  practiceCount: 0,
  courseCount: 0,
  studentCount: 0
});

const handleCreateExam = () => {
  router.push('/apps/exams/exam');
};

const handleCreatePractice = () => {
  ElMessage.info('创建练习功能开发中');
};

const handleCreateCourse = () => {
  ElMessage.info('创建课程功能开发中');
};

const handleBatchImport = () => {
  ElMessage.info('批量导题功能开发中');
};

const handleStudentManage = () => {
  ElMessage.info('考生管理功能开发中');
};

const handleQuestionBank = () => {
  ElMessage.info('试题库功能开发中');
};

const fetchStatistics = async () => {
  try {
    // TODO: 调用API获取统计数据
    statistics.value = {
      examCount: 0,
      practiceCount: 0,
      courseCount: 0,
      studentCount: 0
    };
  } catch (error) {
    console.error('获取统计数据失败', error);
  }
};

onMounted(() => {
  fetchStatistics();
});
</script>

<style lang="less" scoped>
.exam-workbench {
  padding: 20px;
  
  .statistics-section {
    margin-bottom: 30px;
    
    .stat-card {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      }
      
      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        
        i {
          font-size: 28px;
          color: #fff;
        }
      }
      
      .stat-content {
        flex: 1;
        
        .stat-value {
          font-size: 28px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .stat-label {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
  
  .quick-actions {
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 20px;
    }
    
    .action-card {
      background: #fff;
      border-radius: 8px;
      padding: 32px 20px;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        
        .action-icon {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          
          i {
            color: #fff;
          }
        }
      }
      
      .action-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #f5f7fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        transition: all 0.3s;
        
        i {
          font-size: 32px;
          color: #667eea;
          transition: all 0.3s;
        }
      }
      
      .action-label {
        font-size: 14px;
        font-weight: 500;
        color: #606266;
      }
    }
  }
}
</style>
