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

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

interface Props {
  overview: CustomerAnalysisOverviewDto;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
}>();
</script>

<template>
  <div class="ca-stats">
    <button class="ca-stat" type="button" @click="emit('segment', 'all')">
      <div class="label">客户总数</div>
      <div class="val blue">
        {{ formatInteger(props.overview.totalCustomers) }}
      </div>
      <div class="sub">
        较上周期 {{ formatSignedPercent(props.overview.growthRatePercent) }}
      </div>
    </button>

    <button
      class="ca-stat"
      type="button"
      @click="emit('segment', 'active_new')"
    >
      <div class="label">本期新增</div>
      <div class="val green">
        +{{ formatInteger(props.overview.newCustomers) }}
      </div>
      <div class="sub">
        日均 {{ props.overview.newCustomersDailyAverage }} 人
      </div>
    </button>

    <button
      class="ca-stat"
      type="button"
      @click="emit('segment', 'active_recent')"
    >
      <div class="label">活跃率</div>
      <div class="val orange">
        {{ formatPercent(props.overview.activeRatePercent) }}
      </div>
      <div class="sub">
        {{ formatInteger(props.overview.activeCustomers) }} /
        {{ formatInteger(props.overview.totalCustomers) }}
      </div>
    </button>

    <button
      class="ca-stat"
      type="button"
      @click="emit('segment', 'high_value_top')"
    >
      <div class="label">平均客户价值</div>
      <div class="val">
        {{ formatCurrency(props.overview.averageLifetimeValue) }}
      </div>
      <div class="sub">生命周期价值</div>
    </button>
  </div>
</template>
