<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-grid :cols="{ xs: 1, sm: 2, lg: 4 }" :col-gap="16" :row-gap="16">
      <a-grid-item v-for="item in cards" :key="item.key">
        <a-card :bordered="false"><a-statistic :title="item.label" :value="overview[item.key]" show-group-separator /></a-card>
      </a-grid-item>
    </a-grid>
  </a-spin>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue';
import { onMounted, reactive, ref } from 'vue';
import { request } from '@/api/http';
type Overview = Record<'staff_count' | 'user_count' | 'contract_count' | 'order_count', number>;
const loading = ref(false);
const overview = reactive<Overview>({ staff_count: 0, user_count: 0, contract_count: 0, order_count: 0 });
const cards: Array<{ key: keyof Overview; label: string }> = [
  { key: 'staff_count', label: '配送人员' }, { key: 'user_count', label: '服务用户' },
  { key: 'contract_count', label: '配送合同' }, { key: 'order_count', label: '配送订单' },
];
onMounted(async () => {
  loading.value = true;
  try { Object.assign(overview, await request<Overview>('/dashboard/overview')); }
  catch (error) { Message.error((error as Error).message); }
  finally { loading.value = false; }
});
</script>
