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

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

interface Props {
  rows: CustomerAnalysisRfmRowDto[];
}

defineProps<Props>();

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

const columnLabels = ['高频高额', '高频低额', '低频高额', '低频低额'];
</script>

<template>
  <div class="ca-card ca-card-full">
    <div class="ca-card-title">RFM 客户分层</div>
    <div class="ca-rfm">
      <div class="ca-rfm-header"></div>
      <div
        v-for="columnLabel in columnLabels"
        :key="columnLabel"
        class="ca-rfm-header"
      >
        {{ columnLabel }}
      </div>

      <template v-for="row in rows" :key="row.label">
        <div class="ca-rfm-label">{{ row.label }}</div>
        <button
          v-for="cell in row.cells"
          :key="cell.segmentCode"
          class="ca-rfm-cell"
          :class="resolveRfmCellToneClass(cell.tone)"
          type="button"
          @click="emit('segment', cell.segmentCode)"
        >
          <div class="ca-rfm-cell-num">{{ formatInteger(cell.count) }}人</div>
          <div class="ca-rfm-cell-label">{{ cell.label }}</div>
        </button>
      </template>
    </div>
  </div>
</template>
