<script setup>
import { computed } from 'vue'

const props = defineProps({
  stats: { type: Object, required: true },
  loading: { type: Boolean, default: false },
})

const items = computed(() => [
  { key: 'total_users', label: '总用户数' },
  { key: 'new_users_today', label: '今日注册' },
  { key: 'new_users_7d', label: '近7天注册' },
  { key: 'total_accounts', label: '总账号数' },
  { key: 'vip_users', label: 'VIP用户' },
])
</script>

<template>
  <el-row :gutter="12" class="stats-row">
    <el-col v-for="it in items" :key="it.key" :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
      <el-card shadow="never" class="stat-card" :body-style="{ padding: '14px' }">
        <div class="stat-value">
          <el-skeleton v-if="loading" :rows="1" animated />
          <template v-else>{{ stats?.[it.key] ?? 0 }}</template>
        </div>
        <div class="stat-label">{{ it.label }}</div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.stats-row {
  margin-bottom: 14px;
}
.stat-card {
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
}
.stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.stat-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--app-muted);
}
</style>
