<script setup lang="ts">
/**
 * 文件职责：财务中心交易流水页面入口编排。
 */
import { Page } from '@vben/common-ui';

import { Empty } from 'ant-design-vue';

import RelatedOrderDrawer from './components/RelatedOrderDrawer.vue';
import TransactionDetailDrawer from './components/TransactionDetailDrawer.vue';
import TransactionExportModal from './components/TransactionExportModal.vue';
import TransactionFilterBar from './components/TransactionFilterBar.vue';
import TransactionStatsBar from './components/TransactionStatsBar.vue';
import TransactionTableCard from './components/TransactionTableCard.vue';
import { useFinanceTransactionPage } from './composables/useFinanceTransactionPage';

const {
  canExport,
  canView,
  filters,
  handleConfirmExport,
  handlePageChange,
  handleSearch,
  isExportModalOpen,
  isExporting,
  isListLoading,
  isRelatedOrderDrawerOpen,
  isRelatedOrderLoading,
  isStoreLoading,
  isTransactionDetailLoading,
  isTransactionDrawerOpen,
  openExportModal,
  openRelatedOrder,
  openTransactionDetail,
  pageSummary,
  pagination,
  relatedOrderDetail,
  rows,
  selectedStoreId,
  selectedStoreName,
  setChannel,
  setEndDate,
  setExportModalOpen,
  setKeyword,
  setPaymentMethod,
  setQuickRange,
  setRelatedOrderDrawerOpen,
  setSelectedStoreId,
  setStartDate,
  setTransactionDrawerOpen,
  setType,
  stats,
  storeOptions,
  transactionDetail,
} = useFinanceTransactionPage();
</script>

<template>
  <Page title="交易流水" content-class="page-finance-transaction">
    <div class="ft-page">
      <template v-if="canView">
        <TransactionStatsBar :stats="stats" />

        <TransactionFilterBar
          :selected-store-id="selectedStoreId"
          :store-options="storeOptions"
          :is-store-loading="isStoreLoading"
          :filters="filters"
          :can-export="canExport"
          :is-exporting="isExporting"
          @update:selected-store-id="setSelectedStoreId"
          @update:start-date="setStartDate"
          @update:end-date="setEndDate"
          @update:quick-range="setQuickRange"
          @update:type="setType"
          @update:channel="setChannel"
          @update:payment-method="setPaymentMethod"
          @update:keyword="setKeyword"
          @search="handleSearch"
          @export="openExportModal"
        />

        <TransactionTableCard
          :rows="rows"
          :loading="isListLoading"
          :pagination="pagination"
          :page-income-amount="pageSummary.pageIncomeAmount"
          :page-refund-amount="pageSummary.pageRefundAmount"
          @page-change="handlePageChange"
          @detail="openTransactionDetail"
          @order-detail="openRelatedOrder"
        />
      </template>

      <Empty v-else description="暂无交易流水页面访问权限" />
    </div>

    <TransactionDetailDrawer
      :open="isTransactionDrawerOpen"
      :loading="isTransactionDetailLoading"
      :detail="transactionDetail"
      @close="setTransactionDrawerOpen(false)"
      @order-detail="openRelatedOrder"
    />

    <RelatedOrderDrawer
      :open="isRelatedOrderDrawerOpen"
      :loading="isRelatedOrderLoading"
      :detail="relatedOrderDetail"
      @close="setRelatedOrderDrawerOpen(false)"
    />

    <TransactionExportModal
      :open="isExportModalOpen"
      :submitting="isExporting"
      :filters="filters"
      :selected-store-name="selectedStoreName"
      :total-count="stats.totalCount"
      @close="setExportModalOpen(false)"
      @confirm="handleConfirmExport"
    />
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>
