<script setup lang="ts">
import type { StoredCardPlanStatsViewModel } from '../types';

import {
  formatCurrency,
  formatInteger,
} from '../composables/stored-card-page/helpers';

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

<template>
  <div class="msc-stats">
    <div class="msc-stat-card">
      <div class="msc-stat-label">储值总额</div>
      <div class="msc-stat-value">
        {{ formatCurrency(stats.totalRechargeAmount) }}
      </div>
    </div>
    <div class="msc-stat-card">
      <div class="msc-stat-label">赠金总额</div>
      <div class="msc-stat-value is-orange">
        {{ formatCurrency(stats.totalGiftAmount) }}
      </div>
    </div>
    <div class="msc-stat-card">
      <div class="msc-stat-label">本月充值</div>
      <div class="msc-stat-value is-green">
        {{ formatCurrency(stats.currentMonthRechargeAmount) }}
      </div>
    </div>
    <div class="msc-stat-card">
      <div class="msc-stat-label">储值用户</div>
      <div class="msc-stat-value">
        {{ formatInteger(stats.rechargeMemberCount) }}人
      </div>
    </div>
  </div>
</template>
