import type { ProColumns } from '@ant-design/pro-components';
import { Badge, Button, 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,
    ellipsis: true,
    render: (_, record) => (
      <Space direction="vertical">
        <Badge status="error" text="等待退款" />
        <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>
        <div>
          <Text type="secondary">申请人员：</Text>
          <Text>{record.financeStatus || '-'}</Text>
        </div>
      </Space>
    ),
  },

  {
    title: '售后商品',
    dataIndex: 'serveAddress',
    hideInSearch: true,
    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>
              <div>
                <Text type="secondary">申请数量：</Text>
                <Text>{item.count || 0}</Text>
              </div>
            </div>
          </div>
          <Button size="small" style={{ marginTop: 10, textAlign: 'right' }}>
            售后详情
          </Button>
        </>
      ));
    },
  },
  {
    title: '申请信息',
    dataIndex: 'price',
    hideInSearch: true,
    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>
        <div>
          <Text type="secondary">申请人员：</Text>
          <Text>{record.financeStatus || '-'}</Text>
        </div>
      </Space>
    ),
  },
  {
    title: '退款信息',
    dataIndex: 'merchantName',
    hideInSearch: true,
    render: (_, record) => (
      <Space direction="vertical">
        <Badge status="default" text="无退款" />
        <div>
          <Text type="secondary">退款金额：</Text>
          <Text>{record?.payPrice || '-'}</Text>
        </div>
        <div>
          <Text type="secondary">退款方式：</Text>
          <Text>{record.payType || '-'}</Text>
        </div>
        <Space>
          <Button size="small" type="primary">
            重试退款
          </Button>
          <Button size="small" type="primary">
            审核处理
          </Button>
          <Button size="small">转人工退款</Button>
          <Button size="small">取消申请</Button>
        </Space>
      </Space>
    ),
  },
  {
    title: '申请人姓名、手机或ID',
    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: 'createTime',
    valueType: 'dateRange',
    hideInTable: true,
  },
  {
    title: '退款时间',
    dataIndex: 'subTime',
    valueType: 'dateRange',
    hideInTable: true,
  },
];