<script setup lang="ts">
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageModal, usePageModal } from "/@/components/PageModal";
import { PageContent } from "/@/components/PageContent";
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import modalConfig from "./config/modal.config";

defineOptions({
  name: "invoiceheader"
});

const { pageContentRef, handleResetClick, handleSearchClick } = usePageSearch();

const {
  pageModalRef,
  handleUpdateData,
  handleCreateData,
  handlePreviewData,
  handleConfrim,
  defaultInfo
} = usePageModal({ pageContentRef });
</script>

<template>
  <div class="main role">
    <PageSearch
      :form-config="searchFormConfig"
      @search-btn-click="handleSearchClick"
      @reset-btn-click="handleResetClick"
    />
    <PageContent
      ref="pageContentRef"
      :content-config="contentConfig"
      @create-btn-click="handleCreateData"
      @update-btn-click="handleUpdateData"
      @preview-btn-click="handlePreviewData"
    />
    <PageModal
      ref="pageModalRef"
      prview-description
      :modal-config="modalConfig"
      :default-info="defaultInfo"
      @confirm-btn-click="handleConfrim"
    />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
