<script lang="ts" setup>
import { onMounted } from 'vue';

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

import { statisticsApi } from '#/api/statistics';
import MonthReportView from '#/views/statistics/common/MonthReportView.vue';

import { useMonthReport } from '../common/useMonthReport';

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

const { year, disabledDate, list, loading, getList, downloadReport, downloadAllReport } =
  useMonthReport<ReportItem[]>({
    fetchMonth: (p) => statisticsApi.getTrainingClassStatistics(p),
    downloadFile: (p) => statisticsApi.downloadReportTrainingClass(p),
    fileNameBuilder: (y, m) => `培训班报表_${y}年${m}月_文件.xlsx`,
    normalize: (data) => {
      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' },
        },
      ];
      return 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 },
        } as ReportItem;
      });
    },
  });

const onUpdateYear = (v: any) => {
  year.value = v;
};
onMounted(() => {
  getList();
});
</script>

<template>
  <MonthReportView
    :year="year"
    :disabled-date="disabledDate"
    :loading="loading"
    :list="list"
    :download-all="downloadAllReport"
    :download-month="downloadReport"
    @update:year="onUpdateYear"
    @query="getList"
  >
    <template #default="{ item }">
      <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-black">{{ payment.fee }}</div>
          </div>
        </div>
      </div>
    </template>
  </MonthReportView>
</template>

<style scoped lang="scss"></style>
