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

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

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

interface Report {
  incomes: Record<string, number>;
  notyet: number;
  already: number;
  now: number;
}

interface ReportItem {
  type: string;
  fee: number;
}

const { year, disabledDate, list, loading, getList, downloadReport, downloadAllReport } =
  useMonthReport<Report>({
    fetchMonth: (p) => statisticsApi.getCourseStatistics(p),
    downloadFile: (p) => statisticsApi.downloadReportCourse(p),
    fileNameBuilder: (y, m) => `课程报表_${y}年${m}月_文件.xlsx`,
    normalize: (data) => ({
      incomes: {
        微信: 0,
        支付宝: 0,
        银行: 0,
        天医币: 0,
        ...Object.fromEntries(data.incomes.map((item: ReportItem) => [item.type, item.fee])),
      },
      notyet: data.notyet || 0,
      already: data.already || 0,
      now: data.now || 0,
    }),
  });

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"
    content-item-class="h-[150px]"
    @update:year="onUpdateYear"
    @query="getList"
  >
    <template #default="{ item }">
      <div class="-m-2 text-[16px]">
        <div class="flex">
          <div class="flex-1 bg-[#F6FFF5] px-2 pb-1">
            <div class="p-1 text-center font-bold">收入</div>
            <div v-for="(fee, type) in item.incomes" :key="type" class="p-1">
              <span class="text-gray-500">{{ type }}：</span>
              <span class="text-black">{{ fee }}</span>
            </div>
          </div>
          <div class="flex-1 bg-[#FFFBF0] px-2 pb-1">
            <div class="p-1 text-center font-bold">摊销</div>
            <div class="p-1">
              <span class="text-gray-500">已摊销：</span>
              <span class="text-black">{{ item.already }}</span>
            </div>
            <div class="p-1">
              <span class="text-gray-500">月摊销：</span>
              <span class="text-black">{{ item.now }}</span>
            </div>
            <div class="p-1">
              <span class="text-gray-500">剩余摊销：</span>
              <span class="text-black">{{ item.notyet }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MonthReportView>
</template>
<style scoped lang="scss"></style>
