<script setup lang="ts">
/**
 * 文件职责：限时折扣活动卡片。
 */
import type { FlashSaleCardViewModel } from '../types';

import { computed } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  FLASH_SALE_PRODUCT_STATUS_TEXT_MAP,
  FLASH_SALE_STATUS_CLASS_MAP,
  FLASH_SALE_STATUS_TEXT_MAP,
} from '../composables/flash-sale-page/constants';
import {
  formatCurrency,
  formatInteger,
  resolveCardSummary,
  resolveDateRangeText,
  resolveDiscountRateLabel,
  resolveProductLimitText,
  resolveRecurringBadgeText,
  resolveTimeRangeText,
} from '../composables/flash-sale-page/helpers';

const props = defineProps<{
  item: FlashSaleCardViewModel;
}>();

const emit = defineEmits<{
  edit: [item: FlashSaleCardViewModel];
  remove: [item: FlashSaleCardViewModel];
  toggleStatus: [item: FlashSaleCardViewModel];
}>();

const recurringBadgeText = computed(() =>
  resolveRecurringBadgeText(props.item),
);
const summaryItems = computed(() => resolveCardSummary(props.item));
const statusActionText = computed(() =>
  props.item.status === 'completed' ? '启用' : '停用',
);
</script>

<template>
  <div class="fs-card" :class="{ ended: item.isDimmed }">
    <div class="fs-card-hd">
      <span class="fs-card-name">{{ item.name }}</span>
      <span
        class="g-tag"
        :class="FLASH_SALE_STATUS_CLASS_MAP[item.displayStatus]"
      >
        {{ FLASH_SALE_STATUS_TEXT_MAP[item.displayStatus] }}
      </span>
      <span v-if="recurringBadgeText" class="fs-recur-badge">
        <IconifyIcon icon="lucide:repeat" />
        {{ recurringBadgeText }}
      </span>
      <span class="fs-card-time">
        <IconifyIcon icon="lucide:clock-3" />
        {{ resolveTimeRangeText(item) }}
      </span>
      <span class="fs-card-time">
        <IconifyIcon icon="lucide:calendar-days" />
        {{ resolveDateRangeText(item) }}
      </span>
    </div>

    <table class="fs-prod-table">
      <thead>
        <tr>
          <th>商品名</th>
          <th>原价</th>
          <th>折扣价</th>
          <th>折扣力度</th>
          <th>限购</th>
          <th>已售</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in item.products" :key="product.productId">
          <td>{{ product.name }}</td>
          <td class="fs-orig-price">
            {{ formatCurrency(product.originalPrice) }}
          </td>
          <td class="fs-disc-price">
            {{ formatCurrency(product.discountPrice) }}
          </td>
          <td>
            <span class="fs-disc-rate">
              {{
                resolveDiscountRateLabel(
                  product.originalPrice,
                  product.discountPrice,
                )
              }}
            </span>
          </td>
          <td>{{ resolveProductLimitText(product.perUserLimit) }}</td>
          <td>{{ formatInteger(product.soldCount) }}</td>
          <td>{{ FLASH_SALE_PRODUCT_STATUS_TEXT_MAP[product.status] }}</td>
        </tr>
      </tbody>
    </table>

    <div class="fs-card-summary">
      <span v-for="summary in summaryItems" :key="summary.label">
        {{ summary.label }}
        <strong>{{ summary.value }}</strong>
      </span>
    </div>

    <div class="fs-card-ft">
      <button type="button" class="g-action" @click="emit('edit', props.item)">
        编辑
      </button>
      <button
        type="button"
        class="g-action"
        @click="emit('toggleStatus', props.item)"
      >
        {{ statusActionText }}
      </button>
      <button
        type="button"
        class="g-action g-action-danger"
        @click="emit('remove', props.item)"
      >
        删除
      </button>
    </div>
  </div>
</template>
