<script setup lang="ts">
import { Page } from '@vben/common-ui';

import OrderDetailDrawer from './components/OrderDetailDrawer.vue';
import OrderFilterBar from './components/OrderFilterBar.vue';
import OrderStatsBar from './components/OrderStatsBar.vue';
import OrderTableCard from './components/OrderTableCard.vue';
import { useOrderAllPage } from './composables/useOrderAllPage';

const {
  detail,
  filters,
  handleExport,
  handlePageChange,
  handleSearch,
  isDetailLoading,
  isDrawerOpen,
  isExporting,
  isListLoading,
  isStoreLoading,
  openDetail,
  pagination,
  rows,
  selectedStoreId,
  setChannel,
  setDrawerOpen,
  setEndDate,
  setKeyword,
  setPaymentMethod,
  setSelectedStoreId,
  setStartDate,
  setStatus,
  stats,
  storeOptions,
} = useOrderAllPage();
</script>

<template>
  <Page title="全部订单" content-class="page-order-all">
    <div class="oa-page">
      <OrderFilterBar
        :selected-store-id="selectedStoreId"
        :store-options="storeOptions"
        :is-store-loading="isStoreLoading"
        :filters="filters"
        :is-exporting="isExporting"
        @update:selected-store-id="setSelectedStoreId"
        @update:start-date="setStartDate"
        @update:end-date="setEndDate"
        @update:status="setStatus"
        @update:channel="setChannel"
        @update:payment-method="setPaymentMethod"
        @update:keyword="setKeyword"
        @search="handleSearch"
        @export="handleExport"
      />

      <OrderStatsBar :stats="stats" />

      <OrderTableCard
        :rows="rows"
        :loading="isListLoading"
        :pagination="pagination"
        @page-change="handlePageChange"
        @detail="openDetail"
      />
    </div>

    <OrderDetailDrawer
      :open="isDrawerOpen"
      :loading="isDetailLoading"
      :detail="detail"
      @close="setDrawerOpen(false)"
    />
  </Page>
</template>

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