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

import type { MemberListItemDto } from '#/api/member';

import { h } from 'vue';

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

import {
  formatCurrency,
  formatInteger,
  resolveTierTagStyle,
} from '../composables/member-page/helpers';

interface PaginationState {
  page: number;
  pageSize: number;
  total: number;
}

interface Props {
  loading: boolean;
  pagination: PaginationState;
  rows: MemberListItemDto[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'detail', memberId: string): void;
  (event: 'pageChange', page: number, pageSize: number): void;
}>();

function renderMemberCell(record: MemberListItemDto) {
  return h('div', { class: 'mm-member-cell' }, [
    h(
      'span',
      {
        class: 'mm-avatar',
        style: {
          background: record.avatarColor || '#1677ff',
        },
      },
      record.avatarText || record.name.slice(0, 1) || '会',
    ),
    h('span', { class: 'mm-member-name' }, record.name || '--'),
  ]);
}

function renderTierCell(record: MemberListItemDto) {
  if (!record.tierName) {
    return '--';
  }

  return h(
    Tag,
    {
      style: resolveTierTagStyle(record.tierColorHex || '#999999'),
    },
    () => record.tierName,
  );
}

const columns: TableProps['columns'] = [
  {
    title: '会员',
    dataIndex: 'name',
    width: 180,
    customRender: ({ record }) => renderMemberCell(record as MemberListItemDto),
  },
  {
    title: '手机号',
    dataIndex: 'mobileMasked',
    width: 130,
  },
  {
    title: '等级',
    dataIndex: 'tierName',
    width: 120,
    customRender: ({ record }) => renderTierCell(record as MemberListItemDto),
  },
  {
    title: '累计消费',
    dataIndex: 'totalAmount',
    width: 130,
    customRender: ({ text }) =>
      h('span', { class: 'mm-amount' }, formatCurrency(Number(text || 0))),
  },
  {
    title: '消费次数',
    dataIndex: 'orderCount',
    width: 100,
    customRender: ({ text }) => formatInteger(Number(text || 0)),
  },
  {
    title: '最近消费',
    dataIndex: 'lastOrderAt',
    width: 120,
  },
  {
    title: '储值余额',
    dataIndex: 'storedBalance',
    width: 130,
    customRender: ({ text }) => formatCurrency(Number(text || 0)),
  },
  {
    title: '积分',
    dataIndex: 'pointsBalance',
    width: 100,
    customRender: ({ text }) => formatInteger(Number(text || 0)),
  },
  {
    title: '操作',
    key: 'action',
    width: 80,
    fixed: 'right',
    customRender: ({ record }) =>
      h(
        Button,
        {
          type: 'link',
          class: 'mm-detail-action',
          onClick: () =>
            emit('detail', String((record as MemberListItemDto).memberId)),
        },
        () => '详情',
      ),
  },
];

function handleTableChange(next: TablePaginationConfig) {
  emit('pageChange', Number(next.current || 1), Number(next.pageSize || 10));
}

function resolveRowClassName(record: MemberListItemDto) {
  return record.isDormant ? 'mm-row-dimmed' : '';
}
</script>

<template>
  <div class="mm-table-card">
    <Table
      row-key="memberId"
      :columns="columns"
      :data-source="props.rows"
      :loading="props.loading"
      :pagination="{
        current: props.pagination.page,
        pageSize: props.pagination.pageSize,
        total: props.pagination.total,
        showSizeChanger: false,
        showTotal: (total: number) => `共 ${total} 条`,
      }"
      :row-class-name="resolveRowClassName"
      :scroll="{ x: 1080 }"
      @change="handleTableChange"
    />
  </div>
</template>
