<script setup lang="ts">
import type { CustomerListStatsDto } from '#/api/customer';

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

interface Props {
  stats: CustomerListStatsDto;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="cl-stats">
    <div class="cl-stat-card">
      <div class="cl-stat-label">客户总数</div>
      <div class="cl-stat-value blue">
        {{ formatInteger(props.stats.totalCustomers) }}
      </div>
      <div class="cl-stat-sub">累计注册客户</div>
    </div>

    <div class="cl-stat-card">
      <div class="cl-stat-label">本月新增</div>
      <div class="cl-stat-value green">
        {{ props.stats.monthlyNewCustomers >= 0 ? '+' : ''
        }}{{ formatInteger(props.stats.monthlyNewCustomers) }}
      </div>
      <div class="cl-stat-sub">
        较上月
        {{ props.stats.monthlyGrowthRatePercent >= 0 ? '+' : ''
        }}{{ formatPercent(props.stats.monthlyGrowthRatePercent) }}
      </div>
    </div>

    <div class="cl-stat-card">
      <div class="cl-stat-label">活跃客户</div>
      <div class="cl-stat-value orange">
        {{ formatInteger(props.stats.activeCustomers) }}
      </div>
      <div class="cl-stat-sub">近30天有下单</div>
    </div>

    <div class="cl-stat-card">
      <div class="cl-stat-label">客均消费</div>
      <div class="cl-stat-value">
        {{ formatCurrency(props.stats.averageAmountLast30Days) }}
      </div>
      <div class="cl-stat-sub">近30天平均</div>
    </div>
  </div>
</template>
