<script lang="ts" setup>
import type { Dayjs } from 'dayjs';

import { onMounted, ref } from 'vue';

import { Loading, Page } from '@vben/common-ui';

import { VbenIcon } from '@vben-core/shadcn-ui';

import { Button, Card, DatePicker, Empty } from 'ant-design-vue';
import dayjs from 'dayjs';

import { statisticsApi } from '#/api/statistics';

const year = ref<Dayjs>(dayjs());
const disabledDate = (date: Dayjs) => date.year() > dayjs().year();

interface ReportItem {
  type: string;
  fee: number;
  count: number;
  icon: {
    color: string;
    icon: string;
  };
}

// 报表数据
const list = ref<ReportItem[][]>([]);
const loading = ref<boolean>(false);
const getList = async () => {
  loading.value = true;
  list.value = [];
  try {
    // 计算查询年份中包含哪些月份, 若为今年则只查询到当前月份，往年则查询所有月份
    const monthList =
      year.value.year() === dayjs().year()
        ? Array.from({ length: dayjs().month() + 1 }, (_, i) => (i + 1).toString().padStart(2, '0'))
        : Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'));
    for (const month of monthList) {
      const data = await statisticsApi.getTrainingClassStatistics({
        year: year.value.year(),
        month,
      });
      // 确保四种支付方式都存在，默认值为0
      const paymentTypes = [
        { type: '微信', icon: { color: 'text-green-500', icon: 'ant-design:wechat-filled' } },
        { type: '支付宝', icon: { color: 'text-blue-500', icon: 'ant-design:alipay-outlined' } },
        { type: '银行', icon: { color: 'text-yellow-500', icon: 'ant-design:credit-card-filled' } },
        {
          type: '天医币',
          icon: { color: 'text-purple-500', icon: 'ant-design:pay-circle-filled' },
        },
      ];
      const report: ReportItem[] = paymentTypes.map((type) => {
        const item = data.map.find((item: any) => item.type === type.type);
        return {
          type: type.type,
          fee: item?.fee || 0,
          count: item?.count || 0,
          icon: { color: type.icon.color, icon: type.icon.icon },
        };
      });
      list.value.push(report);
    }
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getList();
});
</script>

<template>
  <Page auto-content-height>
    <Loading class="flex h-full flex-col rounded-md bg-white" :spinning="loading">
      <div class="search-form p-4">
        <DatePicker
          v-model:value="year"
          picker="year"
          :disabled-date="disabledDate"
          @change="getList"
        />
        <Button type="primary" class="ml-2" @click="getList">查询</Button>
      </div>
      <div class="h-2 bg-gray-100"></div>
      <div class="content relative min-h-2 flex-1 px-3 py-4">
        <div
          v-if="list.length === 0 && !loading"
          class="col-span-3 flex items-center justify-center"
        >
          <Empty />
        </div>
        <div v-else class="grid max-h-full grid-cols-3 gap-3 overflow-auto px-1">
          <Card v-for="(item, index) in list" :key="index" :title="`${index + 1} 月`" size="small">
            <div class="-m-2 text-[16px]">
              <div class="flex flex-row py-2">
                <div v-for="(payment, index2) in item" :key="index2" class="flex-1 text-center">
                  <div class="flex items-center justify-center font-bold">
                    <VbenIcon
                      class="size-5"
                      :class="payment.icon.color"
                      :icon="payment.icon.icon"
                      fallback
                    />
                    {{ payment.type }}
                  </div>
                  <!-- <div class="text-gray-500">{{ payment.count }}笔</div> -->
                  <div class="text-black">{{ payment.fee }}</div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </Loading>
  </Page>
</template>

<style scoped lang="scss">
:deep(.ant-card-head-title) {
  font-size: 16px !important;
}
</style>
