import type { ProColumns } from '@ant-design/pro-components';
import { Image, Space, Tag, Typography } from 'antd';
import type { TradeOrderPageRespVO } from '@/services/trade/order';

const { Text, Paragraph } = Typography;
export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
  {
    title: '商品',
    dataIndex: 'items',
    hideInSearch: true,
    width: '100%',
    ellipsis: true,
    render: (_, record) => {
      if (!record.items) {
        return _;
      }
      return record.items.map((item, index) => (
        <div
          style={{ width: '100%', display: 'flex', gap: '8px' }}
          key={`${index}${Math.random()}`}
        >
          <Image src={item.picUrl} width={64} height={64} />
          <div style={{ flex: '1', overflow: 'hidden' }}>
            <Paragraph ellipsis style={{ width: '100%', marginBottom: 0 }}>
              {item.spuName}测试商品名称测试商品名称测试商品名称测试商品名称
            </Paragraph>
            <div>{item.skuName}</div>
            <Space>
              <div>
                <Text type="secondary">数量：</Text>
                <Text>{item.count || 0}</Text>
              </div>
              <div>
                <Text type="secondary">单价：</Text>
                <Text>
                  {item.price || 0}/{item.unit || '-'}
                </Text>
              </div>
              <div>
                <Text type="secondary">到手价：</Text>
                <Text>
                  {item.handedPrice || 0}/{item.unit || '-'}
                </Text>
              </div>
            </Space>
          </div>
        </div>
      ));
    },
  },

  {
    title: '服务',
    dataIndex: 'serveAddress',
    hideInSearch: true,
    ellipsis: true,
    width: '100%',
    render: (_, record) => (
      <Space direction="vertical" style={{ width: '100%' }}>
        <Paragraph ellipsis style={{ marginBottom: 0 }}>
          <Text type="secondary">预约时间：</Text>
          <Text>{record?.subTime || '-'}</Text>
          <Tag style={{ marginLeft: 10 }}>预约</Tag>
          <Tag color="error" style={{ marginLeft: 10 }}>
            加急
          </Tag>
        </Paragraph>
        <Paragraph ellipsis style={{ marginBottom: 0 }}>
          <Text type="secondary">服务地址：</Text>
          <Text>{record.serveAddress || '-'}</Text>
        </Paragraph>
        <div>
          <Text type="secondary">用户备注：</Text>
          <Text>{record.userRemark || '-'}</Text>
        </div>
      </Space>
    ),
  },
  {
    title: '财务',
    dataIndex: 'price',
    hideInSearch: true,
    width: '100%',
    render: (_, record) => (
      <Space direction="vertical">
        <div>
          <Text type="secondary">实付金额：</Text>
          <Text>{record?.payPrice || '-'}</Text>
        </div>
        <div>
          <Text type="secondary">支付方式：</Text>
          <Text>{record.payType || '-'}</Text>
        </div>
        <div>
          <Text type="secondary">财务状态：</Text>
          <Text>{record.financeStatus || '-'}</Text>
        </div>
      </Space>
    ),
  },
  {
    title: '卖家名称',
    dataIndex: 'merchantName',
    hideInTable: true,
  },
  {
    title: '买家昵称/手机号',
    dataIndex: 'userSearch',
    hideInTable: true,
  },
  {
    title: '订单类目',
    dataIndex: 'orderCategoryId',
    valueType: 'select',
    hideInTable: true,
  },
  {
    title: '订单来源',
    dataIndex: 'orderTerminal',
    valueType: 'select',
    hideInTable: true,
  },
  {
    title: '财务状态',
    dataIndex: 'financeStatus',
    valueType: 'select',
    hideInTable: true,
  },
  {
    title: '售后状态',
    dataIndex: 'afterSaleStatus',
    valueType: 'select',
    hideInTable: true,
  },
  {
    title: '预约状态',
    dataIndex: 'subType',
    valueType: 'select',
    hideInTable: true,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateRange',
    hideInTable: true,
  },
  {
    title: '预约时间',
    dataIndex: 'subTime',
    valueType: 'dateRange',
    hideInTable: true,
  },
];