<script setup lang="ts">
/**
 * 文件职责：秒杀活动卡片。
 */
import type { SeckillCardViewModel } from '../types';

import { computed } from 'vue';

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

import {
  SECKILL_STATUS_CLASS_MAP,
  SECKILL_STATUS_TEXT_MAP,
} from '../composables/seckill-page/constants';
import {
  formatCurrency,
  resolveCardSummary,
  resolveCardTimeText,
  resolveProgressClass,
  resolveProgressPercent,
} from '../composables/seckill-page/helpers';

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

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

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

<template>
  <div class="sk-card" :class="{ ended: item.isDimmed }">
    <div class="sk-card-hd">
      <span class="sk-card-name">{{ item.name }}</span>
      <span class="g-tag" :class="SECKILL_STATUS_CLASS_MAP[item.displayStatus]">
        {{ SECKILL_STATUS_TEXT_MAP[item.displayStatus] }}
      </span>
      <span class="sk-card-time">
        <IconifyIcon
          :icon="
            item.displayStatus === 'upcoming' || item.displayStatus === 'ended'
              ? 'lucide:calendar-days'
              : 'lucide:clock-3'
          "
        />
        {{ resolveCardTimeText(item) }}
      </span>
    </div>

    <div class="sk-prod-list">
      <div
        v-for="product in item.products"
        :key="product.productId"
        class="sk-prod-row"
      >
        <span class="sk-prod-name">{{ product.name }}</span>
        <span class="sk-prod-prices">
          <span class="sk-orig-price">{{
            formatCurrency(product.originalPrice)
          }}</span>
          <span class="sk-seckill-price">{{
            formatCurrency(product.seckillPrice)
          }}</span>
        </span>

        <div class="sk-progress-wrap">
          <div class="sk-progress">
            <div
              class="sk-progress-fill"
              :class="
                resolveProgressClass(
                  resolveProgressPercent(product.soldCount, product.stockLimit),
                )
              "
              :style="{
                width: `${resolveProgressPercent(product.soldCount, product.stockLimit)}%`,
              }"
            ></div>
            <span class="sk-progress-text">
              已抢 {{ product.soldCount }}/{{ product.stockLimit }}
            </span>
          </div>
          <span
            v-if="product.soldCount >= product.stockLimit"
            class="sk-sold-out"
          >
            <IconifyIcon icon="lucide:flame" />
            已抢光
          </span>
        </div>
      </div>
    </div>

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

    <div class="sk-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>
