<script setup lang="ts">
import type { BatchToolKey } from './types';

import { computed } from 'vue';

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

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

import StoreScopeToolbar from '../../shared/components/StoreScopeToolbar.vue';
import BatchImportExportPanel from './components/BatchImportExportPanel.vue';
import BatchMoveCategoryPanel from './components/BatchMoveCategoryPanel.vue';
import BatchPriceAdjustPanel from './components/BatchPriceAdjustPanel.vue';
import BatchSaleSwitchPanel from './components/BatchSaleSwitchPanel.vue';
import BatchStoreSyncPanel from './components/BatchStoreSyncPanel.vue';
import BatchToolCards from './components/BatchToolCards.vue';
import { useProductBatchPage } from './composables/useProductBatchPage';

const {
  activeTool,
  cards,
  categoryOptions,
  closeTool,
  downloadImportTemplate,
  exportCategoryIds,
  exportScopeType,
  importFile,
  isStoreLoading,
  isSubmitting,
  latestResultText,
  moveEstimatedCount,
  moveSourceCategoryId,
  moveTargetCategoryId,
  previewPriceAdjust,
  priceAmount,
  priceAmountType,
  priceDirection,
  pricePreview,
  pricePreviewLoading,
  productOptions,
  saleAction,
  scopeCategoryIds,
  scopeEstimatedCount,
  scopeProductIds,
  scopeType,
  selectedStoreId,
  selectedStoreLabel,
  setImportFile,
  setScopeType,
  setSelectedStoreId,
  storeOptions,
  submitExport,
  submitImport,
  submitMoveCategory,
  submitPriceAdjust,
  submitSaleSwitch,
  submitStoreSync,
  syncPrice,
  syncProductIds,
  syncStatus,
  syncStock,
  syncTargetStoreIds,
  targetStoreOptions,
  toggleTool,
} = useProductBatchPage();

function updateScopeCategoryIds(value: string[]) {
  scopeCategoryIds.value = value;
}

function updateScopeProductIds(value: string[]) {
  scopeProductIds.value = value;
}

function updatePriceDirection(value: 'down' | 'up') {
  priceDirection.value = value;
}

function updatePriceAmountType(value: 'fixed' | 'percent') {
  priceAmountType.value = value;
}

function updatePriceAmount(value: number) {
  priceAmount.value = value;
}

function updateSaleAction(value: 'off' | 'on') {
  saleAction.value = value;
}

function updateMoveSourceCategoryId(value: string) {
  moveSourceCategoryId.value = value;
}

function updateMoveTargetCategoryId(value: string) {
  moveTargetCategoryId.value = value;
}

function updateSyncTargetStoreIds(value: string[]) {
  syncTargetStoreIds.value = value;
}

function updateSyncProductIds(value: string[]) {
  syncProductIds.value = value;
}

function updateSyncPrice(value: boolean) {
  syncPrice.value = value;
}

function updateSyncStock(value: boolean) {
  syncStock.value = value;
}

function updateSyncStatus(value: boolean) {
  syncStatus.value = value;
}

function updateExportScopeType(value: 'all' | 'category') {
  exportScopeType.value = value;
}

function updateExportCategoryIds(value: string[]) {
  exportCategoryIds.value = value;
}

const toolTitleMap: Record<BatchToolKey, string> = {
  price: '批量调价',
  sale: '批量上下架',
  category: '批量移动分类',
  sync: '批量同步门店',
  excel: '导入导出',
};

const activeToolTitle = computed(() => {
  if (!activeTool.value) {
    return '';
  }
  return toolTitleMap[activeTool.value];
});
</script>

<template>
  <Page title="批量工具" content-class="page-product-batch">
    <div class="pbt-page">
      <StoreScopeToolbar
        class="pbt-toolbar-card"
        :selected-store-id="selectedStoreId"
        :store-options="storeOptions"
        :is-store-loading="isStoreLoading"
        :show-copy-button="false"
        @update:selected-store-id="setSelectedStoreId"
      >
        <template #actions>
          <div class="pbt-toolbar-tip">
            选择门店后，工具仅作用于当前门店商品
          </div>
        </template>
      </StoreScopeToolbar>

      <div v-if="isStoreLoading && !selectedStoreId" class="pbt-empty-wrap">
        <Spin tip="门店加载中..." />
      </div>

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

      <template v-else>
        <BatchToolCards
          :cards="cards"
          :active-tool="activeTool"
          @toggle="toggleTool"
        />
      </template>

      <Alert
        v-if="latestResultText"
        class="pbt-result"
        type="success"
        show-icon
        :message="latestResultText"
      />
    </div>

    <Drawer
      class="pbt-drawer"
      :title="activeToolTitle"
      :open="Boolean(activeTool)"
      :width="920"
      :closable="false"
      @close="closeTool"
    >
      <BatchPriceAdjustPanel
        v-if="activeTool === 'price'"
        :embedded="true"
        :open="true"
        :scope-type="scopeType"
        :scope-category-ids="scopeCategoryIds"
        :scope-product-ids="scopeProductIds"
        :category-options="categoryOptions"
        :product-options="productOptions"
        :direction="priceDirection"
        :amount-type="priceAmountType"
        :amount="priceAmount"
        :preview-items="pricePreview.items"
        :preview-total="pricePreview.totalCount"
        :preview-loading="pricePreviewLoading"
        :submitting="isSubmitting"
        @update:scope-type="setScopeType"
        @update:scope-category-ids="updateScopeCategoryIds"
        @update:scope-product-ids="updateScopeProductIds"
        @update:direction="updatePriceDirection"
        @update:amount-type="updatePriceAmountType"
        @update:amount="updatePriceAmount"
        @preview="previewPriceAdjust"
        @submit="submitPriceAdjust"
        @close="closeTool"
      />

      <BatchSaleSwitchPanel
        v-if="activeTool === 'sale'"
        :embedded="true"
        :open="true"
        :scope-type="scopeType"
        :scope-category-ids="scopeCategoryIds"
        :scope-product-ids="scopeProductIds"
        :category-options="categoryOptions"
        :product-options="productOptions"
        :estimated-count="scopeEstimatedCount"
        :action="saleAction"
        :submitting="isSubmitting"
        @update:scope-type="setScopeType"
        @update:scope-category-ids="updateScopeCategoryIds"
        @update:scope-product-ids="updateScopeProductIds"
        @update:action="updateSaleAction"
        @submit="submitSaleSwitch"
        @close="closeTool"
      />

      <BatchMoveCategoryPanel
        v-if="activeTool === 'category'"
        :embedded="true"
        :open="true"
        :category-options="categoryOptions"
        :source-category-id="moveSourceCategoryId"
        :target-category-id="moveTargetCategoryId"
        :estimated-count="moveEstimatedCount"
        :submitting="isSubmitting"
        @update:source-category-id="updateMoveSourceCategoryId"
        @update:target-category-id="updateMoveTargetCategoryId"
        @submit="submitMoveCategory"
        @close="closeTool"
      />

      <BatchStoreSyncPanel
        v-if="activeTool === 'sync'"
        :embedded="true"
        :open="true"
        :source-store-name="selectedStoreLabel"
        :target-store-ids="syncTargetStoreIds"
        :target-store-options="targetStoreOptions"
        :product-ids="syncProductIds"
        :product-options="productOptions"
        :sync-price="syncPrice"
        :sync-stock="syncStock"
        :sync-status="syncStatus"
        :submitting="isSubmitting"
        @update:target-store-ids="updateSyncTargetStoreIds"
        @update:product-ids="updateSyncProductIds"
        @update:sync-price="updateSyncPrice"
        @update:sync-stock="updateSyncStock"
        @update:sync-status="updateSyncStatus"
        @submit="submitStoreSync"
        @close="closeTool"
      />

      <BatchImportExportPanel
        v-if="activeTool === 'excel'"
        :embedded="true"
        :open="true"
        :selected-file-name="importFile?.name || ''"
        :export-scope-type="exportScopeType"
        :export-category-ids="exportCategoryIds"
        :category-options="categoryOptions"
        :submitting="isSubmitting"
        @select-file="setImportFile"
        @update:export-scope-type="updateExportScopeType"
        @update:export-category-ids="updateExportCategoryIds"
        @download-template="downloadImportTemplate"
        @submit-import="submitImport"
        @submit-export="submitExport"
        @close="closeTool"
      />
    </Drawer>
  </Page>
</template>

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