<script setup lang="ts">
/**
 * 文件职责：商品列表页面主视图。
 * 1. 组装分类侧栏、筛选条、动作条、列表区。
 * 2. 挂载添加/编辑、快速编辑、沽清抽屉。
 */
import type { ProductBatchAction } from './types';

import { Page } from '@vben/common-ui';

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

import ProductActionBar from './components/ProductActionBar.vue';
import ProductCategorySidebar from './components/ProductCategorySidebar.vue';
import ProductEditorDrawer from './components/ProductEditorDrawer.vue';
import ProductFilterToolbar from './components/ProductFilterToolbar.vue';
import ProductListSection from './components/ProductListSection.vue';
import ProductQuickEditDrawer from './components/ProductQuickEditDrawer.vue';
import ProductSoldoutDrawer from './components/ProductSoldoutDrawer.vue';
import { PRODUCT_BATCH_ACTION_OPTIONS } from './composables/product-list-page/constants';
import { useProductListPage } from './composables/useProductListPage';

const {
  PAGE_SIZE_OPTIONS,
  PRODUCT_KIND_OPTIONS,
  PRODUCT_STATUS_OPTIONS,
  applySearchFilters,
  categoryOptions,
  categorySidebarItems,
  clearSelection,
  comboPickerKeyword,
  comboPickerProducts,
  comboPickerSelectedIds,
  deleteProduct,
  editorDrawerMode,
  editorDrawerTitle,
  editorForm,
  editorSubmitText,
  filters,
  handleBatchCommand,
  handlePageChange,
  handleSingleStatusChange,
  handleToggleSelect,
  handleToggleSelectAll,
  isAllCurrentPageChecked,
  isCategoryLoading,
  isComboPickerLoading,
  isComboPickerOpen,
  isCurrentPageIndeterminate,
  isEditorDrawerOpen,
  isEditorSubmitting,
  isListLoading,
  isQuickEditDrawerOpen,
  isQuickEditSubmitting,
  isSoldoutDrawerOpen,
  isSoldoutSubmitting,
  isStoreLoading,
  openCreateProductDrawer,
  openEditDrawer,
  openProductDetail,
  openProductDetailById,
  openQuickEditDrawer,
  openSoldoutDrawer,
  products,
  quickEditForm,
  quickEditSummary,
  selectedCount,
  selectedProductIds,
  selectedStoreId,
  addEditorComboGroup,
  loadComboPickerProducts,
  openComboGroupPicker,
  removeEditorComboGroup,
  removeEditorComboItem,
  setComboPickerKeyword,
  setComboPickerOpen,
  setEditorCategoryId,
  setEditorComboGroupMaxSelect,
  setEditorComboGroupMinSelect,
  setEditorComboGroupName,
  setEditorComboItemQuantity,
  setEditorDescription,
  setEditorDrawerOpen,
  setEditorKind,
  setEditorName,
  setEditorOriginalPrice,
  setEditorPrice,
  setEditorShelfMode,
  setEditorStock,
  setEditorSubtitle,
  setEditorTimedOnShelfAt,
  setFilterKind,
  setFilterKeyword,
  setFilterStatus,
  setQuickEditDrawerOpen,
  setQuickEditOnSale,
  setQuickEditOriginalPrice,
  setQuickEditPrice,
  setQuickEditStock,
  setSelectedCategoryId,
  setSelectedStoreId,
  setSoldoutDrawerOpen,
  setSoldoutMode,
  setSoldoutNotifyManager,
  setSoldoutReason,
  setSoldoutRecoverAt,
  setSoldoutRemainStock,
  setSoldoutSyncToPlatform,
  submitComboPickerSelection,
  setViewMode,
  soldoutForm,
  soldoutSummary,
  storeOptions,
  submitEditor,
  submitQuickEdit,
  submitSoldout,
  toggleComboPickerProduct,
  total,
  viewMode,
} = useProductListPage();

/** 快速编辑抽屉跳转详情。 */
function handleQuickEditDetail() {
  if (!quickEditSummary.value) return;
  openProductDetail(quickEditSummary.value);
}

/** 添加/编辑抽屉跳转详情。 */
function handleEditorDetail() {
  if (!editorForm.id) return;
  openProductDetailById(editorForm.id);
}

/** 批量动作透传。 */
function onBatchAction(action: ProductBatchAction) {
  handleBatchCommand(action);
}
</script>

<template>
  <Page title="商品列表" content-class="space-y-4 page-product-list">
    <template v-if="storeOptions.length === 0">
      <Card :bordered="false">
        <Empty description="暂无门店，请先创建门店" />
      </Card>
    </template>

    <template v-else>
      <div class="product-page-layout">
        <ProductCategorySidebar
          :categories="categorySidebarItems"
          :selected-category-id="filters.categoryId"
          :is-loading="isCategoryLoading"
          @select="setSelectedCategoryId"
        />

        <div class="product-page-content">
          <ProductFilterToolbar
            :selected-store-id="selectedStoreId"
            :store-options="storeOptions"
            :is-store-loading="isStoreLoading"
            :keyword="filters.keyword"
            :status="filters.status"
            :kind="filters.kind"
            :status-options="PRODUCT_STATUS_OPTIONS"
            :kind-options="PRODUCT_KIND_OPTIONS"
            :view-mode="viewMode"
            @update:selected-store-id="setSelectedStoreId"
            @update:keyword="setFilterKeyword"
            @update:status="setFilterStatus"
            @update:kind="setFilterKind"
            @update:view-mode="setViewMode"
            @search="applySearchFilters"
          />

          <ProductActionBar
            :selected-count="selectedCount"
            :batch-disabled="selectedCount === 0"
            :batch-action-options="PRODUCT_BATCH_ACTION_OPTIONS"
            @add="openCreateProductDrawer"
            @batch-action="onBatchAction"
            @clear-selection="clearSelection"
          />

          <ProductListSection
            :rows="products"
            :view-mode="viewMode"
            :selected-product-ids="selectedProductIds"
            :is-loading="isListLoading"
            :all-checked="isAllCurrentPageChecked"
            :indeterminate="isCurrentPageIndeterminate"
            :page="filters.page"
            :page-size="filters.pageSize"
            :page-size-options="PAGE_SIZE_OPTIONS"
            :total="total"
            @toggle-select="handleToggleSelect"
            @toggle-select-all="handleToggleSelectAll"
            @page-change="handlePageChange"
            @edit="openEditDrawer"
            @quick-edit="openQuickEditDrawer"
            @detail="openProductDetail"
            @delete="deleteProduct"
            @change-status="handleSingleStatusChange"
            @soldout="openSoldoutDrawer"
          />
        </div>
      </div>
    </template>

    <ProductEditorDrawer
      :open="isEditorDrawerOpen"
      :title="editorDrawerTitle"
      :submit-text="editorSubmitText"
      :show-detail-link="editorDrawerMode === 'edit'"
      :form="editorForm"
      :category-options="categoryOptions"
      :is-saving="isEditorSubmitting"
      :on-set-name="setEditorName"
      :on-set-subtitle="setEditorSubtitle"
      :on-set-category-id="setEditorCategoryId"
      :on-set-description="setEditorDescription"
      :on-set-kind="setEditorKind"
      :on-add-combo-group="addEditorComboGroup"
      :on-remove-combo-group="removeEditorComboGroup"
      :on-set-combo-group-name="setEditorComboGroupName"
      :on-set-combo-group-min-select="setEditorComboGroupMinSelect"
      :on-set-combo-group-max-select="setEditorComboGroupMaxSelect"
      :on-remove-combo-item="removeEditorComboItem"
      :on-set-combo-item-quantity="setEditorComboItemQuantity"
      :on-open-combo-group-picker="openComboGroupPicker"
      :on-set-price="setEditorPrice"
      :on-set-original-price="setEditorOriginalPrice"
      :on-set-stock="setEditorStock"
      :on-set-shelf-mode="setEditorShelfMode"
      :on-set-timed-on-shelf-at="setEditorTimedOnShelfAt"
      :combo-picker-open="isComboPickerOpen"
      :combo-picker-loading="isComboPickerLoading"
      :combo-picker-keyword="comboPickerKeyword"
      :combo-picker-products="comboPickerProducts"
      :combo-picker-selected-ids="comboPickerSelectedIds"
      :on-set-combo-picker-open="setComboPickerOpen"
      :on-set-combo-picker-keyword="setComboPickerKeyword"
      :on-search-combo-picker="loadComboPickerProducts"
      :on-toggle-combo-picker-product="toggleComboPickerProduct"
      :on-submit-combo-picker="submitComboPickerSelection"
      @update:open="setEditorDrawerOpen"
      @submit="submitEditor"
      @detail="handleEditorDetail"
    />

    <ProductQuickEditDrawer
      :open="isQuickEditDrawerOpen"
      :form="quickEditForm"
      :product="quickEditSummary"
      :is-saving="isQuickEditSubmitting"
      :on-set-price="setQuickEditPrice"
      :on-set-original-price="setQuickEditOriginalPrice"
      :on-set-stock="setQuickEditStock"
      :on-set-is-on-sale="setQuickEditOnSale"
      @update:open="setQuickEditDrawerOpen"
      @submit="submitQuickEdit"
      @detail="handleQuickEditDetail"
    />

    <ProductSoldoutDrawer
      :open="isSoldoutDrawerOpen"
      :form="soldoutForm"
      :product="soldoutSummary"
      :is-saving="isSoldoutSubmitting"
      :on-set-mode="setSoldoutMode"
      :on-set-remain-stock="setSoldoutRemainStock"
      :on-set-reason="setSoldoutReason"
      :on-set-recover-at="setSoldoutRecoverAt"
      :on-set-sync-to-platform="setSoldoutSyncToPlatform"
      :on-set-notify-manager="setSoldoutNotifyManager"
      @update:open="setSoldoutDrawerOpen"
      @submit="submitSoldout"
    />
  </Page>
</template>

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