<script setup lang="ts">
import { ref } from "vue";
import RoleModal from "./components/role-modal.vue";
import contentConfig from "./config/content.config";
import searchConfig from "./config/search.config";
import { usePageSearch, type PageHooks, type PageEvents } from "/@/hooks/page";
import { httpSetRole } from "/@/api/supplierManage/supplierAccoutQuery";
import SupplierSelect from "/@/layout/components/company/super.vue";
import { useAsync } from "/@/hooks/core/useAsync";
import { ModalTypes } from "./types";

const PageName = "supplierAccoutQuery";
const roleModalRef = ref<InstanceType<typeof RoleModal> | null>(null);
const instance = ref(null);

const companyNo = ref("");

const searchFunc = () => {
  return {
    result: { companyNo: companyNo.value },
    deleteProps: []
  };
};

const hooks: PageHooks = {
  pageSearchHook: () =>
    usePageSearch(searchFunc, () => (companyNo.value = ""), searchConfig, true)
};

const { run } = useAsync({
  success: () => instance.value.onSearch()
});

const events: PageEvents = {
  content: {
    create: () => roleModalRef.value.onDisplay(undefined, ModalTypes.create),
    preview: data => roleModalRef.value.onDisplay(data, ModalTypes.preview),
    update: data => roleModalRef.value.onDisplay(data, ModalTypes.update)
  }
};

function handleSave(data: any, type: ModalTypes) {
  const { roleid, nickname, relaComNo, id, companyNo, mobile } = data;

  const params = {
    id,
    mobile,
    roleid,
    nickname,
    relaComNo,
    companyNo
  };

  switch (type) {
    case ModalTypes.update:
      run(httpSetRole(params));
      break;
  }
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :events="events"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      :get-content-ref="ref => (instance = ref)"
    >
      <template #search_field>
        <SupplierSelect
          style="margin-right: 20px; width: 100%"
          v-model="companyNo"
          placeholder="供应商公司"
          no-all
          no-set
          is-supplier
        />
      </template>
    </PageContainer>
    <RoleModal ref="roleModalRef" @finance-save="handleSave" />
  </PageAuth>
</template>
