<script setup lang="tsx">
import { reactive, ref, unref } from 'vue';
import { exportExcelByRulepApi, exportExcelBySystemgroupApi, getCsckDataCheckImportListApi } from '@/api/csck/CsckDataCheckImport';
import { useTable } from '@/hooks/web/useTable';
import { ElButton, ElMessage } from 'element-plus';
import { Search } from '@/components/Search';
import { FormSchema } from '@/components/Form';
import { ContentWrap } from '@/components/ContentWrap';
import { getOrganTree } from '@/api/common';
import { Table } from '@/components/Table';
import { getDateByPrevMonth } from '@/utils/dateUtil';
import { isEmpty } from 'lodash-es';
import { getLoginOrganCodeByUserInfo } from '@/utils/auth';

defineOptions({
  name: 'Datacheckimport'
})

const date = getDateByPrevMonth();

const formRef = ref(null);

const { tableState, tableMethods } = useTable({
  fetchInitParamsApi: async () => {
    searchParams.value = {
      dataDate: date,
    };
  },
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState;
    const res = await getCsckDataCheckImportListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams),
    });
    return {
      list: res.body.list,
      total: res.body.total,
    };
  },
  // fetchDelApi: async () => {
  //   const res = await delCsckDataCheckImportListApi(unref(ids));
  //   return !!res;
  // },
});

// const { loading, dataList, total, currentPage, pageSize } = tableState;
const { getList } = tableMethods;
// 获取当前用户机构号
const loginOrganCode = getLoginOrganCodeByUserInfo();
const searchSchema = reactive<FormSchema[]>([
  {
    field: 'orgCode',
    label: '机构',
    componentProps: {
      checkStrictly: false,
      nodeKey: 'id',
      props: { children: 'childs', label: 'nodeName' },
      filterable: true,
      multiple: true,
      collapseTags: true,
      showCheckbox: true,
      style: 'width: 100%',
    },
    component: 'TreeSelect',
    optionApi: async () => {
      const res = await getOrganTree({
        treeid: '1',
        systemCode: 'portal',
        loginOrganCode,
      });
      return res.body.result;
    },
  },
  {
    field: 'dataDate',
    label: '数据日期',
    componentProps: {
      type: 'date',
      valueFormat: 'YYYY-MM-DD',
    },
    component: 'DatePicker',
    value: date,
  },
]);

const searchParams = ref<any>({});
const setSearchParams = (data: any) => {
  searchParams.value = data;
  getList();
};
const emptyText = ref(' ');

const exportExcel = async (type: 'systemGroup' | 'rule') => {
  // @ts-ignore
  const formData = await formRef.value.getValues();
  if (isEmpty(formData.orgCode)) {
    ElMessage.warning('请选择机构');
    return;
  }
  if (isEmpty(formData.dataDate)) {
    ElMessage.warning('请选择数据日期');
    return;
  }
  const data = {
    ...unref(searchParams),
    orgCode: formData.orgCode,
    dataDate: formData.dataDate,
  }
  switch (type) {
    case 'systemGroup':
      data.fileName = '吉林银行监管数据检核统计表(按系统组)';
      exportExcelBySystemgroupApi(data);
      break;

    case 'rule':
      data.fileName = '吉林银行监管数据检核统计表(按检核问题)';
      exportExcelByRulepApi(data);
      break;

    default:
      break;
  }
};
</script>

<template>
  <ContentWrap>
    <Search ref="formRef" :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" :showSearch="false" />
    <Table :showHeader="false" :showAction="false" :emptyText="emptyText">
      <template #buttons>
        <ElButton type="primary" @click="exportExcel('systemGroup')">按系统组统计数量导出</ElButton>
        <ElButton type="primary" @click="exportExcel('rule')">按规则统计的数量导出</ElButton>
        <!-- <ElButton type="primary">明细数据导出</ElButton> -->
      </template>
    </Table>
  </ContentWrap>
</template>

<style lang="less" scoped>
:deep(.el-select .el-select__tags > span) {
  display: inline-flex !important;
}
</style>
