<script setup lang="ts">
import { ref } from "vue";
import { usePageSearch, type PageHooks } from "/@/hooks/page";
import contentConfig from "./components/sale-config/content.config";
import searchConfig from "./components/sale-config/search.config";
import InvoiceModal from "./components/components/invoice-modal.vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

const invStatus = ["4", "6"];

const PageName = "invoiceQuery";
const invoiceModalRef = ref<InstanceType<typeof InvoiceModal> | null>(null);

const hooks: PageHooks = {
  pageSearchHook: () => usePageSearch(undefined, undefined, searchConfig)
};
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
    >
      <template #content_action="row">
        <ElButton
          v-if="invStatus.includes(String(row.status))"
          link
          type="primary"
          :icon="useRenderIcon('scaletooriginal')"
          @click="() => invoiceModalRef.onDisplay(row.inv_number)"
        />
      </template>
    </PageContainer>
    <InvoiceModal ref="invoiceModalRef" />
  </PageAuth>
</template>
