<script setup lang="ts">
/**
 * 文件职责：优惠券统计卡片。
 * 1. 展示总数、进行中、已领取、已核销与核销率。
 */
import type { CouponStatsViewModel } from '../types';

import { computed } from 'vue';

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

import { formatInteger } from '../composables/coupon-page/helpers';

const props = defineProps<{
  stats: CouponStatsViewModel;
}>();

const redeemText = computed(
  () =>
    `${formatInteger(props.stats.redeemedCount)}（核销率 ${props.stats.redeemRate.toFixed(1)}%）`,
);
</script>

<template>
  <div class="mcp-stats">
    <div class="mcp-stat-card">
      <span class="mcp-stat-icon mcp-stat-blue">
        <IconifyIcon icon="lucide:ticket" />
      </span>
      <div class="mcp-stat-main">
        <div class="mcp-stat-value">
          {{ formatInteger(stats.totalCount) }}
        </div>
        <div class="mcp-stat-label">优惠券总数</div>
      </div>
    </div>

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

    <div class="mcp-stat-card">
      <span class="mcp-stat-icon mcp-stat-orange">
        <IconifyIcon icon="lucide:download" />
      </span>
      <div class="mcp-stat-main">
        <div class="mcp-stat-value">
          {{ formatInteger(stats.claimedCount) }}
        </div>
        <div class="mcp-stat-label">已领取（张）</div>
      </div>
    </div>

    <div class="mcp-stat-card">
      <span class="mcp-stat-icon mcp-stat-purple">
        <IconifyIcon icon="lucide:check-circle" />
      </span>
      <div class="mcp-stat-main">
        <div class="mcp-stat-value">
          {{ formatInteger(stats.redeemedCount) }}
        </div>
        <div class="mcp-stat-label">{{ redeemText }}</div>
      </div>
    </div>
  </div>
</template>
