<script setup lang="ts">
import { ref } from "vue";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";

import { PageContentInstance } from "/@/components/PageContent";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { usePageSearch, type PageHooks } from "/@/hooks/page";
import { isBeyondTime } from "/@/views/time/_utils";
import { frontEndExport } from "/@/utils/export";
import { usePermission } from "/@/hooks/core";

const pageName = "receivable";
const { hasPermissionWithCode } = usePermission(pageName);
const pageContentRef = ref<PageContentInstance | null>(null);

const hooks: PageHooks = {
  pageSearchHook: () => {
    return usePageSearch(undefined, undefined, searchConfig);
  }
};

async function handleExportAllReport() {
  const params = pageContentRef.value.getBasicParams() || {};
  const { start, end } = params;
  const beyondTime = isBeyondTime({ start, end, len: 30 });
  if (beyondTime) return;
  const data = pageContentRef.value.getData();
  frontEndExport({ columns: contentConfig.columns, name: "应收账款汇总.xlsx", data });
}
</script>

<template>
  <page-auth :page-name="pageName">
    <page-container
      :hooks="hooks"
      :page-name="pageName"
      :get-content-ref="ref => (pageContentRef = ref)"
      :content-config="contentConfig"
      :search-config="searchConfig"
    >
      <template #content_header>
        <el-button
          v-if="hasPermissionWithCode('9')"
          @click="handleExportAllReport"
          size="small"
          :icon="useRenderIcon('arrow-up-line')"
          type="primary"
          >导出</el-button
        >
      </template>
    </page-container>
  </page-auth>
</template>
