<script setup lang="ts">
import { ref } from "vue";
import { utils, writeFile } from "xlsx";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageModal, usePageModal } from "/@/components/PageModal";
import { PageContent } from "/@/components/PageContent";
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import modalConfig from "./config/modal.config";
import { useRouter } from "vue-router";
import ExeclUpload from "./components/execl-upload.vue";

defineOptions({
  name: "invoiceheader"
});

const { push } = useRouter();

const execlUploadRef = ref<InstanceType<typeof ExeclUpload>>(null);

const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(
  ({ create_timer }) => {
    const [start, end] = create_timer;

    return {
      result: {
        start,
        end
      },
      deleteProps: ["create_timer"]
    };
  }
);

const {
  pageModalRef,
  handleUpdateData,
  handleCreateData,
  handlePreviewData,
  handleConfrim,
  defaultInfo
} = usePageModal({ pageContentRef });

//导出模板
function onDownloadTemplate() {
  const { columns } = contentConfig;
  const data: Record<string, string> = {};

  columns.forEach(col => {
    if (col.label && col.label !== "序号") data[col.label] = "";
  });

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

  //导出模板
  writeFile(workBook, "资金认领模板.xlsx", {
    bookType: "xlsx"
  });
}

//到详情页
function toFundClaim(tradNo) {
  push({
    path: "/InvoiceSales/capitalClaimDetail",
    query: {
      id: tradNo
    }
  });
}
</script>

<template>
  <div class="main role">
    <PageSearch
      :form-config="searchFormConfig"
      @search-btn-click="handleSearchClick"
      @reset-btn-click="handleResetClick"
    >
      <template #action>
        <el-button @click="onDownloadTemplate">下载模板</el-button>
        <el-button type="primary" @click="() => execlUploadRef.onDisplay()"
          >导入数据</el-button
        >
      </template>
    </PageSearch>

    <PageContent
      ref="pageContentRef"
      :content-config="contentConfig"
      @create-btn-click="handleCreateData"
      @update-btn-click="handleUpdateData"
      @preview-btn-click="handlePreviewData"
    >
      <template #custom="{ tradNo }">
        <el-button link type="primary" @click="toFundClaim(tradNo)"
          >资金认领</el-button
        >
        <el-button link type="primary">认领审核</el-button>
      </template>
    </PageContent>

    <PageModal
      ref="pageModalRef"
      :modal-config="modalConfig"
      :default-info="defaultInfo"
      @confirm-btn-click="handleConfrim"
    />

    <ExeclUpload ref="execlUploadRef" />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.cell) {
  display: flex;
  flex-direction: column;
}

:deep(.el-button + .el-button) {
  margin-left: 0px !important;
}
</style>
