<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 CreateTicketDialog from "./components/create-ticket-dialog/index.vue";
import { useRouter } from "vue-router";

defineOptions({
  name: "ticketReturn"
});

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

function searchCallback({ timer }: any) {
  const [start, end] = timer;
  return {
    result: { start, end },
    deleteProps: ["timer"]
  };
}

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

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

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

<template>
  <div class="main role">
    <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>
    </PageContent>

    <!-- 展示对账列表数据 根据对账列表payNo创建采购回单数据 -->
    <CreateTicketDialog ref="TicketDialog" />
  </div>
</template>

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