<script setup lang="ts">
import { ref , watch, shallowRef, computed} from "vue";
import searchConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import contentdetailconfig from "./config/content.detail.config";

import { PageContentInstance } from "/@/components/PageContent";
import { usePageSearch, type PageHooks } from "/@/hooks/page";
import { useUserStore } from "/@/store/modules/user";
import { frontEndExport } from "/@/utils/export";
import { usePermission } from "/@/hooks/core";
import dayjs from "dayjs"

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

enum BtnTypeEnum {
  "detail",
  "tenThousand"
}

const btnType = shallowRef(BtnTypeEnum.tenThousand);

const contentConfigRef = computed(() => { 
  const config = btnType.value === BtnTypeEnum.tenThousand ? contentConfig : contentdetailconfig
  return config;
})

async function handleExportAllReport() {
  const data = pageContentRef.value.getData();
  frontEndExport({ columns: contentConfig.columns, name: "万宇应收(业务公司).xlsx", data });
}

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch((params) => { 
    const { date, ...rest } = params;
    const start = dayjs(date).format('YYYY-MM-DD');
    const daysInMonth = dayjs(date).daysInMonth();
    const end = dayjs(start).subtract(-(daysInMonth - 1), 'days').format('YYYY-MM-DD');
    
    return {
      result: {
        start: start + " 00:00:00",
        end: end + " 23:59:59",
        plat_type: "1",
        dz_type:"2",
        ...rest
      },
      deleteProps:['date']
    }
  },
   (params) => { 
    const { date , depart_id} = params;
    const start = dayjs(date).format('YYYY-MM-DD');
    const daysInMonth = dayjs(date).daysInMonth();
    const end = dayjs(start).subtract(-(daysInMonth - 1), 'days').format('YYYY-MM-DD');

    return {
      result: {
        start: start + " 00:00:00",
        end: end + " 23:59:59",
        plat_type: "1",
        dz_type: "2",
        depart_id,
      },
      deleteProps:['date']
    }
  }, searchConfig)
};


const searchConfigRef = ref(searchConfig);
watch(
  () => userStore.level,
  level => {
    const { formItems } = searchConfigRef.value;
    const index = formItems.findIndex(({ field }) => field === "depart_id");
    const { itemid = "" } = userStore.info || {};

    if (Number(level) === 2) {
      // searchConfigRef.value.formItems[index].disabled = Number(level) === 2;
      searchConfigRef.value.formItems[index].defaultValue = itemid;
    }
  },
  {
    immediate: true
  }
);
</script>

<template>
  <page-auth :page-name="pageName">
    <page-container
      v-if="btnType === BtnTypeEnum.detail"
      :hooks="hooks"
      :page-name="pageName"
      :get-content-ref="ref => (pageContentRef = ref)"
      :content-config="contentConfigRef"
    >
    <template #content_header>
      <el-button @click="btnType = btnType === BtnTypeEnum.tenThousand ? BtnTypeEnum.detail : BtnTypeEnum.tenThousand">{{btnType === BtnTypeEnum.tenThousand ? "显示具体金额" : "显示万元以上"}}</el-button>
      <el-button @click="pageContentRef?.onSearch()">刷新</el-button>
      <el-button type="primary" @click="handleExportAllReport" v-if="hasPermissionWithCode('9')">导出</el-button>
    </template>
  </page-container>

   <page-container
      v-else
      :hooks="hooks"
      :page-name="pageName"
      :get-content-ref="ref => (pageContentRef = ref)"
      :content-config="contentConfigRef"
    >
    <template #content_header>
      <el-button @click="btnType = btnType === BtnTypeEnum.tenThousand ? BtnTypeEnum.detail : BtnTypeEnum.tenThousand">{{btnType === BtnTypeEnum.tenThousand ? "显示具体金额" : "显示万元以上"}}</el-button>
      <el-button @click="pageContentRef?.onSearch()">刷新</el-button>
      <el-button type="primary" @click="handleExportAllReport" v-if="hasPermissionWithCode('9')">导出</el-button>
    </template>
  </page-container>
  </page-auth>
</template>
