<template>
  <div class="dashboard">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="总订单数"
            :value="statistics.total"
            :loading="loading"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="已支付订单"
            :value="statistics.paidCount"
            :loading="loading"
          />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="总收入"
            :value="statistics.totalRevenue"
            :precision="2"
            prefix="¥"
            :loading="loading"
          />
        </a-card>
      </a-col>
    </a-row>

    <a-card title="各类型卜卦统计" style="margin-top: 16px" :loading="loading">
      <a-table
        :columns="columns"
        :data-source="statistics.typeStats"
        :pagination="false"
      />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

const loading = ref(true)
const statistics = ref({
  total: 0,
  paidCount: 0,
  totalRevenue: 0,
  typeStats: [],
})

const columns = [
  {
    title: '类型',
    dataIndex: 'Type',
    key: 'Type',
  },
  {
    title: '数量',
    dataIndex: 'Count',
    key: 'Count',
  },
]

onMounted(async () => {
  try {
    const response = await axios.get('/api/admin/records/statistics')
    statistics.value = response.data
  } catch (error) {
    console.error('Failed to fetch statistics:', error)
  } finally {
    loading.value = false
  }
})
</script>
