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

import { Spin } from 'ant-design-vue';

import {
  formatInteger,
  formatPercent,
} from '../composables/message-reach-page/helpers';

defineProps<{
  loading: boolean;
  stats: MessageReachStatsViewModel;
}>();
</script>

<template>
  <Spin :spinning="loading">
    <div class="mmr-stats">
      <div class="mmr-stat-card">
        <div class="mmr-stat-label">本月发送</div>
        <div class="mmr-stat-value">
          {{ formatInteger(stats.monthlySentCount) }}
          <span class="mmr-stat-unit">条</span>
        </div>
      </div>

      <div class="mmr-stat-card">
        <div class="mmr-stat-label">触达人数</div>
        <div class="mmr-stat-value">
          {{ formatInteger(stats.reachMemberCount) }}
          <span class="mmr-stat-unit">人</span>
        </div>
      </div>

      <div class="mmr-stat-card">
        <div class="mmr-stat-label">打开率</div>
        <div class="mmr-stat-value">
          {{ formatPercent(stats.openRate) }}
        </div>
      </div>

      <div class="mmr-stat-card">
        <div class="mmr-stat-label">转化率</div>
        <div class="mmr-stat-value">
          {{ formatPercent(stats.conversionRate) }}
        </div>
      </div>
    </div>
  </Spin>
</template>
