<script setup lang="ts">
import { PageSearch, usePageSearch } from "/@/components/PageSearch";
import { PageContent } from "/@/components/PageContent";
import searchFormConfig from "./config/search.config";
import modalConfig from "./config/modal.config";
import contentConfig from "./config/content.config";
import PagePower from "/@/components/PagePower/PagePower.vue";
import { usePermission } from "/@/hooks";
import { useRouter } from "vue-router";
import dayjs from "dayjs";

defineOptions({
  name: "returnTicket"
});

const search = ({ timer }) => {
  const [start, end] = timer;
  return {
    result: {
      start: dayjs(start).format("YYYY-MM-DD hh:mm:ss"),
      end: dayjs(end).format("YYYY-MM-DD hh:mm:ss")
    },
    deleteProps: ["timer"]
  };
};

const { push } = useRouter();
const { pageContentRef, handleResetClick, handleSearchClick } =
  usePageSearch(search);

function toDetail(returnCode) {
  push({
    path: "/InvoiceSales/returnTicketDetail",
    query: {
      id: returnCode
    }
  });
}

const { permission, contentConfigRef } = usePermission({
  pageName: "returnTicket",
  contentConfig,
  callback: powers => (contentConfig.powers = powers)
});
</script>

<template>
  <div class="main role">
    <PagePower :is-show="permission.list">
      <div w-full>
        <PageSearch
          :form-config="searchFormConfig"
          @search-btn-click="handleSearchClick"
          @reset-btn-click="handleResetClick"
        />

        <PageContent
          ref="pageContentRef"
          :content-config="contentConfigRef"
          @preview-btn-click="({ returnCode }) => toDetail(returnCode)"
          @create-btn-click="() => push('/InvoiceSales/returnTicketDetail')"
        />
      </div>
    </PagePower>
  </div>
</template>

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