<script setup lang="ts">
import type { TableProps } from 'ant-design-vue';

import type {
  CustomerAnalysisSegmentCode,
  CustomerAnalysisTopCustomerDto,
  CustomerTagDto,
} from '#/api/customer';

import { h } from 'vue';

import { Button, Table, Tag } from 'ant-design-vue';

import {
  formatCurrencyWithFraction,
  resolveTagColor,
} from '../composables/customer-analysis-page/helpers';

interface Props {
  rows: CustomerAnalysisTopCustomerDto[];
}

defineProps<Props>();

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

function renderTagList(tags: CustomerTagDto[]) {
  if (tags.length === 0) {
    return '--';
  }

  return h(
    'div',
    { class: 'ca-top-tag-list' },
    tags.map((tag) =>
      h(
        Tag,
        {
          color: resolveTagColor(tag.tone),
        },
        () => tag.label,
      ),
    ),
  );
}

const columns: TableProps['columns'] = [
  {
    title: '排名',
    dataIndex: 'rank',
    width: 70,
    customRender: ({ text }) =>
      h('span', { class: 'ca-top-rank' }, String(text ?? '--')),
  },
  {
    title: '客户',
    dataIndex: 'name',
    width: 130,
  },
  {
    title: '累计消费',
    dataIndex: 'totalAmount',
    width: 120,
    customRender: ({ text }) =>
      h(
        'span',
        { class: 'ca-top-money' },
        formatCurrencyWithFraction(Number(text || 0)),
      ),
  },
  {
    title: '下单次数',
    dataIndex: 'orderCount',
    width: 100,
  },
  {
    title: '客单价',
    dataIndex: 'averageAmount',
    width: 100,
    customRender: ({ text }) => formatCurrencyWithFraction(Number(text || 0)),
  },
  {
    title: '最近下单',
    dataIndex: 'lastOrderAt',
    width: 110,
    customRender: ({ text }) => String(text ?? '--').slice(5),
  },
  {
    title: '标签',
    dataIndex: 'tags',
    customRender: ({ record }) =>
      renderTagList((record as CustomerAnalysisTopCustomerDto).tags),
  },
  {
    title: '操作',
    key: 'action',
    width: 90,
    customRender: ({ record }) =>
      h(
        Button,
        {
          type: 'link',
          class: 'ca-top-action',
          onClick: () =>
            emit(
              'detail',
              String((record as CustomerAnalysisTopCustomerDto).customerKey),
            ),
        },
        () => '查看',
      ),
  },
];
</script>

<template>
  <div class="ca-card ca-card-full ca-top-card">
    <div class="ca-card-title-wrap">
      <div class="ca-card-title">高价值客户 TOP 10</div>
      <Button
        type="link"
        class="ca-top-segment-btn"
        @click="emit('segment', 'high_value_top')"
      >
        查看客群明细
      </Button>
    </div>

    <Table
      row-key="customerKey"
      size="small"
      :columns="columns"
      :data-source="rows"
      :pagination="false"
      class="ca-top-table"
    />
  </div>
</template>
