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

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

import { h } from 'vue';

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

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

interface Props {
  rows: CustomerRecentOrderDto[];
}

defineProps<Props>();

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

<template>
  <Table
    class="cp-order-table"
    row-key="orderNo"
    :columns="columns"
    :data-source="rows"
    :pagination="false"
    size="small"
  />
</template>
