<script setup lang="ts">
/**
 * 门店列表页面主视图：
 * - 页面级编排与组件组合
 * - 业务状态与动作由 composable 提供
 */
import { Page } from '@vben/common-ui';

import { Button, message } from 'ant-design-vue';

import StoreEditorDrawer from './components/StoreEditorDrawer.vue';
import StoreFilterBar from './components/StoreFilterBar.vue';
import StoreListTable from './components/StoreListTable.vue';
import StoreStatsCards from './components/StoreStatsCards.vue';
import { useStoreListPage } from './composables/useStoreListPage';

const {
  auditStatusMap,
  auditStatusOptions,
  businessStatusMap,
  businessStatusOptions,
  columns,
  drawerTitle,
  filters,
  formState,
  geoStatusMap,
  getAvatarColor,
  handleDeleteStore,
  handleRetryStoreGeocode,
  handleToggleStoreBusinessStatus,
  handleReset,
  handleSearch,
  handleSubmitStore,
  handleTableChange,
  isDrawerVisible,
  isLoading,
  isSubmitting,
  openCreateDrawer,
  openEditDrawer,
  serviceTypeMap,
  serviceTypeOptions,
  setAuditStatus,
  setBusinessStatus,
  setDrawerVisible,
  setFormAddress,
  setFormContactPhone,
  setFormManagerName,
  setFormName,
  setFormServiceTypes,
  setKeyword,
  setServiceType,
  statCards,
  storeList,
  tablePagination,
} = useStoreListPage();

/** 导出能力当前未实现，先给出占位提示。 */
function handleExport() {
  message.info('导出功能开发中');
}
</script>

<template>
  <Page title="门店列表" content-class="space-y-4 page-store-list">
    <template #extra>
      <div class="store-list-page-extra">
        <Button @click="handleExport">导出</Button>
        <Button type="primary" @click="openCreateDrawer">新增门店</Button>
      </div>
    </template>

    <StoreFilterBar
      :keyword="filters.keyword"
      :business-status="filters.businessStatus"
      :audit-status="filters.auditStatus"
      :service-type="filters.serviceType"
      :business-status-options="businessStatusOptions"
      :audit-status-options="auditStatusOptions"
      :service-type-options="serviceTypeOptions"
      :on-set-keyword="setKeyword"
      :on-set-business-status="setBusinessStatus"
      :on-set-audit-status="setAuditStatus"
      :on-set-service-type="setServiceType"
      @search="handleSearch"
      @reset="handleReset"
    />

    <StoreStatsCards :items="statCards" />

    <StoreListTable
      :columns="columns"
      :store-list="storeList"
      :is-loading="isLoading"
      :pagination="tablePagination"
      :service-type-map="serviceTypeMap"
      :geo-status-map="geoStatusMap"
      :business-status-map="businessStatusMap"
      :audit-status-map="auditStatusMap"
      :get-avatar-color="getAvatarColor"
      @table-change="handleTableChange"
      @edit="openEditDrawer"
      @delete="handleDeleteStore"
      @retry-geocode="handleRetryStoreGeocode"
      @toggle-business-status="handleToggleStoreBusinessStatus"
    />

    <StoreEditorDrawer
      :open="isDrawerVisible"
      :title="drawerTitle"
      :is-submitting="isSubmitting"
      :name="formState.name"
      :contact-phone="formState.contactPhone"
      :manager-name="formState.managerName"
      :address="formState.address"
      :service-types="formState.serviceTypes"
      :service-type-options="serviceTypeOptions"
      :on-set-name="setFormName"
      :on-set-contact-phone="setFormContactPhone"
      :on-set-manager-name="setFormManagerName"
      :on-set-address="setFormAddress"
      :on-set-service-types="setFormServiceTypes"
      @update:open="setDrawerVisible"
      @submit="handleSubmitStore"
    />
  </Page>
</template>

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