<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import searchFormConfig from "./config/search.config";
import contentConfig from "./config/content.config";
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import CreateTicketDialog from "./components/create-ticket-dialog/index.vue";
import PagePower from "/@/components/PagePower/PagePower.vue";
import { useUserStoreHook } from "/@/store/modules/user";
import InvoiceDialog from "./components/invoice-dialog.vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import dayjs from "dayjs";

defineOptions({
  name: "ticketReturn"
});

const TicketDialog = ref<InstanceType<typeof CreateTicketDialog>>(null);
const { push } = useRouter();

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

  const result = {
    start,
    end,
    open_start: open_start ? dayjs(open_start).format("YYYY-MM-DD") : "",
    open_end: open_end ? dayjs(open_end).format("YYYY-MM-DD") : ""
  };

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

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

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

function handleCreate() {
  TicketDialog.value.onDisplay();
}

function toDetail({ hpNo }) {
  push({
    path: "/purchase/ticketReturnDetail",
    query: {
      id: hpNo
    }
  });
}

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

<template>
  <div class="main role">
    <PagePower :isShow="contentConfig.powers.some(i => i === '001')">
      <div w-full>
        <PageSearch
          :form-config="searchFormConfig"
          @search-btn-click="handleSearchClick"
          @reset-btn-click="handleResetClick"
        />

        <PageContent
          ref="pageContentRef"
          @preview-btn-click="toDetail"
          :content-config="contentConfig"
        >
          <template #create>
            <el-button type="primary" @click="handleCreate">新建</el-button>
          </template>

          <template #custom="row">
            <el-button
              v-if="row.invoiceNumber"
              type="primary"
              link
              :icon="useRenderIcon('scaletooriginal')"
              @click="() => invoiceDialogRef.onDisplay(row)"
            />
          </template>
        </PageContent>
      </div>

      <!-- 展示对账列表数据 根据对账列表payNo创建采购回单数据 -->
      <CreateTicketDialog
        @reload="() => pageContentRef.onSearch()"
        ref="TicketDialog"
      />
    </PagePower>

    <InvoiceDialog :invoiceData="invoiceDetail" ref="invoiceDialogRef" />
  </div>
</template>

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