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

import type { OrderAllListItemDto } from '#/api/order';

import { h } from 'vue';

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

import { formatCurrency } from '../composables/order-all-page/helpers';

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

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

const props = defineProps<Props>();

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

function resolveChannelTagColor(channel: string) {
  if (channel.includes('外卖')) return 'blue';
  if (channel.includes('自提')) return 'green';
  if (channel.includes('堂食')) return 'orange';
  return 'default';
}

function resolveStatusTagColor(status: string) {
  if (status.includes('退款')) return 'red';
  if (status.includes('取消')) return 'default';
  if (status.includes('完成')) return 'success';
  if (status.includes('接单') || status.includes('取餐')) return 'orange';
  if (status.includes('制作') || status.includes('配送')) return 'processing';
  return 'default';
}

const columns: TableProps['columns'] = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    width: 170,
    customRender: ({ text }) =>
      h('span', { class: 'oa-order-no' }, String(text ?? '--')),
  },
  {
    title: '下单时间',
    dataIndex: 'orderedAt',
    width: 180,
  },
  {
    title: '渠道',
    dataIndex: 'channel',
    width: 100,
    customRender: ({ text }) =>
      h(Tag, { color: resolveChannelTagColor(String(text ?? '')) }, () =>
        String(text ?? '--'),
      ),
  },
  {
    title: '顾客',
    dataIndex: 'customer',
    width: 100,
  },
  {
    title: '商品',
    dataIndex: 'itemsSummary',
    ellipsis: true,
    customRender: ({ text }) =>
      h('span', { class: 'oa-items' }, String(text ?? '--')),
  },
  {
    title: '金额',
    dataIndex: 'amount',
    width: 120,
    customRender: ({ text }) =>
      h('span', { class: 'oa-amount' }, formatCurrency(Number(text || 0))),
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 110,
    customRender: ({ text }) =>
      h(Tag, { color: resolveStatusTagColor(String(text ?? '')) }, () =>
        String(text ?? '--'),
      ),
  },
  {
    title: '操作',
    key: 'action',
    width: 90,
    customRender: ({ record }) =>
      h(
        Button,
        {
          type: 'link',
          class: 'oa-detail-action',
          onClick: () => emit('detail', String(record.orderNo ?? '')),
        },
        () => '详情',
      ),
  },
];

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

function resolveRowClassName(record: OrderAllListItemDto) {
  return record.isDimmed ? 'oa-row-dim' : '';
}
</script>

<template>
  <div class="oa-table-card">
    <Table
      row-key="orderNo"
      :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"
      @change="handleTableChange"
    />
  </div>
</template>
