<template>
  <div>
    <h1 class="text-xl font-bold text-gray-800 mb-4">概览</h1>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div v-for="s in stats" :key="s.label" class="bg-white rounded-xl p-5 shadow-sm border">
        <div class="text-2xl font-bold text-blue-600">{{ s.value }}</div>
        <div class="text-sm text-gray-500 mt-1">{{ s.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUsers, getCertifications } from '@/api'

const stats = ref([
  { label: '用户总数', value: 0 },
  { label: '待审核认证', value: 0 },
  { label: '今日预约', value: '-' },
])

onMounted(async () => {
  try {
    const [users, certs] = await Promise.all([
      getUsers({ page: 1, page_size: 1 }),
      getCertifications({ status: 0 }),
    ])
    stats.value[0].value = users?.data?.total || 0
    stats.value[1].value = certs?.data?.total || 0
  } catch {}
})
</script>
