<script setup lang="ts">
/**
 * 文件职责：次卡列表统计卡片。
 */
import type { PunchCardStatsViewModel } from '../types';

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

import { formatCurrency } from '../composables/punch-card-page/helpers';

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

<template>
  <div class="mpc-stats">
    <div class="mpc-stat-card">
      <span class="mpc-stat-icon mpc-stat-blue">
        <IconifyIcon icon="lucide:ticket" />
      </span>
      <div class="mpc-stat-main">
        <div class="mpc-stat-value">{{ stats.onSaleCount }}</div>
        <div class="mpc-stat-label">在售次卡</div>
      </div>
    </div>

    <div class="mpc-stat-card">
      <span class="mpc-stat-icon mpc-stat-cyan">
        <IconifyIcon icon="lucide:shopping-cart" />
      </span>
      <div class="mpc-stat-main">
        <div class="mpc-stat-value">{{ stats.totalSoldCount }}</div>
        <div class="mpc-stat-label">累计售出</div>
      </div>
    </div>

    <div class="mpc-stat-card">
      <span class="mpc-stat-icon mpc-stat-green">
        <IconifyIcon icon="lucide:wallet" />
      </span>
      <div class="mpc-stat-main">
        <div class="mpc-stat-value mpc-stat-value-green">
          {{ formatCurrency(stats.totalRevenueAmount) }}
        </div>
        <div class="mpc-stat-label">累计收入</div>
      </div>
    </div>

    <div class="mpc-stat-card">
      <span class="mpc-stat-icon mpc-stat-orange">
        <IconifyIcon icon="lucide:activity" />
      </span>
      <div class="mpc-stat-main">
        <div class="mpc-stat-value mpc-stat-value-orange">
          {{ stats.activeInUseCount }}
        </div>
        <div class="mpc-stat-label">使用中</div>
      </div>
    </div>
  </div>
</template>
