<script setup lang="ts">
import { httpListAll } from "/@/api/reportForm/personnelReport";
import { httpList } from "/@/api/parameter/finance";
import { ref, watchEffect } from "vue";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import modalConfig from "./config/modal.config";
import { usePageSearch, usePageModal, type PageHooks } from "/@/hooks/page";
// import { useCompany } from "/@/hooks/core/useCompany";
const PageName = "personnelReport";
const refModalConfig = ref(modalConfig);

const modalRef = ref(null);

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

async function get_list(type) {
  const arr = [];
  const { code, data } =
    type == 1
      ? await httpListAll({})
      : await httpList({ page: 1, size: 10000 });
  if (code === 0) {
    (type == 1 ? data : data.list).forEach(si => {
      const model = {
        value: type == 1 ? si.action : si.companyNo,
        label: type == 1 ? si.name : si.name
      };
      arr.push(model);
    });
  }
  return arr;
}

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig),
  pageModalHook: pageContentRef =>
    usePageModal({
      pageContentRef
    })
};

watchEffect(async () => {
  list.value = await get_list(1);
  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>
