<script setup lang="ts">
/**
 * 文件职责：新客有礼统计卡片。
 * 1. 展示本月新客、礼包领取率、新客转化率三项指标。
 */
import type { NewCustomerStatsViewModel } from '../types';

import { computed } from 'vue';

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

import {
  formatInteger,
  formatPercent,
} from '../composables/new-customer-page/helpers';

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

const growthIsUp = computed(() => props.stats.monthlyGrowthCount >= 0);
</script>

<template>
  <div class="mnc-stats">
    <div class="mnc-stat-card">
      <div class="mnc-stat-label">
        <IconifyIcon icon="lucide:user-plus" />
        本月新客
      </div>
      <div class="mnc-stat-value">
        {{ formatInteger(stats.monthlyNewCustomers) }}
        <span class="mnc-stat-unit">人</span>
        <span
          class="mnc-stat-trend"
          :class="{ down: !growthIsUp, up: growthIsUp }"
        >
          <IconifyIcon
            :icon="growthIsUp ? 'lucide:trending-up' : 'lucide:trending-down'"
          />
          {{ growthIsUp ? '+' : ''
          }}{{ formatPercent(stats.monthlyGrowthRatePercent) }}%
        </span>
      </div>
      <div class="mnc-stat-sub">
        较上月{{ stats.monthlyGrowthCount >= 0 ? '增长' : '减少' }}
        {{ formatInteger(Math.abs(stats.monthlyGrowthCount)) }} 人
      </div>
    </div>

    <div class="mnc-stat-card">
      <div class="mnc-stat-label">
        <IconifyIcon icon="lucide:ticket" />
        礼包领取率
      </div>
      <div class="mnc-stat-value">
        {{ formatPercent(stats.giftClaimRate) }}
        <span class="mnc-stat-unit">%</span>
      </div>
      <div class="mnc-stat-sub">
        {{ formatInteger(stats.monthlyNewCustomers) }} 人中
        {{ formatInteger(stats.giftClaimedCount) }} 人已领取
      </div>
    </div>

    <div class="mnc-stat-card">
      <div class="mnc-stat-label">
        <IconifyIcon icon="lucide:shopping-bag" />
        新客转化率
      </div>
      <div class="mnc-stat-value">
        {{ formatPercent(stats.firstOrderConversionRate) }}
        <span class="mnc-stat-unit">%</span>
      </div>
      <div class="mnc-stat-sub">
        首单完成率，{{ formatInteger(stats.firstOrderedCount) }} 人已下单
      </div>
    </div>
  </div>
</template>
