<script setup lang="ts">
import type { UploadProps } from 'ant-design-vue';
import type { Dayjs } from 'dayjs';

import type { ProductDetailSectionItem } from './types';

import {
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
} from 'vue';

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

import {
  Button,
  Card,
  DatePicker,
  Empty,
  Input,
  InputNumber,
  Modal,
  Select,
  Spin,
  Switch,
  Upload,
} from 'ant-design-vue';
import dayjs from 'dayjs';

import { useProductDetailPage } from './composables/useProductDetailPage';

const {
  addonGroupOptions,
  addComboGroup,
  applySkuBatchPrice,
  applySkuBatchStock,
  categoryOptions,
  comboPickerKeyword,
  comboPickerLoading,
  comboPickerOpen,
  comboPickerProducts,
  comboPickerSelectedIds,
  comboPickerSelectedProducts,
  deleteCurrentProduct,
  detail,
  form,
  getOptionDisplayText,
  getSkuAttrOptionId,
  goBack,
  isLoading,
  isSubmitting,
  isUploadingImage,
  labelOptions,
  openComboPicker,
  removeComboGroup,
  removeComboItem,
  removeImage,
  saveDetail,
  searchComboPicker,
  setComboGroupMaxSelect,
  setComboGroupMinSelect,
  setComboGroupName,
  setComboItemQuantity,
  setComboPickerOpen,
  setPrimaryImage,
  setShelfMode,
  setSkuEnabled,
  setSkuOriginalPrice,
  setSkuPrice,
  setSkuStock,
  skuBatch,
  skuTemplateColumns,
  specTemplateOptions,
  statusColor,
  statusText,
  submitComboPicker,
  toggleAddonGroup,
  toggleComboPickerProduct,
  toggleLabel,
  toggleSaleStatus,
  toggleSpecTemplate,
  uploadImages,
} = useProductDetailPage();

const activeSectionId = ref('detail-basic');

const sectionList = computed<ProductDetailSectionItem[]>(() => {
  const sections: ProductDetailSectionItem[] = [
    { id: 'detail-basic', title: '基本信息' },
    { id: 'detail-images', title: '商品图片' },
    { id: 'detail-pricing', title: '价格库存' },
    { id: 'detail-specs', title: '规格做法' },
    { id: 'detail-sku', title: 'SKU管理' },
    { id: 'detail-addons', title: '加料管理' },
    { id: 'detail-tags', title: '商品标签' },
  ];
  if (form.kind === 'combo') {
    sections.push({ id: 'detail-combo', title: '套餐分组' });
  }
  sections.push({ id: 'detail-shelf', title: '上架设置' });
  return sections;
});

const isOnSale = computed(() => form.status === 'on_sale');
const maxUploadReached = computed(() => form.imageUrls.length >= 5);
const skuCountText = computed(() => `共 ${form.skus.length} 个 SKU`);
const originalPriceValue = computed<number | undefined>({
  get: () => form.originalPrice ?? undefined,
  set: (value) => {
    form.originalPrice = value ?? null;
  },
});
const warningStockValue = computed<number | undefined>({
  get: () => form.warningStock ?? undefined,
  set: (value) => {
    form.warningStock = value ?? null;
  },
});
const packingFeeValue = computed<number | undefined>({
  get: () => form.packingFee ?? undefined,
  set: (value) => {
    form.packingFee = value ?? null;
  },
});
const skuBatchPriceValue = computed<number | undefined>({
  get: () => skuBatch.price ?? undefined,
  set: (value) => {
    skuBatch.price = value ?? null;
  },
});
const skuBatchStockValue = computed<number | undefined>({
  get: () => skuBatch.stock ?? undefined,
  set: (value) => {
    skuBatch.stock = value ?? null;
  },
});

const timedOnShelfValue = computed<Dayjs | undefined>({
  get: () =>
    form.timedOnShelfAt && dayjs(form.timedOnShelfAt).isValid()
      ? dayjs(form.timedOnShelfAt)
      : undefined,
  set: (value) => {
    form.timedOnShelfAt = value ? value.format('YYYY-MM-DD HH:mm:ss') : '';
  },
});

let pendingUploadBatchSignature = '';

const beforeUpload: UploadProps['beforeUpload'] = async (file, fileList) => {
  const selectedFiles = (fileList?.length ? fileList : [file])
    .map((item) => {
      const uploadFile = item as { originFileObj?: File };
      return uploadFile.originFileObj ?? (item as File);
    })
    .filter((item): item is File => item instanceof File);
  if (selectedFiles.length === 0) return false;

  const batchSignature = selectedFiles
    .map((item) => `${item.name}:${item.size}:${item.lastModified}`)
    .join('|');
  if (batchSignature && batchSignature === pendingUploadBatchSignature) {
    return false;
  }

  const currentUid = String((file as { uid?: string }).uid || '');
  const firstUid = String(
    (fileList?.[0] as undefined | { uid?: string })?.uid || '',
  );
  if (currentUid && firstUid && currentUid !== firstUid) {
    return false;
  }

  pendingUploadBatchSignature = batchSignature;
  try {
    await uploadImages(selectedFiles);
  } finally {
    if (pendingUploadBatchSignature === batchSignature) {
      pendingUploadBatchSignature = '';
    }
  }
  return false;
};

function scrollToSection(sectionId: string) {
  activeSectionId.value = sectionId;
  const target = document.querySelector<HTMLElement>(`#${sectionId}`);
  if (!target) return;
  target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function updateActiveSectionByScroll() {
  const ids = sectionList.value.map((item) => item.id);
  let current = ids[0] || 'detail-basic';
  for (const id of ids) {
    const section = document.querySelector<HTMLElement>(`#${id}`);
    if (!section) continue;
    if (section.getBoundingClientRect().top <= 110) {
      current = id;
    }
  }
  activeSectionId.value = current;
}

function formatPrice(value: null | number | string | undefined) {
  return `¥${Number(value || 0).toFixed(2)}`;
}

function confirmDelete() {
  Modal.confirm({
    title: '确认删除该商品吗？',
    content: '删除后不可恢复，请谨慎操作。',
    okText: '确认删除',
    cancelText: '取消',
    okButtonProps: { danger: true },
    async onOk() {
      await deleteCurrentProduct();
    },
  });
}

onMounted(() => {
  window.addEventListener('scroll', updateActiveSectionByScroll, {
    passive: true,
  });
  nextTick(() => updateActiveSectionByScroll());
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', updateActiveSectionByScroll);
});

watch(
  () => [detail.value?.id, form.kind, form.specTemplateIds.join(',')],
  () => {
    nextTick(() => updateActiveSectionByScroll());
  },
);
</script>

<template>
  <Page title="商品详情" content-class="space-y-4 page-product-detail">
    <Spin :spinning="isLoading || isSubmitting">
      <template v-if="detail">
        <div class="pd-header">
          <Button class="pd-back-btn" @click="goBack">←</Button>
          <div class="pd-head-main">
            <div class="pd-head-title">{{ form.name || detail.name }}</div>
            <div class="pd-head-subtitle">
              {{ form.subtitle || detail.subtitle }}
            </div>
            <div class="pd-head-spu">{{ detail.spuCode }}</div>
          </div>
          <span class="pd-head-status" :style="{ background: statusColor }">
            {{ statusText }}
          </span>
          <div class="pd-head-spacer"></div>
          <Button danger @click="confirmDelete">删除商品</Button>
          <Button v-if="isOnSale" @click="toggleSaleStatus('off_shelf')">
            下架
          </Button>
          <Button v-else type="primary" @click="toggleSaleStatus('on_sale')">
            上架
          </Button>
        </div>

        <div class="pd-body">
          <Card :bordered="false" class="pd-nav-card">
            <a
              v-for="item in sectionList"
              :key="item.id"
              class="pd-nav-item"
              :class="{ active: activeSectionId === item.id }"
              @click="scrollToSection(item.id)"
            >
              {{ item.title }}
            </a>
          </Card>

          <div class="pd-content">
            <Card id="detail-basic" :bordered="false" class="pd-section-card">
              <template #title>基本信息</template>
              <div class="pd-row">
                <label class="pd-label required">商品名称</label>
                <div class="pd-ctrl">
                  <Input v-model:value="form.name" :maxlength="30" show-count />
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">副标题</label>
                <div class="pd-ctrl">
                  <Input v-model:value="form.subtitle" :maxlength="50" />
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">SPU编码</label>
                <div class="pd-ctrl">
                  <Input :value="detail.spuCode" disabled />
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label required">所属分类</label>
                <div class="pd-ctrl">
                  <Select
                    v-model:value="form.categoryId"
                    :options="categoryOptions"
                    placeholder="请选择分类"
                  />
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">商品描述</label>
                <div class="pd-ctrl">
                  <Input.TextArea
                    v-model:value="form.description"
                    :rows="3"
                    :maxlength="500"
                    show-count
                  />
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">排序权重</label>
                <div class="pd-ctrl">
                  <div class="pd-inline">
                    <InputNumber
                      v-model:value="form.sortWeight"
                      :min="0"
                      :precision="0"
                      :step="1"
                    />
                    <span class="pd-unit">数值越大越靠前</span>
                  </div>
                </div>
              </div>
            </Card>

            <Card id="detail-images" :bordered="false" class="pd-section-card">
              <template #title>商品图片</template>
              <Upload.Dragger
                class="pd-upload-dragger"
                :class="{ 'is-disabled': maxUploadReached }"
                multiple
                :show-upload-list="false"
                accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                :before-upload="beforeUpload"
                :disabled="isUploadingImage || maxUploadReached"
              >
                <div class="pd-upload-dragger-inner">
                  <span class="pd-upload-dragger-plus">+</span>
                  <p class="pd-upload-dragger-title">
                    {{
                      maxUploadReached
                        ? '已达到最多 5 张'
                        : '点击或拖拽上传图片'
                    }}
                  </p>
                  <p class="pd-upload-dragger-hint">
                    建议尺寸 750×750，最多 5 张，首张为主图
                  </p>
                </div>
              </Upload.Dragger>

              <div v-if="form.imageUrls.length > 0" class="pd-thumbs">
                <div
                  v-for="(url, index) in form.imageUrls"
                  :key="url"
                  class="pd-thumb"
                  :class="{ 'pd-thumb-main': index === 0 }"
                  @click="index > 0 && setPrimaryImage(index)"
                >
                  <img :src="url" alt="product-image" />
                  <button
                    class="pd-thumb-del"
                    type="button"
                    @click.stop="removeImage(index)"
                  >
                    ×
                  </button>
                  <span v-if="index === 0" class="pd-thumb-badge">主图</span>
                </div>
              </div>
            </Card>

            <Card
              id="detail-pricing"
              :bordered="false"
              class="pd-section-card pd-pricing-card"
            >
              <template #title>价格库存</template>
              <div v-if="form.skus.length > 1" class="pd-price-alert">
                已启用多规格，售价和库存以下方 SKU 管理中的组合为准
              </div>
              <div class="pd-row">
                <label class="pd-label required">售价</label>
                <div class="pd-ctrl">
                  <div class="pd-pricing-inline">
                    <span class="pd-pricing-unit">¥</span>
                    <InputNumber
                      v-model:value="form.price"
                      :min="0"
                      :precision="2"
                      :step="0.1"
                      class="pd-input-fluid"
                    />
                    <span class="pd-pricing-unit is-empty"> 份 </span>
                  </div>
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">划线价</label>
                <div class="pd-ctrl">
                  <div class="pd-pricing-inline">
                    <span class="pd-pricing-unit">¥</span>
                    <InputNumber
                      v-model:value="originalPriceValue"
                      :min="0"
                      :precision="2"
                      :step="0.1"
                      class="pd-input-fluid"
                    />
                    <span class="pd-pricing-unit is-empty"> 份 </span>
                  </div>
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">库存数量</label>
                <div class="pd-ctrl">
                  <div class="pd-pricing-inline">
                    <span class="pd-pricing-unit is-empty"> ¥ </span>
                    <InputNumber
                      v-model:value="form.stock"
                      :min="0"
                      :precision="0"
                      :step="1"
                      class="pd-input-fluid"
                    />
                    <span class="pd-pricing-unit">份</span>
                  </div>
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">库存预警</label>
                <div class="pd-ctrl">
                  <div class="pd-pricing-inline">
                    <span class="pd-pricing-unit is-empty"> ¥ </span>
                    <InputNumber
                      v-model:value="warningStockValue"
                      :min="0"
                      :precision="0"
                      :step="1"
                      class="pd-input-fluid"
                    />
                    <span class="pd-pricing-unit">份</span>
                  </div>
                </div>
              </div>
              <div class="pd-row">
                <label class="pd-label">打包费</label>
                <div class="pd-ctrl">
                  <div class="pd-pricing-inline">
                    <span class="pd-pricing-unit">¥</span>
                    <InputNumber
                      v-model:value="packingFeeValue"
                      :min="0"
                      :precision="2"
                      :step="0.1"
                      class="pd-input-fluid"
                    />
                    <span class="pd-pricing-unit"> /份 </span>
                  </div>
                </div>
              </div>
            </Card>

            <Card id="detail-specs" :bordered="false" class="pd-section-card">
              <template #title>规格做法</template>
              <div class="pd-pills">
                <button
                  v-for="spec in specTemplateOptions"
                  :key="spec.id"
                  type="button"
                  class="pd-pill"
                  :class="{ checked: form.specTemplateIds.includes(spec.id) }"
                  @click="toggleSpecTemplate(spec.id)"
                >
                  {{ spec.name }}
                </button>
              </div>
              <div class="pd-hint">选中后将参与 SKU 组合生成</div>
            </Card>

            <Card id="detail-sku" :bordered="false" class="pd-section-card">
              <div class="pd-sku-hd">
                <div class="pd-sku-hd-left">
                  <div class="pd-sku-title">SKU管理</div>
                  <span class="pd-sku-count">{{ skuCountText }}</span>
                </div>
                <div class="pd-sku-hint">
                  基于已选规格自动生成组合，可独立设置价格和库存
                </div>
              </div>

              <div class="pd-sku-batch">
                <label>批量设价</label>
                <span class="pd-unit">¥</span>
                <InputNumber
                  v-model:value="skuBatchPriceValue"
                  :min="0"
                  :precision="2"
                  :step="0.1"
                  class="pd-sku-batch-input"
                  placeholder="统一售价"
                />
                <Button size="small" @click="applySkuBatchPrice">应用</Button>
                <span class="pd-sku-batch-gap"></span>
                <label>批量设库存</label>
                <InputNumber
                  v-model:value="skuBatchStockValue"
                  :min="0"
                  :precision="0"
                  :step="1"
                  class="pd-sku-batch-input"
                  placeholder="统一库存"
                />
                <Button size="small" @click="applySkuBatchStock">应用</Button>
              </div>

              <div class="pd-table-wrap">
                <table class="pd-sku-table">
                  <thead>
                    <tr>
                      <th v-for="column in skuTemplateColumns" :key="column.id">
                        {{ column.name }}
                      </th>
                      <th>SKU编码</th>
                      <th>售价 (¥)</th>
                      <th>划线价 (¥)</th>
                      <th>库存</th>
                      <th>状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(row, rowIndex) in form.skus"
                      :key="`${row.sortOrder}-${rowIndex}`"
                    >
                      <td
                        v-for="column in skuTemplateColumns"
                        :key="`${rowIndex}-${column.id}`"
                      >
                        <span class="pd-sku-spec">
                          {{
                            getOptionDisplayText(
                              column.id,
                              getSkuAttrOptionId(row, column.id) || '',
                            )
                          }}
                        </span>
                      </td>
                      <td>
                        <span class="pd-sku-code">{{
                          row.skuCode || '-'
                        }}</span>
                      </td>
                      <td>
                        <InputNumber
                          :value="row.price"
                          :min="0"
                          :precision="2"
                          :step="0.1"
                          :controls="false"
                          @update:value="
                            (value) => setSkuPrice(rowIndex, Number(value || 0))
                          "
                        />
                      </td>
                      <td>
                        <InputNumber
                          :value="
                            row.originalPrice === null
                              ? undefined
                              : row.originalPrice
                          "
                          :min="0"
                          :precision="2"
                          :step="0.1"
                          :controls="false"
                          @update:value="
                            (value) =>
                              setSkuOriginalPrice(
                                rowIndex,
                                value === null || value === undefined
                                  ? null
                                  : Number(value),
                              )
                          "
                        />
                      </td>
                      <td>
                        <InputNumber
                          :value="row.stock"
                          :min="0"
                          :precision="0"
                          :step="1"
                          :controls="false"
                          @update:value="
                            (value) => setSkuStock(rowIndex, Number(value || 0))
                          "
                        />
                        <div
                          v-if="row.stock <= 0"
                          class="pd-sku-stock-warn soldout"
                        >
                          已售罄
                        </div>
                        <div
                          v-else-if="
                            row.stock <=
                            (form.warningStock === null
                              ? 10
                              : form.warningStock)
                          "
                          class="pd-sku-stock-warn"
                        >
                          库存偏低
                        </div>
                      </td>
                      <td>
                        <div class="pd-sku-toggle">
                          <Switch
                            :checked="row.isEnabled"
                            checked-children="启用"
                            un-checked-children="停用"
                            @change="
                              (checked) =>
                                setSkuEnabled(rowIndex, Boolean(checked))
                            "
                          />
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </Card>

            <Card id="detail-addons" :bordered="false" class="pd-section-card">
              <template #title>加料管理</template>
              <div class="pd-pills">
                <button
                  v-for="group in addonGroupOptions"
                  :key="group.id"
                  type="button"
                  class="pd-pill"
                  :class="{ checked: form.addonGroupIds.includes(group.id) }"
                  @click="toggleAddonGroup(group.id)"
                >
                  {{ group.name }}
                </button>
              </div>
              <div class="pd-hint">可关联多个加料组，顾客下单时按组选择</div>
            </Card>

            <Card id="detail-tags" :bordered="false" class="pd-section-card">
              <template #title>商品标签</template>
              <div class="pd-tag-wrap">
                <button
                  v-for="label in labelOptions"
                  :key="label.id"
                  type="button"
                  class="pd-tag-sel"
                  :class="{ selected: form.labelIds.includes(label.id) }"
                  @click="toggleLabel(label.id)"
                >
                  {{ label.name }}
                </button>
              </div>
            </Card>

            <Card
              v-if="form.kind === 'combo'"
              id="detail-combo"
              :bordered="false"
              class="pd-section-card"
            >
              <template #title>套餐分组</template>
              <div class="pd-hint">顾客将按分组进行选择</div>

              <div class="pd-combo-list">
                <div
                  v-for="(group, groupIndex) in form.comboGroups"
                  :key="`combo-group-${groupIndex}`"
                  class="pd-combo-card"
                >
                  <div class="pd-combo-head">
                    <Input
                      :value="group.name"
                      placeholder="请输入分组名称"
                      @update:value="
                        (value) =>
                          setComboGroupName(groupIndex, String(value || ''))
                      "
                    />
                    <div class="pd-combo-range">
                      <span>最少</span>
                      <InputNumber
                        :value="group.minSelect"
                        :min="1"
                        :precision="0"
                        :controls="false"
                        @update:value="
                          (value) =>
                            setComboGroupMinSelect(
                              groupIndex,
                              Number(value || 1),
                            )
                        "
                      />
                      <span>最多</span>
                      <InputNumber
                        :value="group.maxSelect"
                        :min="1"
                        :precision="0"
                        :controls="false"
                        @update:value="
                          (value) =>
                            setComboGroupMaxSelect(
                              groupIndex,
                              Number(value || 1),
                            )
                        "
                      />
                    </div>
                    <Button
                      type="text"
                      danger
                      @click="removeComboGroup(groupIndex)"
                    >
                      删除
                    </Button>
                  </div>

                  <div class="pd-combo-items">
                    <div
                      v-for="(item, itemIndex) in group.items"
                      :key="`${groupIndex}-${item.productId}`"
                      class="pd-combo-item"
                    >
                      <span class="name">{{ item.productName }}</span>
                      <div class="actions">
                        <span>×</span>
                        <InputNumber
                          :value="item.quantity"
                          :min="1"
                          :precision="0"
                          :controls="false"
                          @update:value="
                            (value) =>
                              setComboItemQuantity(
                                groupIndex,
                                itemIndex,
                                Number(value || 1),
                              )
                          "
                        />
                        <Button
                          type="text"
                          @click="removeComboItem(groupIndex, itemIndex)"
                        >
                          移除
                        </Button>
                      </div>
                    </div>
                    <div v-if="group.items.length === 0" class="pd-combo-empty">
                      暂无商品，请添加
                    </div>
                  </div>

                  <Button
                    type="link"
                    class="pd-combo-add-item"
                    @click="openComboPicker(groupIndex)"
                  >
                    + 添加商品
                  </Button>
                </div>

                <button
                  type="button"
                  class="pd-combo-add-group"
                  @click="addComboGroup"
                >
                  + 添加分组
                </button>
              </div>
            </Card>

            <Card id="detail-shelf" :bordered="false" class="pd-section-card">
              <template #title>上架设置</template>
              <div class="pd-shelf-group">
                <div
                  class="pd-shelf-opt"
                  :class="{ active: form.shelfMode === 'draft' }"
                  @click="setShelfMode('draft')"
                >
                  <input type="radio" :checked="form.shelfMode === 'draft'" />
                  <div class="pd-shelf-opt-body">
                    <div class="pd-shelf-opt-title">暂不上架（草稿）</div>
                    <div class="pd-shelf-opt-desc">
                      保存修改但不同步到顾客端
                    </div>
                  </div>
                </div>
                <div
                  class="pd-shelf-opt"
                  :class="{ active: form.shelfMode === 'now' }"
                  @click="setShelfMode('now')"
                >
                  <input type="radio" :checked="form.shelfMode === 'now'" />
                  <div class="pd-shelf-opt-body">
                    <div class="pd-shelf-opt-title">立即上架</div>
                    <div class="pd-shelf-opt-desc">保存后顾客可见</div>
                  </div>
                </div>
                <div
                  class="pd-shelf-opt"
                  :class="{ active: form.shelfMode === 'scheduled' }"
                  @click="setShelfMode('scheduled')"
                >
                  <input
                    type="radio"
                    :checked="form.shelfMode === 'scheduled'"
                  />
                  <div class="pd-shelf-opt-body">
                    <div class="pd-shelf-opt-title">定时上架</div>
                    <div class="pd-shelf-opt-desc">到达指定时间后自动上架</div>
                  </div>
                </div>
              </div>
              <div
                v-if="form.shelfMode === 'scheduled'"
                class="pd-shelf-time-row"
              >
                <span class="pd-unit">上架时间</span>
                <DatePicker
                  v-model:value="timedOnShelfValue"
                  show-time
                  format="YYYY-MM-DD HH:mm:ss"
                  class="pd-input-fluid"
                />
              </div>
            </Card>

            <Card :bordered="false" class="pd-save-bar">
              <div class="pd-save-actions">
                <Button @click="goBack">取消</Button>
                <Button
                  type="primary"
                  :loading="isSubmitting"
                  @click="saveDetail"
                >
                  保存
                </Button>
              </div>
            </Card>
          </div>
        </div>
      </template>

      <Card v-else :bordered="false">
        <Empty description="未找到商品详情" />
      </Card>
    </Spin>

    <Modal
      title="添加商品到分组"
      :open="comboPickerOpen"
      ok-text="确认添加"
      cancel-text="取消"
      :ok-button-props="{ disabled: comboPickerSelectedIds.length === 0 }"
      @ok="submitComboPicker"
      @cancel="setComboPickerOpen(false)"
    >
      <div class="pd-picker-search">
        <Input
          v-model:value="comboPickerKeyword"
          allow-clear
          placeholder="搜索商品名称/SPU"
          @press-enter="searchComboPicker"
        />
        <Button @click="searchComboPicker">搜索</Button>
      </div>

      <div class="pd-picker-list">
        <div v-if="comboPickerLoading" class="pd-picker-empty">加载中...</div>
        <div
          v-else-if="comboPickerProducts.length === 0"
          class="pd-picker-empty"
        >
          暂无可选商品
        </div>
        <label
          v-for="product in comboPickerProducts"
          v-else
          :key="`picker-${product.id}`"
          class="pd-picker-item"
        >
          <input
            type="checkbox"
            :checked="comboPickerSelectedIds.includes(product.id)"
            @change="toggleComboPickerProduct(product.id)"
          />
          <span class="name">{{ product.name }}</span>
          <span class="spu">{{ product.spuCode }}</span>
          <span class="price">{{ formatPrice(product.price) }}</span>
        </label>
      </div>

      <div
        v-if="comboPickerSelectedProducts.length > 0"
        class="pd-picker-selected"
      >
        已选 {{ comboPickerSelectedProducts.length }} 个商品
      </div>
    </Modal>
  </Page>
</template>

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