<script setup lang="ts">
/**
 * 文件职责：满减活动卡片项。
 * 1. 还原活动规则、渠道/门店信息与数据行。
 * 2. 对外抛出编辑、停用、删除动作。
 */
import type { FullReductionCardViewModel } from '../types';

import { computed } from 'vue';

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

import {
  FULL_REDUCTION_ACTIVITY_TAG_CLASS_MAP,
  FULL_REDUCTION_STATUS_TAG_CLASS_MAP,
  FULL_REDUCTION_STATUS_TEXT_MAP,
} from '../composables/full-reduction-page/constants';
import {
  isEndedStatus,
  resolveActivityTypeLabel,
  resolveCardMetrics,
  resolveChannelsText,
  resolveExtraMetaText,
  resolveRulePills,
  resolveStoreScopeText,
} from '../composables/full-reduction-page/helpers';

const props = defineProps<{
  item: FullReductionCardViewModel;
  storeNameMap: Record<string, string>;
}>();

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

const rulePills = computed(() => resolveRulePills(props.item));
const extraMetaText = computed(() => resolveExtraMetaText(props.item));
const cardMetrics = computed(() => resolveCardMetrics(props.item));
</script>

<template>
  <div class="mfr-card" :class="{ 'mfr-dimmed': item.isDimmed }">
    <div class="mfr-card-head">
      <span class="mfr-card-name">{{ item.name }}</span>
      <span
        class="mfr-type-tag"
        :class="FULL_REDUCTION_ACTIVITY_TAG_CLASS_MAP[item.activityType]"
      >
        {{ resolveActivityTypeLabel(item.activityType) }}
      </span>
      <span
        class="mfr-status-tag"
        :class="FULL_REDUCTION_STATUS_TAG_CLASS_MAP[item.displayStatus]"
      >
        {{ FULL_REDUCTION_STATUS_TEXT_MAP[item.displayStatus] }}
      </span>
    </div>

    <div class="mfr-tiers">
      <template
        v-for="(tierText, tierIndex) in rulePills"
        :key="`${tierIndex}-${tierText}`"
      >
        <span class="mfr-tier-pill">{{ tierText }}</span>
        <span v-if="tierIndex < rulePills.length - 1" class="mfr-tier-arrow">
          <IconifyIcon icon="lucide:chevron-right" />
        </span>
      </template>
    </div>

    <div class="mfr-meta">
      <span class="mfr-meta-item">
        <IconifyIcon icon="lucide:calendar" />
        {{ item.startDate }} ~ {{ item.endDate }}
      </span>
      <span class="mfr-meta-item">
        <IconifyIcon icon="lucide:truck" />
        {{ resolveChannelsText(item.channels) }}
      </span>
      <span class="mfr-meta-item">
        <IconifyIcon icon="lucide:store" />
        {{ resolveStoreScopeText(item, storeNameMap) }}
      </span>
      <span v-if="extraMetaText" class="mfr-meta-item">
        <IconifyIcon icon="lucide:tag" />
        {{ extraMetaText }}
      </span>
    </div>

    <div class="mfr-data">
      <span
        v-for="metric in cardMetrics"
        :key="metric.label"
        class="mfr-data-item"
      >
        {{ metric.label }} <strong>{{ metric.value }}</strong>
      </span>
    </div>

    <div class="mfr-card-actions">
      <button type="button" class="g-action" @click="emit('edit', props.item)">
        编辑
      </button>
      <button
        v-if="!isEndedStatus(item.displayStatus)"
        type="button"
        class="g-action"
        @click="emit('disable', props.item)"
      >
        停用
      </button>
      <button
        type="button"
        class="g-action g-action-danger"
        @click="emit('remove', props.item)"
      >
        删除
      </button>
    </div>
  </div>
</template>
