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

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

import OverviewCompositionCard from './components/OverviewCompositionCard.vue';
import OverviewIncomeTrendCard from './components/OverviewIncomeTrendCard.vue';
import OverviewKpiRow from './components/OverviewKpiRow.vue';
import OverviewProfitTrendCard from './components/OverviewProfitTrendCard.vue';
import OverviewToolbar from './components/OverviewToolbar.vue';
import OverviewTopProductsCard from './components/OverviewTopProductsCard.vue';
import { useFinanceOverviewPage } from './composables/useFinanceOverviewPage';

const {
  canQueryCurrentScope,
  canView,
  costCompositionItems,
  dashboard,
  filters,
  hasStore,
  incomeCompositionItems,
  incomeTrendPoints,
  isDashboardLoading,
  isStoreLoading,
  OVERVIEW_DIMENSION_OPTIONS,
  profitTrendPoints,
  setDimension,
  setIncomeRange,
  setProfitRange,
  setStoreId,
  showStoreSelect,
  storeOptions,
  topProductMaxPercentage,
  trendState,
} = useFinanceOverviewPage();
</script>

<template>
  <Page title="财务概览" content-class="page-finance-overview">
    <div class="fo-page">
      <OverviewToolbar
        :dimension="filters.dimension"
        :dimension-options="OVERVIEW_DIMENSION_OPTIONS"
        :show-store-select="showStoreSelect"
        :store-id="filters.storeId"
        :store-options="storeOptions"
        :is-store-loading="isStoreLoading"
        @update:dimension="setDimension"
        @update:store-id="setStoreId"
      />

      <Empty v-if="!canView" description="暂无财务概览页面访问权限" />

      <div v-else-if="showStoreSelect && !hasStore" class="fo-empty">
        <Empty description="暂无门店，请先创建门店" />
      </div>

      <div v-else-if="!canQueryCurrentScope" class="fo-empty">
        <Empty description="请选择门店后查看数据" />
      </div>

      <Spin v-else :spinning="isDashboardLoading">
        <OverviewKpiRow :dashboard="dashboard" />

        <OverviewIncomeTrendCard
          :points="incomeTrendPoints"
          :range="trendState.incomeRange"
          @update:range="setIncomeRange"
        />

        <div class="fo-two-col">
          <OverviewCompositionCard
            title="收入构成"
            total-label="总实收"
            :total-amount="dashboard.incomeComposition.totalAmount"
            :items="incomeCompositionItems"
          />

          <OverviewCompositionCard
            title="成本占比"
            total-label="总成本"
            :total-amount="dashboard.costComposition.totalAmount"
            :items="costCompositionItems"
          />
        </div>

        <OverviewProfitTrendCard
          :points="profitTrendPoints"
          :range="trendState.profitRange"
          @update:range="setProfitRange"
        />

        <OverviewTopProductsCard
          :items="dashboard.topProducts.items"
          :period-days="dashboard.topProducts.periodDays"
          :max-percentage="topProductMaxPercentage"
        />
      </Spin>
    </div>
  </Page>
</template>

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