<script lang="ts" setup>
import { computed, ref, watch } from 'vue';

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

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

const props = defineProps<{
  contentItemClass?: string;
  disabledDate: (d: any) => boolean;
  downloadAll?: () => void;
  downloadMonth?: (index: number) => void;
  list: any[];
  loading: boolean;
  year: any;
}>();

const emit = defineEmits<{
  (e: 'query'): void;
  (e: 'update:year', v: any): void;
}>();

const modelYear = computed({
  get: () => props.year,
  set: (v) => emit('update:year', v),
});

const downloadingAll = ref(false);
const downloadingMonth = ref<boolean[]>([]);

watch(
  () => props.list.length,
  (len) => {
    downloadingMonth.value = Array.from({ length: len }, () => false);
  },
  { immediate: true },
);

const handleDownloadAll = async () => {
  if (!props.downloadAll) return;
  downloadingAll.value = true;
  try {
    await Promise.resolve(props.downloadAll());
  } finally {
    downloadingAll.value = false;
  }
};

const handleDownloadMonth = async (index: number) => {
  if (!props.downloadMonth) return;
  downloadingMonth.value[index] = true;
  try {
    await Promise.resolve(props.downloadMonth(index));
  } finally {
    downloadingMonth.value[index] = false;
  }
};
</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="modelYear"
          picker="year"
          :disabled-date="disabledDate"
          @change="() => emit('query')"
        />
        <Button type="primary" class="ml-2" @click="emit('query')">查询</Button>
        <Button
          v-if="props.downloadAll"
          type="link"
          class="ml-2"
          :loading="downloadingAll"
          @click="handleDownloadAll"
        >
          下载全年报表
        </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 h-full 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">
            <template #extra>
              <Button
                v-if="props.downloadMonth"
                type="link"
                :loading="downloadingMonth[index]"
                @click="handleDownloadMonth(index)"
              >
                下载报表
              </Button>
            </template>
            <template v-if="item !== null">
              <slot :item="item" :index="index" :year="modelYear"></slot>
            </template>
            <template v-else>
              <div
                v-if="loading"
                class="flex min-h-12 items-center justify-center"
                :class="contentItemClass"
              >
                努力加载中...
              </div>
            </template>
          </Card>
        </div>
      </div>
    </Loading>
  </Page>
</template>
<style scoped lang="scss">
:deep(.ant-card-head-title) {
  font-size: 16px !important;
}
</style>
