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

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

interface Props {
  items: CustomerAnalysisAmountDistributionItemDto[];
}

const props = defineProps<Props>();

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

<template>
  <div class="ca-card">
    <div class="ca-card-title">客单价分布</div>
    <button
      v-for="(item, index) in props.items"
      :key="item.segmentCode"
      class="ca-dist-row"
      type="button"
      @click="emit('segment', item.segmentCode)"
    >
      <span class="ca-dist-label">{{ item.label }}</span>
      <span class="ca-dist-bar">
        <span
          class="ca-dist-bar-inner"
          :style="{
            width: `${Math.max(4, Math.min(100, item.percent))}%`,
            backgroundColor: resolveDistributionColor(index),
          }"
        ></span>
      </span>
      <span class="ca-dist-val">{{ formatPercent(item.percent) }}</span>
    </button>
  </div>
</template>
