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

import CustomerDetailDrawer from './components/CustomerDetailDrawer.vue';
import CustomerFilterBar from './components/CustomerFilterBar.vue';
import CustomerProfileDrawer from './components/CustomerProfileDrawer.vue';
import CustomerStatsBar from './components/CustomerStatsBar.vue';
import CustomerTableCard from './components/CustomerTableCard.vue';
import { useCustomerListPage } from './composables/useCustomerListPage';

const {
  canManage,
  detail,
  filters,
  handleExport,
  handlePageChange,
  handleReset,
  handleSearch,
  isDetailDrawerOpen,
  isDetailLoading,
  isExporting,
  isListLoading,
  isProfileDrawerOpen,
  isProfileLoading,
  isStoreLoading,
  openDetail,
  openProfile,
  openProfilePage,
  pagination,
  profile,
  rows,
  selectedStoreId,
  setDetailDrawerOpen,
  setKeyword,
  setOrderCountRange,
  setProfileDrawerOpen,
  setRegisterPeriod,
  setSelectedStoreId,
  setTag,
  stats,
  storeOptions,
} = useCustomerListPage();
</script>

<template>
  <Page title="客户列表" content-class="page-customer-list">
    <div class="cl-page">
      <CustomerFilterBar
        :selected-store-id="selectedStoreId"
        :store-options="storeOptions"
        :is-store-loading="isStoreLoading"
        :filters="filters"
        :show-export="canManage"
        :is-exporting="isExporting"
        @update:selected-store-id="setSelectedStoreId"
        @update:tag="setTag"
        @update:order-count-range="setOrderCountRange"
        @update:register-period="setRegisterPeriod"
        @update:keyword="setKeyword"
        @search="handleSearch"
        @reset="handleReset"
        @export="handleExport"
      />

      <CustomerStatsBar :stats="stats" />

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

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

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

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