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

const { Text, Paragraph } = Typography;
export const baseOrderColumns: ProColumns<TradeOrderPageRespVO>[] = [
  {
    title: '商品',
    dataIndex: 'spuName',
    hideInSearch: true,
    width: '100%',
    ellipsis: true,
    render: (_, record) => (
      <Paragraph>
        <Paragraph ellipsis style={{ marginBottom: 0 }}>
          {record.spuName}
        </Paragraph>
        <div>{record.skuName}</div>
        <Space>
          <div>
            <Text type="secondary">数量：</Text>
            <Text>{record.count}</Text>
          </div>
          <div>
            <Text type="secondary">单价：</Text>
            <Text>
              {record.price}/{record.unit}
            </Text>
          </div>
          <div>
            <Text type="secondary">到手价：</Text>
            <Text>
              {record.handedPrice}/{record.unit}
            </Text>
          </div>
        </Space>
      </Paragraph>
    ),
  },

  {
    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>{dayjs(record.subTime).format(dateFormatS)}</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,
  },
];