<script setup lang="ts">
import {
  ShoppingCartOutlined,
  ShoppingOutlined,
  DollarOutlined,
  DatabaseOutlined,
} from '@ant-design/icons-vue'
import type { Component } from 'vue'
import type { DataTypeCount } from '@/types/api'

defineProps<{
  byType: DataTypeCount[]
  loading: boolean
}>()

const iconMap: Record<string, Component> = {
  order: ShoppingCartOutlined,
  product: ShoppingOutlined,
  refund: DollarOutlined,
  inventory: DatabaseOutlined,
}

const labelMap: Record<string, string> = {
  order: '订单',
  product: '产品',
  refund: '退款',
  inventory: '库存',
}
</script>

<template>
  <a-row :gutter="16" class="mb-4">
    <a-col :span="6" v-for="item in byType" :key="item.data_type">
      <a-card :bordered="false">
        <a-skeleton :loading="loading" active :paragraph="{ rows: 2 }">
          <div class="flex items-center gap-2 mb-3">
            <component :is="iconMap[item.data_type] ?? DatabaseOutlined" class="text-lg" />
            <span class="text-base font-medium">{{ labelMap[item.data_type] ?? item.data_type }}</span>
          </div>
          <div class="flex gap-6">
            <a-statistic
              title="成功"
              :value="item.success"
              :value-style="{ color: '#3f8600' }"
            />
            <a-statistic
              title="失败"
              :value="item.failed"
              :value-style="item.failed > 0 ? { color: '#cf1322' } : {}"
            />
          </div>
        </a-skeleton>
      </a-card>
    </a-col>
  </a-row>
</template>
