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

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

import SettlementAccountBar from './components/SettlementAccountBar.vue';
import SettlementFilterBar from './components/SettlementFilterBar.vue';
import SettlementStatsCards from './components/SettlementStatsCards.vue';
import SettlementTableCard from './components/SettlementTableCard.vue';
import { useFinanceSettlementPage } from './composables/useFinanceSettlementPage';

const {
  account,
  canExport,
  canView,
  detailStates,
  expandedRowKeys,
  filters,
  handleExpand,
  handleExport,
  handlePageChange,
  handleSearch,
  isAccountLoading,
  isExporting,
  isListLoading,
  isStoreLoading,
  pagination,
  rows,
  selectedStoreId,
  setChannel,
  setEndDate,
  setSelectedStoreId,
  setStartDate,
  stats,
  storeOptions,
} = useFinanceSettlementPage();
</script>

<template>
  <Page title="到账查询" content-class="page-finance-settlement">
    <div class="fst-page">
      <template v-if="canView">
        <SettlementStatsCards :stats="stats" />

        <SettlementAccountBar :account="account" :loading="isAccountLoading" />

        <SettlementFilterBar
          :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:channel="setChannel"
          @search="handleSearch"
          @export="handleExport"
        />

        <SettlementTableCard
          :rows="rows"
          :loading="isListLoading"
          :pagination="pagination"
          :expanded-row-keys="expandedRowKeys"
          :detail-states="detailStates"
          @expand="(expanded, row) => handleExpand({ expanded, row })"
          @page-change="handlePageChange"
        />
      </template>

      <Empty v-else description="暂无到账查询页面访问权限" />
    </div>
  </Page>
</template>

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