<script setup lang="ts">
/**
 * 文件职责：满减活动统计卡片。
 * 1. 展示活动总数、进行中、本月带动销售额和客单价提升。
 */
import type { FullReductionStatsViewModel } from '../types';

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

import {
  formatCurrency,
  formatInteger,
} from '../composables/full-reduction-page/helpers';

defineProps<{
  stats: FullReductionStatsViewModel;
}>();
</script>

<template>
  <div class="mfr-stats">
    <div class="mfr-stat-card">
      <span class="mfr-stat-icon mfr-stat-blue">
        <IconifyIcon icon="lucide:badge-percent" />
      </span>
      <div class="mfr-stat-main">
        <div class="mfr-stat-value">{{ formatInteger(stats.totalCount) }}</div>
        <div class="mfr-stat-label">活动总数</div>
      </div>
    </div>

    <div class="mfr-stat-card">
      <span class="mfr-stat-icon mfr-stat-green">
        <IconifyIcon icon="lucide:play-circle" />
      </span>
      <div class="mfr-stat-main">
        <div class="mfr-stat-value mfr-stat-value-green">
          {{ formatInteger(stats.ongoingCount) }}
        </div>
        <div class="mfr-stat-label">进行中</div>
      </div>
    </div>

    <div class="mfr-stat-card">
      <span class="mfr-stat-icon mfr-stat-orange">
        <IconifyIcon icon="lucide:chart-column" />
      </span>
      <div class="mfr-stat-main">
        <div class="mfr-stat-value mfr-stat-value-orange">
          {{ formatCurrency(stats.monthlyDrivenSalesAmount) }}
        </div>
        <div class="mfr-stat-label">本月带动销售额</div>
      </div>
    </div>

    <div class="mfr-stat-card">
      <span class="mfr-stat-icon mfr-stat-cyan">
        <IconifyIcon icon="lucide:trending-up" />
      </span>
      <div class="mfr-stat-main">
        <div class="mfr-stat-value">
          {{ formatCurrency(stats.averageTicketIncrease) }}
        </div>
        <div class="mfr-stat-label">平均客单价提升</div>
      </div>
    </div>
  </div>
</template>
