<script setup lang="ts">
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import { onMounted, ref } from "vue";
import { useUserStoreHook } from "/@/store/modules/user";
import PagePower from "/@/components/PagePower/PagePower.vue";
import DetailDialog from "./detail-dialog.vue";

defineOptions({
  name: "invoiceheader"
});

const detailDialogRef = ref<InstanceType<typeof DetailDialog>>(null);

function searchCallback({ totalRange, order_timer }) {
  const [total_min, total_max] = totalRange;
  const [start, end] = order_timer;

  const result = {
    total_max,
    total_min,
    start,
    end
  };

  return {
    result,
    deleteProps: ["totalRange"]
  };
}

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

onMounted(
  () =>
    (contentConfig.powers = useUserStoreHook().getMenuActions("sheetOrderPool"))
);
</script>

<template>
  <div class="main role">
    <PagePower :is-show="contentConfig.powers.some(i => i === '001')">
      <div w-full>
        <PageSearch
          :form-config="searchFormConfig"
          @search-btn-click="handleSearchClick"
          @reset-btn-click="handleResetClick"
        />
        <PageContent
          ref="pageContentRef"
          :content-config="contentConfig"
          @preview-btn-click="
            ({ sequenceNo }) => detailDialogRef.onDisplay(sequenceNo)
          "
        />
      </div>
    </PagePower>

    <DetailDialog ref="detailDialogRef" />
  </div>
</template>

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