<!-- 搜索表单 -->
<template>
  <a-space :size="10" style="flex-wrap: wrap">
    <a-radio-group v-model:value="branchId" @change="onBranchId">
      <a-radio-button :value="1">初中部</a-radio-button>
      <a-radio-button :value="2">高中部</a-radio-button>
    </a-radio-group>
    <a-select
      v-if="branchId"
      show-search
      v-model:value="where.gradeName"
      style="width: 240px"
      placeholder="选择年级"
      :options="gradeList"
      @change="onGrade"
    />
    <a-select
      v-if="where.gradeName"
      show-search
      v-model:value="where.className"
      style="width: 240px"
      placeholder="选择年级"
      :options="classList"
      @change="onClass"
    />
    <a-input-search
      allow-clear
      placeholder="请输入关键词"
      style="width: 220px"
      v-model:value="where.keywords"
      @search="reload"
    />
    <a-range-picker
      v-model:value="dateRange"
      @change="search"
      value-format="YYYY-MM-DD"
    />
    <a-button @click="handleExport">导出</a-button>
  </a-space>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { utils, writeFile } from 'xlsx';
  import dayjs from 'dayjs';
  import { message } from 'ant-design-vue';
  import useSearch from '@/utils/use-search';
  import { BszxPayParam } from '@/api/bszx/bszxPay/model';
  import { BszxBm } from '@/api/bszx/bszxBm/model';
  import { listBszxPay } from '@/api/bszx/bszxPay';
  import { BszxClassParam } from '@/api/bszx/bszxClass/model';
  import { listBszxGrade } from '@/api/bszx/bszxGrade';
  import { listBszxClass } from '@/api/bszx/bszxClass';

  const props = withDefaults(
    defineProps<{
      // 选中的角色
      selection?: [];
    }>(),
    {}
  );

  const emit = defineEmits<{
    (e: 'search', where?: BszxPayParam): void;
    (e: 'add'): void;
    (e: 'remove'): void;
    (e: 'batchMove'): void;
  }>();

  // 表单数据
  const { where } = useSearch<BszxPayParam>({
    id: undefined,
    keywords: '',
    gradeName: undefined,
    className: undefined,
    createTimeStart: undefined,
    createTimeEnd: undefined,
    userId: undefined
  });

  const reload = () => {
    emit('search', where);
  };

  /* 搜索 */
  const search = () => {
    const [d1, d2] = dateRange.value ?? [];
    where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
    where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
    emit('search', {
      ...where
    });
  };

  const dateRange = ref<[string, string]>(['', '']);
  // 变量
  const loading = ref(false);
  const bmList = ref<BszxBm[]>([]);
  const xlsFileName = ref<string>();
  const branchId = ref<number>();
  const gradeId = ref<number>();
  const gradeList = ref<BszxClassParam[]>([]);
  const classList = ref<BszxClassParam[]>([]);

  const getGradeList = () => {
    listBszxGrade({ branch: branchId.value }).then((res) => {
      gradeList.value = res.map((d) => {
        d.value = Number(d.id);
        d.label = d.name;
        return d;
      });
    });
  };

  const getClassList = () => {
    listBszxClass({ gradeId: gradeId.value }).then((res) => {
      classList.value = res.map((d) => {
        d.value = Number(d.id);
        d.label = d.name;
        return d;
      });
    });
  };

  const onGrade = (gradeName: number, item: any) => {
    where.gradeName = item.name;
    if (gradeName) {
      console.log(item);
      gradeId.value = item.id;
      getClassList();
    }
    emit('search', where);
  };

  const onBranchId = () => {
    getGradeList();
  };

  const onClass = (classId, item) => {
    console.log(classId);
    where.className = item.name;
    reload();
  };

  // 导出
  const handleExport = async () => {
    loading.value = true;
    const array: (string | number)[][] = [
      [
        '订单编号',
        '姓名',
        '手机号码',
        '捐款金额',
        '性别',
        '年级',
        '班级',
        '居住地址',
        '工作单位',
        '职务',
        '捐款时间'
      ]
    ];

    // 按搜索结果导出
    where.sceneType = 'Content';
    await listBszxPay(where)
      .then((list) => {
        bmList.value = list;
        list?.forEach((d: BszxBm) => {
          array.push([
            `${d.orderNo}`,
            `${d.name}`,
            `${d.mobile}`,
            `${d.price}`,
            `${d.sex == 1 ? '男' : ''}${d.sex == 2 ? '女' : '-'}`,
            `${d.gradeName ? d.gradeName : '-'}`,
            `${d.className ? d.className : '-'}`,
            `${d.address ? d.address : '-'}`,
            `${d.workUnit ? d.workUnit : '-'}`,
            `${d.position ? d.position : '-'}`,
            `${d.createTime}`
          ]);
        });
        const sheetName = `导出捐款记录${dayjs(new Date()).format('YYYYMMDD')}`;
        const workbook = {
          SheetNames: [sheetName],
          Sheets: {}
        };
        const sheet = utils.aoa_to_sheet(array);
        workbook.Sheets[sheetName] = sheet;
        // 设置列宽
        sheet['!cols'] = [
          { wch: 10 },
          { wch: 40 },
          { wch: 20 },
          { wch: 20 },
          { wch: 60 },
          { wch: 15 },
          { wch: 10 },
          { wch: 10 },
          { wch: 20 },
          { wch: 10 },
          { wch: 20 }
        ];
        message.loading('正在导出...');
        setTimeout(() => {
          writeFile(
            workbook,
            `${
              where.createTimeEnd ? xlsFileName.value + '_' : ''
            }${sheetName}.xlsx`
          );
          loading.value = false;
        }, 1000);
      })
      .catch((msg) => {
        message.error(msg);
        loading.value = false;
      })
      .finally(() => {});
  };

  getGradeList();

  watch(
    () => props.totalPriceAmount,
    (totalPriceAmount) => {
      console.log(totalPriceAmount, 'totalPriceAmount');
    }
  );
</script>
