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

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

const { hasPermissionWithCode } = usePermission("updateInvoice")

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

function handleEdit(row) { 
  invoiceModalRef.value?.onDisplay(row);
}
</script>

<template>
  <PageAuth :pageName="PageName">
    <PageContainer
      :hooks="hooks"
      :contentConfig="contentConfig"
      :search-config="searchConfig"
      :get-content-ref="ref => contentRef = ref"
    >
      <template #content_action="row">
        <el-tooltip content="编辑" v-if="String(row.status) === '4' && hasPermissionWithCode('005')">
          <el-button type="text" :icon="useRenderIcon('edit')" @click="handleEdit(row)" />
        </el-tooltip>
      </template>
    </PageContainer>
    <InvoiceModal ref="invoiceModalRef" @refresh="contentRef.onSearch()" />
  </PageAuth>
</template>
