<script setup lang="ts">
import { ref, watch, shallowRef } from "vue";
import apis from "./config/apis";
import { usePermission } from "/@/hooks/core";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import { template } from "./config/tempalte.ts";
import { usePageSearch, type PageHooks } from "/@/hooks/page";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { PageContentInstance } from "/@/components/PageContent";
import ExcelFileUpload from "./execl-files-upload/index.vue";
import { utils, writeFile } from "xlsx";

const pageContentRef = ref<PageContentInstance | null>(null);
const excelFileUploadRef = ref<InstanceType<typeof ExcelFileUpload> | null>(
  null
);

const pageName = "commissionCoefficient";

const { hasPermissionWithCode } = usePermission(pageName);

const hooks: PageHooks = {
  pageSearchHook: () =>
    usePageSearch(
      results => ({ result: { ...results, change_type: 2 } }),
      results => ({ result: { change_type: 2 } }),
      searchConfig,
      false
    )
};

function onDownloadTemplate() {
  //创建数据表
  const workBook = utils.book_new();
  const workSheet = utils.json_to_sheet([template]);
  utils.book_append_sheet(workBook, workSheet, "sheet");

  //导出模板
  writeFile(workBook, "订单下单时间修改模板.xlsx", { bookType: "xlsx" });
}
</script>

<template>
  <PageAuth :pageName="pageName" class="commissionCoefficient">
    <PageContainer
      :hooks="hooks"
      :getContentRef="ref => (pageContentRef = ref)"
      :content-config="contentConfig"
      :search-config="searchConfig"
    >
      <template #content_header>
        <el-button
          type="primary"
          v-if="hasPermissionWithCode('23')"
          :icon="useRenderIcon('arrow-up-line')"
          @click="excelFileUploadRef?.onDisplay()"
          size="small"
          >导入</el-button
        >

        <el-button
          :icon="useRenderIcon('arrow-down-line')"
          @click="onDownloadTemplate"
          size="small"
          >下载导入模板</el-button
        >
      </template>
    </PageContainer>
    <ExcelFileUpload
      ref="excelFileUploadRef"
      @refresh="pageContentRef.onSearch()"
    />
  </PageAuth>
</template>
