<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 Invoice from "/@/components/InvoiceTitle";
import { httpDetail } from "/@/api/InvoiceSales/invoiceApply";
import { useResponseHandle } from "/@/hooks";

defineOptions({
  name: "invoiceheader"
});

const visible = ref(false);
const currentInvocice = ref<Record<string, string>>({});
const responseHandle = useResponseHandle();

function searchCallback({ timer }) {
  const [start, end] = timer;

  const result = {
    start,
    end
  };

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

async function onDisplayInvoice(invNo) {
  visible.value = true;
  const { code, message, data } = await httpDetail({
    invNo
  });

  responseHandle({
    code,
    message,
    handler: () => { 
      currentInvocice.value = data;
    }
  });
}

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

onMounted(
  () =>
    (contentConfig.powers = useUserStoreHook().getMenuActions("invoicePool"))
);
</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="({ invNo }) => onDisplayInvoice(invNo)"
        />
      </div>

      <el-dialog width="1040px" v-model="visible">
        <Invoice :invoice-data="currentInvocice" />
      </el-dialog>
    </PagePower>
  </div>
</template>

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