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

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

import CustomerDetailDrawer from '#/views/customer/list/components/CustomerDetailDrawer.vue';
import CustomerProfileDrawer from '#/views/customer/list/components/CustomerProfileDrawer.vue';

import AmountDistributionCard from './components/AmountDistributionCard.vue';
import AnalysisStatsGrid from './components/AnalysisStatsGrid.vue';
import AnalysisToolbar from './components/AnalysisToolbar.vue';
import CompositionCard from './components/CompositionCard.vue';
import GrowthTrendCard from './components/GrowthTrendCard.vue';
import MemberDetailDrawer from './components/MemberDetailDrawer.vue';
import RfmMatrixCard from './components/RfmMatrixCard.vue';
import SegmentDrawer from './components/SegmentDrawer.vue';
import TopCustomerTableCard from './components/TopCustomerTableCard.vue';
import { useCustomerAnalysisPage } from './composables/useCustomerAnalysisPage';

const {
  detail,
  handleExport,
  handleSegmentPageChange,
  handleSegmentSearch,
  isDetailDrawerOpen,
  isDetailLoading,
  isExporting,
  isMemberDrawerOpen,
  isMemberLoading,
  isOverviewLoading,
  isProfileDrawerOpen,
  isProfileLoading,
  isSegmentDrawerOpen,
  isSegmentLoading,
  isStoreLoading,
  memberDetail,
  openDetail,
  openMember,
  openMemberFromDetail,
  openProfile,
  openProfilePage,
  openSegmentByCode,
  openTopCustomerDetail,
  overview,
  period,
  profile,
  segmentKeyword,
  segmentPagination,
  segmentResult,
  selectedStoreId,
  setDetailDrawerOpen,
  setMemberDrawerOpen,
  setPeriod,
  setProfileDrawerOpen,
  setSegmentDrawerOpen,
  setSegmentKeyword,
  setSelectedStoreId,
  storeOptions,
} = useCustomerAnalysisPage();
</script>

<template>
  <Page title="客户分析" content-class="page-customer-analysis">
    <div class="ca-page">
      <AnalysisToolbar
        :selected-store-id="selectedStoreId"
        :store-options="storeOptions"
        :is-store-loading="isStoreLoading"
        :period="period"
        :is-exporting="isExporting"
        @update:selected-store-id="setSelectedStoreId"
        @update:period="setPeriod"
        @export="handleExport"
      />

      <div v-if="!selectedStoreId" class="ca-empty">
        <Empty description="暂无门店，请先创建门店" />
      </div>

      <Spin v-else :spinning="isOverviewLoading">
        <AnalysisStatsGrid :overview="overview" @segment="openSegmentByCode" />

        <div class="ca-grid">
          <GrowthTrendCard
            :points="overview.growthTrend"
            @segment="openSegmentByCode"
          />

          <CompositionCard
            :items="overview.composition"
            :total-customers="overview.totalCustomers"
            @segment="openSegmentByCode"
          />

          <AmountDistributionCard
            :items="overview.amountDistribution"
            @segment="openSegmentByCode"
          />

          <RfmMatrixCard
            :rows="overview.rfmRows"
            @segment="openSegmentByCode"
          />

          <TopCustomerTableCard
            :rows="overview.topCustomers"
            @detail="openTopCustomerDetail"
            @segment="openSegmentByCode"
          />
        </div>
      </Spin>
    </div>

    <SegmentDrawer
      :open="isSegmentDrawerOpen"
      :loading="isSegmentLoading"
      :result="segmentResult"
      :pagination="segmentPagination"
      :keyword="segmentKeyword"
      @close="setSegmentDrawerOpen(false)"
      @update:keyword="setSegmentKeyword"
      @search="handleSegmentSearch"
      @page-change="handleSegmentPageChange"
      @detail="openDetail"
      @profile="openProfile"
      @member="openMember"
    />

    <CustomerDetailDrawer
      :open="isDetailDrawerOpen"
      :loading="isDetailLoading"
      :detail="detail"
      :show-member-action="true"
      @close="setDetailDrawerOpen(false)"
      @profile="openProfile"
      @profile-page="openProfilePage"
      @member="openMemberFromDetail"
    />

    <CustomerProfileDrawer
      :open="isProfileDrawerOpen"
      :loading="isProfileLoading"
      :profile="profile"
      @close="setProfileDrawerOpen(false)"
    />

    <MemberDetailDrawer
      :open="isMemberDrawerOpen"
      :loading="isMemberLoading"
      :detail="memberDetail"
      @close="setMemberDrawerOpen(false)"
    />
  </Page>
</template>

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