<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { utils, writeFile } from "xlsx";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import PagePower from "/@/components/PagePower/PagePower.vue";
import ExeclUpload from "./components/execl-files-upload/index.vue";
import ExeclCapitalUpload from "./components/execl-capital-files-upload/index.vue";

import ExcelBusinessUpload from "./components/execl-files-business-upload/index.vue"
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import { template, template2 ,capitalTemplate } from "./config/xls-template";
import { usePermission } from "/@/hooks/core/usePermission";
import { useUserInfo } from "/@/hooks/core/useUser";
import { useAsync } from "/@/hooks/core/useAsync";
import { httpWithdraw } from "/@/api/InvoiceSales/capitalClaim";
import { httpRequsetExport } from "/@/utils/export";
import { useCompany } from "/@/hooks/core/useCompany";
import { httpInfo } from "/@/api/InvoiceSales/capitalClaim";
import { useTask } from "/@/hooks/core"

import FundDetail from "/@/components/FundDetail/index.vue"
import { ElMessage } from "element-plus"

import dayjs from "dayjs"


const { push } = useRouter();
const detailTask = useTask({ initialData: {} })

const execlUploadRef = ref<InstanceType<typeof ExeclUpload> | null>(null);
const execlCapitalUploadRef = ref<InstanceType<typeof ExeclCapitalUpload> | null>(null);
const execlBusinessUploadRef = ref<InstanceType<typeof ExcelBusinessUpload> | null>(null)

const pageName = "capitalClaim";

//  { code: "009", name: "撤销资金认领" },
//  { code: "029", name: "下载资金导入模板" },
//  { code: "030", name: "批量导入客户付款资金数据" },
//  { code: "034", name: "下载订单认款导入模板" },
//  { code: "035", name: "批量导入订单认款数据" }

const loading = ref(false)
const visible = ref(false)

const { run: withDraw } = useAsync({ success: () => pageContentRef.value.onSearch() });
const { hasPermissionWithCode, permissions } = usePermission(pageName);

const { currentCompany } = useCompany();
const { isSuperUser } = useUserInfo();

const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch(undefined, undefined, searchFormConfig);
const handleWithDraw = data => withDraw(httpWithdraw(data));

//导出模板
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" });
}

function onDownloadCapitalTemplate(){
  const workBook = utils.book_new()
  const workSheet = utils.json_to_sheet([template2])
  utils.book_append_sheet(workBook, workSheet, "sheet")
  writeFile(workBook, '平台订单回款资金导入模板.xlsx', { bookType: 'xlsx' })
}


//导出模板
function onCapitalDownloadTemplate() {
  //创建数据表
  const workBook = utils.book_new();
  const workSheet = utils.json_to_sheet([capitalTemplate]);
  utils.book_append_sheet(workBook, workSheet, "sheet");
  //导出模板
  writeFile(workBook, "订单认款导入模板.xlsx", { bookType: "xlsx" });
}

async function onDownloadCapitalInfo() {
  // const params = pageContentRef.value.getBasicParams()
  const { total } = pageContentRef.value.getPagination()
  if(total > 500){
    ElMessage.warning('导出页面数据不能超过500条')
    return
  }
  // if (!params.pcCode) {
  //   return
  // }
  // if(params.start && params.end){
  //   const start = dayjs(params.start);
  //   const end = dayjs(params.end);
  //   const diffDay = start.diff(end, 'days')
  //   const startDays = start.daysInMonth();
  //   const endDays = end.daysInMonth();
  //   if (Math.abs(diffDay) > startDays - 1) {
  //     ElMessage.warning('导出的时间区间不能超过一个月')
  //     return;
  //   }
  // }

  await httpRequsetExport({
    url: "orderPay/exportTrade",
    name: "资金信息表",
    onStart: () => (loading.value = true),
    onSuccess: () => (loading.value = false),
    onFail: () => (loading.value = false),
    params: { 
      ...pageContentRef.value.getBasicParams(), 
      companyNo: currentCompany.value.companyNo
    }
  });
}


function handleShow(row){
  visible.value = true
  detailTask.run(httpInfo({ tradNo: row.tradNo }))
}
</script>

<template>
  
  <div class="main capital-claim">
    <PagePower :is-show="hasPermissionWithCode('001')">
      <div class="w-full">
        <PageSearch
          :form-config="searchFormConfig"
          @search-btn-click="handleSearchClick"
          @reset-btn-click="handleResetClick"
        >
          <template #action>
            <div class="flex gap-[10px] flex-wrap">
              <el-button-group>
                <ElDropdown v-if="hasPermissionWithCode('029')" >
                  <ElButton type="warning" plain>
                  1.下载导入模板
                </ElButton>

                <template #dropdown>
                  <ElDropdownItem @click="onDownloadCapitalTemplate">
                    平台订单回款
                  </ElDropdownItem>
                  
                  <ElDropdownItem @click="onDownloadTemplate">
                    自营订单回款
                  </ElDropdownItem>
                </template>
              </ElDropdown>


              <ElDropdown v-if="!isSuperUser && hasPermissionWithCode('030')" >
                <ElButton type="primary" plain>
                  2.导入资金数据
                </ElButton>

                <template #dropdown>
                  <ElDropdownItem @click="execlBusinessUploadRef.onDisplay()">平台订单回款</ElDropdownItem>
                  <ElDropdownItem @click="execlUploadRef.onDisplay()">自营订单回款</ElDropdownItem>
                </template>
              </ElDropdown>

              


              <!-- <el-button
                plain
                type="primary" 
                @click="() => execlUploadRef.onDisplay()"
                >
                2.导入自营订单回款资金数据(批量)
              </el-button> -->
              <!-- <el-button plain type="warning"  @click="onDownloadCapitalTemplate" >
                3.下载平台订单回款资金导入模板
              </el-button>
              <el-button plain type="primary" @click="execlBusinessUploadRef.onDisplay()" v-if="!isSuperUser && hasPermissionWithCode('068')">
                4.导入平台订单回款资金数据(批量)
              </el-button> -->

              <el-button
                plain
                type="success" 
                v-if="hasPermissionWithCode('057')"
                @click="() => onDownloadCapitalInfo()"
               :loading="loading" 
               >
               3.导出资金信息
              </el-button>
            </el-button-group>
           </div>
          </template>
        </PageSearch>

        <PageContent
          ref="pageContentRef"
          :content-config="contentConfig"
          :powers="permissions"
          @preview-btn-click="row => handleShow(row)"
        />
      </div>
    </PagePower>

    <ExeclUpload 
      ref="execlUploadRef" 
      @onSuccess="handleResetClick" 
    />

    <ExeclCapitalUpload 
      ref="execlCapitalUploadRef" 
      @onSuccess="handleResetClick" 
    />

    <ExcelBusinessUpload 
      ref="execlBusinessUploadRef"
      @onSuccess="handleResetClick" 
    />


    <ElDialog center title="资金详情" v-model="visible">
      <FundDetail v-loading="detailTask.loading" :tradeInfo="detailTask.data" />
    </ElDialog>
  </div>
</template>

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

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

.star {
  color: red;
}
</style>
./components/execl-files-upload-backup/index.vue
