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

import type { CustomerMemberDetailDto } from '#/api/customer';

import { h } from 'vue';

import { Drawer, Empty, Spin, Table, Tag } from 'ant-design-vue';

import {
  resolveDeliveryTagColor,
  resolveOrderStatusClass,
} from '#/views/customer/profile/composables/customer-profile-page/helpers';

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

interface Props {
  detail: CustomerMemberDetailDto | null;
  loading: boolean;
  open: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'close'): void;
}>();

const orderColumns: TableProps['columns'] = [
  {
    title: '时间',
    dataIndex: 'orderedAt',
    width: 168,
  },
  {
    title: '订单号',
    dataIndex: 'orderNo',
    width: 160,
  },
  {
    title: '商品摘要',
    dataIndex: 'itemsSummary',
    ellipsis: true,
  },
  {
    title: '金额',
    dataIndex: 'amount',
    width: 110,
    customRender: ({ text }) => formatCurrencyWithFraction(Number(text || 0)),
  },
  {
    title: '方式',
    dataIndex: 'deliveryType',
    width: 90,
    customRender: ({ text }) =>
      h(Tag, { color: resolveDeliveryTagColor(String(text ?? '')) }, () =>
        String(text ?? '--'),
      ),
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 90,
    customRender: ({ text }) =>
      h(
        'span',
        {
          class: [
            'ca-member-order-status',
            resolveOrderStatusClass(String(text ?? '')),
          ],
        },
        String(text ?? '--'),
      ),
  },
];
</script>

<template>
  <Drawer
    :open="props.open"
    width="620"
    title="会员详情"
    @close="emit('close')"
  >
    <Spin :spinning="props.loading">
      <template v-if="props.detail">
        <div class="ca-member-head">
          <div class="ca-member-avatar">
            {{ resolveAvatarText(props.detail.name) }}
          </div>
          <div class="ca-member-head-main">
            <div class="ca-member-name-wrap">
              <span class="ca-member-name">{{ props.detail.name }}</span>
              <Tag v-if="props.detail.member.isMember" color="purple">
                {{ props.detail.member.tierName || '会员' }}
              </Tag>
            </div>
            <div class="ca-member-meta">
              {{ props.detail.phoneMasked }} · 注册于
              {{ props.detail.registeredAt }}
            </div>
            <div class="ca-member-meta">
              入会 {{ props.detail.member.joinedAt || '--' }} · 来源：{{
                props.detail.source || '--'
              }}
            </div>
          </div>
        </div>

        <div class="ca-member-overview">
          <div class="ca-member-ov-item">
            <div class="ca-member-ov-val">
              {{ formatCurrencyWithFraction(props.detail.totalAmount) }}
            </div>
            <div class="ca-member-ov-label">累计消费</div>
          </div>
          <div class="ca-member-ov-item">
            <div class="ca-member-ov-val">{{ props.detail.totalOrders }}</div>
            <div class="ca-member-ov-label">消费次数</div>
          </div>
          <div class="ca-member-ov-item">
            <div class="ca-member-ov-val">
              {{ formatCurrencyWithFraction(props.detail.averageAmount) }}
            </div>
            <div class="ca-member-ov-label">平均客单价</div>
          </div>
          <div class="ca-member-ov-item">
            <div class="ca-member-ov-val">
              {{ formatPercent(props.detail.repurchaseRatePercent) }}
            </div>
            <div class="ca-member-ov-label">复购率</div>
          </div>
          <div class="ca-member-ov-item">
            <div class="ca-member-ov-val">
              {{ props.detail.member.pointsBalance }}
            </div>
            <div class="ca-member-ov-label">积分</div>
          </div>
        </div>

        <div class="ca-member-section">
          <div class="ca-member-section-title">会员标签</div>
          <div class="ca-member-tag-list">
            <Tag
              v-for="tag in props.detail.tags"
              :key="`${tag.code}-${tag.label}`"
              :color="resolveTagColor(tag.tone)"
            >
              {{ tag.label }}
            </Tag>
            <span
              v-if="props.detail.tags.length === 0"
              class="ca-member-empty-text"
            >
              暂无标签
            </span>
          </div>
        </div>

        <div class="ca-member-section">
          <div class="ca-member-section-title">最近订单</div>
          <Table
            class="ca-member-order-table"
            row-key="orderNo"
            size="small"
            :columns="orderColumns"
            :data-source="props.detail.recentOrders"
            :pagination="false"
          />
        </div>
      </template>

      <Empty v-else description="暂无会员详情" />
    </Spin>
  </Drawer>
</template>
