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

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

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

<template>
  <div class="mpm-stats mpm-rule-stats">
    <div class="mpm-stat-card">
      <div class="mpm-stat-label">累计发放积分</div>
      <div class="mpm-stat-value is-primary">
        {{ formatInteger(stats.totalIssuedPoints) }}
      </div>
    </div>
    <div class="mpm-stat-card">
      <div class="mpm-stat-label">已兑换积分</div>
      <div class="mpm-stat-value is-orange">
        {{ formatInteger(stats.redeemedPoints) }}
      </div>
    </div>
    <div class="mpm-stat-card">
      <div class="mpm-stat-label">积分用户</div>
      <div class="mpm-stat-value">
        {{ formatInteger(stats.pointMembers) }} 人
      </div>
    </div>
    <div class="mpm-stat-card">
      <div class="mpm-stat-label">兑换率</div>
      <div class="mpm-stat-value is-green">
        {{ Number(stats.redeemRate ?? 0).toFixed(1) }}%
      </div>
    </div>
  </div>
</template>
