<script setup lang="ts">
import { ref } from "vue";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import InvoiceDialog from "./invoice-dialog.vue";

defineOptions({
  name: "inputInvoice"
});

const invoiceDialogRef = ref<InstanceType<typeof InvoiceDialog>>(null);

function searchCallback({ open_timer, start_timer }) {
  const [open_start, open_end] = open_timer;
  const [start, end] = start_timer;

  const result = {
    open_start,
    open_end,
    start,
    end
  };

  return {
    result,
    deleteProps: ["open_timer", "start_timer"]
  };
}

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

function handlePreviewInvoice(invoiceData) {
  invoiceDialogRef.value.onDisplay(invoiceData);
}
</script>

<template>
  <div class="main role">
    <PageSearch
      :form-config="searchFormConfig"
      @search-btn-click="handleSearchClick"
      @reset-btn-click="handleResetClick"
    />
    <PageContent
      ref="pageContentRef"
      :content-config="contentConfig"
      @preview-btn-click="handlePreviewInvoice"
    />

    <InvoiceDialog ref="invoiceDialogRef" />
  </div>
</template>

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