<template>
  <div class="dashboard-container">
    <el-card class="welcome-card">
      <h2>欢迎使用盘古用户平台</h2>
      <p>统一用户管理系统</p>
    </el-card>
    
    <el-row :gutter="16" class="stat-cards">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <el-icon :size="40" color="#409EFF"><School /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ stats.schoolCount }}</div>
              <div class="stat-label">学校数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <el-icon :size="40" color="#67C23A"><User /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ stats.memberCount }}</div>
              <div class="stat-label">会员数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <el-icon :size="40" color="#E6A23C"><UserFilled /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ stats.studentCount }}</div>
              <div class="stat-label">学生数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-item">
            <el-icon :size="40" color="#F56C6C"><Grid /></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ stats.appCount }}</div>
              <div class="stat-label">应用数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
/**
 * 首页（占位版本，待Agent-1完善）
 * @author pangu
 */
import { Grid, School, User, UserFilled } from '@element-plus/icons-vue';
import { reactive } from 'vue';

const stats = reactive({
  schoolCount: 128,
  memberCount: 5680,
  studentCount: 23456,
  appCount: 12
})
</script>

<style scoped>
.dashboard-container {
  padding: 0;
}

.welcome-card {
  margin-bottom: 16px;
  text-align: center;
}

.welcome-card h2 {
  margin: 0 0 8px 0;
  color: #303133;
}

.welcome-card p {
  margin: 0;
  color: #909399;
}

.stat-cards {
  margin-top: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}
</style>
