<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { usePageSearch, usePageModal, type PageHooks } from "/@/hooks/page";
import { httpList } from "/@/api/parameter/finance";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import modalConfig from "./config/modal.config";
import { httpListAll } from "/@/api/dataDashboardNew/saleReport";

const PageName = "reportApply";
const refModalConfig = ref(modalConfig);

const modalRef = ref(null);

const list = ref([]);
const companyList = ref([]);

async function get_list(type) {
  const api = Number(type) === 1 ? httpListAll : httpList;
  const { code, data } = await api({ page: 1, size: 1000 });
  if (Number(code) !== 0) return;
  const companies = ((type === 1 ? data : data.list) || []).map(item => ({
    value: type === 1 ? item.action : item.companyNo,
    label: type === 1 ? item.name : item.company_name
  }));
  return companies;
}

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig),
  pageModalHook: pageContentRef =>
    usePageModal({
      pageContentRef
    })
};
watchEffect(async () => {
  list.value = await get_list(1);
  console.log(list.value);
  companyList.value = await get_list(2);
  refModalConfig.value.formItems[1].options = list.value;
  refModalConfig.value.formItems[2].options = companyList.value;
});

modalConfig.onDataChange = function (data) {
  const current = list.value.find(({ value }) => value === data.action);
  return { ...data, name: current ? current.label : "" };
};
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      :modal-config="refModalConfig"
      :get-modal-ref="ref => (modalRef = ref)"
    />
  </PageAuth>
</template>
