<script setup lang="ts">
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import type { DashboardOverview } from '@/types/api'

defineProps<{
  overview: DashboardOverview | null
  loading: boolean
}>()

const periods = [
  { key: 'today' as const, label: '今日' },
  { key: 'this_week' as const, label: '本周' },
  { key: 'this_month' as const, label: '本月' },
]
</script>

<template>
  <a-row :gutter="16" class="mb-4">
    <a-col :span="8" v-for="p in periods" :key="p.key">
      <a-card :bordered="false">
        <a-skeleton :loading="loading" active :paragraph="{ rows: 2 }">
          <h3 class="text-base font-medium mb-3">{{ p.label }}</h3>
          <div class="flex gap-6">
            <a-statistic
              title="成功"
              :value="overview?.[p.key]?.success ?? 0"
              :value-style="{ color: '#3f8600' }"
            >
              <template #prefix>
                <CheckCircleOutlined />
              </template>
            </a-statistic>
            <a-statistic
              title="失败"
              :value="overview?.[p.key]?.failed ?? 0"
              :value-style="(overview?.[p.key]?.failed ?? 0) > 0 ? { color: '#cf1322' } : {}"
            >
              <template #prefix>
                <CloseCircleOutlined />
              </template>
            </a-statistic>
          </div>
        </a-skeleton>
      </a-card>
    </a-col>
  </a-row>
</template>
