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

/**
 * 文件职责：限时折扣商品选择弹窗。
 */
import { computed } from 'vue';

import { Button, Empty, Input, Modal, Select, Spin } from 'ant-design-vue';

import { FLASH_SALE_PRODUCT_STATUS_TEXT_MAP } from '../composables/flash-sale-page/constants';
import { formatCurrency } from '../composables/flash-sale-page/helpers';

const props = defineProps<{
  categories: FlashSalePickerCategoryItem[];
  categoryFilterId: string;
  keyword: string;
  loading: boolean;
  open: boolean;
  products: FlashSalePickerProductItem[];
  selectedProductIds: string[];
}>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'search'): void;
  (event: 'setCategoryFilterId', value: string): void;
  (event: 'setKeyword', value: string): void;
  (event: 'submit'): void;
  (event: 'toggleAll', checked: boolean): void;
  (event: 'toggleProduct', productId: string): void;
}>();

const categoryOptions = computed(() => [
  { label: '全部分类', value: '' },
  ...props.categories.map((item) => ({
    label: item.name,
    value: item.id,
  })),
]);

const allChecked = computed(
  () =>
    props.products.length > 0 &&
    props.products.every((item) => props.selectedProductIds.includes(item.id)),
);
const selectedCount = computed(() => props.selectedProductIds.length);

function setKeyword(value: string) {
  emit('setKeyword', value);
}

function setCategoryFilterId(value: unknown) {
  emit('setCategoryFilterId', String(value ?? ''));
}

function toggleAll() {
  emit('toggleAll', !allChecked.value);
}

function toggleProduct(productId: string) {
  emit('toggleProduct', productId);
}

function resolveStatusClass(status: FlashSalePickerProductItem['status']) {
  if (status === 'on_sale') {
    return 'pp-prod-status on';
  }
  if (status === 'sold_out') {
    return 'pp-prod-status sold';
  }
  return 'pp-prod-status off';
}
</script>

<template>
  <Modal
    :open="open"
    title="添加折扣商品"
    width="900px"
    :footer="null"
    class="fs-product-picker-modal"
    @cancel="emit('close')"
  >
    <div class="pp-toolbar">
      <div class="pp-search">
        <Input
          :value="keyword"
          placeholder="搜索商品名称或编码..."
          allow-clear
          @update:value="setKeyword"
          @press-enter="emit('search')"
        />
      </div>
      <Select
        :value="categoryFilterId"
        :options="categoryOptions"
        class="pp-cat-select"
        @update:value="setCategoryFilterId"
      />
      <Button @click="emit('search')">搜索</Button>
      <span class="pp-selected-count">已选 {{ selectedCount }} 个</span>
    </div>

    <div class="pp-body">
      <Spin :spinning="loading">
        <div v-if="products.length === 0" class="pp-empty">
          <Empty description="暂无可选商品" />
        </div>

        <table v-else class="pp-table">
          <thead>
            <tr>
              <th class="pp-col-check">
                <input
                  type="checkbox"
                  :checked="allChecked"
                  @change="toggleAll"
                />
              </th>
              <th>商品</th>
              <th>分类</th>
              <th>售价</th>
              <th>库存</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in products"
              :key="item.id"
              :class="{ 'pp-checked': selectedProductIds.includes(item.id) }"
              @click="toggleProduct(item.id)"
            >
              <td class="pp-col-check">
                <input
                  type="checkbox"
                  :checked="selectedProductIds.includes(item.id)"
                  @change.stop="toggleProduct(item.id)"
                />
              </td>
              <td>
                <div class="pp-prod-name">{{ item.name }}</div>
                <div class="pp-prod-spu">{{ item.spuCode }}</div>
              </td>
              <td>{{ item.categoryName }}</td>
              <td>{{ formatCurrency(item.price) }}</td>
              <td>{{ item.stock }}</td>
              <td>
                <span :class="resolveStatusClass(item.status)">
                  {{ FLASH_SALE_PRODUCT_STATUS_TEXT_MAP[item.status] }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </Spin>
    </div>

    <div class="pp-footer">
      <div class="pp-footer-info">
        已选择 <strong>{{ selectedCount }}</strong> 个商品
      </div>
      <div class="pp-footer-btns">
        <Button @click="emit('close')">取消</Button>
        <Button type="primary" @click="emit('submit')">确认选择</Button>
      </div>
    </div>
  </Modal>
</template>
