import type { ProColumns } from '@ant-design/pro-components';
import { Image, Space, Typography } from 'antd';
import { fallback } from '@/constants/antd/image';
import type {
  TradeExtendCostInfo,
  TradeExtendServeInfo,
} from '@/services/trade/order/detail';

const { Text } = Typography;
const sharedOnCell = (record: TradeExtendServeInfo) => {
  if (record.deliveryType) {
    return { colSpan: 0 };
  }

  return {};
};
export const baseOrderColumns: ProColumns<TradeExtendServeInfo>[] = [
  {
    title: '服务',
    dataIndex: 'serve',
    width: '33.33%',
    onCell: (record) => {
      if (record.deliveryType) {
        return {
          colSpan: 3,
        };
      }
      return {};
    },
    render: (_, record) => {
      if (record.deliveryType) {
        return (
          <Space direction="vertical">
            <div>
              <Text type="secondary">配送方式：</Text>
              <Text>{record.deliveryType}</Text>
            </div>
            {record.receiveUser && (
              <div>
                <Text type="secondary">收货人：</Text>
                <Text>{record.receiveUser}</Text>
              </div>
            )}
            {record.sendUser && (
              <div>
                <Text type="secondary">提货人：</Text>
                <Text>{record.sendUser}</Text>
              </div>
            )}
            <div>
              <Text type="secondary">手机号码：</Text>
              <Text>{record?.userMobile}</Text>
            </div>
            <div>
              <Text type="secondary">地址信息：</Text>
              <Text>{record.address}</Text>
            </div>
          </Space>
        );
      } else if (record.tempType === 3) {
        return (
          <div>
            <Text type="secondary">{record.serveTitle}：</Text>
            <Text>{record.serveType}</Text>
          </div>
        );
      } else {
        return (
          <Space size={8} direction="vertical">
            {record.serve?.map((serve, index) => (
              <Space size={8} key={`${index}-${Math.random()}`}>
                <Image
                  src={serve.serveUrl}
                  width={50}
                  height={50}
                  fallback={fallback}
                />
                <div>
                  <div>{serve.serveName}</div>
                  <div>
                    <Text type="secondary">{serve.serveDesc}</Text>
                  </div>
                  <Space>
                    <div>
                      <Text type="secondary">数量：</Text>
                      <Text>{serve.count}</Text>
                    </div>
                    <div>
                      <Text type="secondary">单价：</Text>
                      <Text>{serve.price}</Text>
                    </div>
                    <div>
                      <Text type="secondary">到手价：</Text>
                      <Text>{serve.handPrice}</Text>
                    </div>
                  </Space>
                </div>
              </Space>
            ))}
          </Space>
        );
      }
    },
  },
  {
    title: '付款信息',
    dataIndex: 'payPrice',
    hideInSearch: true,
    onCell: sharedOnCell,
    render: (_, record) => (
      <Space direction="vertical">
        <div>
          <Text type="secondary">商品总价：</Text>
          <Text>{record.totalPrice}</Text>
        </div>
        <div>
          <Text type="secondary">优惠金额：</Text>
          <Text>{record.discountPrice}</Text>
        </div>
        <div>
          <Text type="secondary">实付金额：</Text>
          <Text>{record.payPrice}</Text>
        </div>
      </Space>
    ),
  },
  {
    title: '退款信息',
    dataIndex: 'refundMoney',
    hideInSearch: true,
    onCell: sharedOnCell,
    render: (_, record) => (
      <Space direction="vertical">
        <div>
          <Text type="secondary">累计退款金额：</Text>
          <Text>{record.refundMoney}</Text>
        </div>
        <div>
          <Text type="secondary">累计退款数量：</Text>
          <Text>{record.refundCount}</Text>
        </div>
      </Space>
    ),
  },
];

export const extendCost: ProColumns<TradeExtendCostInfo>[] = [
  {
    title: '服务附加费',
    dataIndex: 'serveExtFee',
  },
  {
    title: '费用详情',
    dataIndex: 'leaderUserId',
    render: (_, record) => (
      <Space direction="vertical">
        <div>
          <Text type="secondary">费用名称：</Text>
          <Text>{record.costName}</Text>
        </div>
        {record.serveArea && (
          <div>
            <Text type="secondary">可服务区域：</Text>
            <Text>{record.serveArea}</Text>
          </div>
        )}

        {record.targetArea && (
          <div>
            <Text type="secondary">目标区域：</Text>
            <Text>{record.targetArea}</Text>
          </div>
        )}

        {record.weight && (
          <div>
            <Text type="secondary">体型/体重：</Text>
            <Text>{record.weight}</Text>
          </div>
        )}

        {record.respTime && (
          <div>
            <Text type="secondary">响应时间：</Text>
            <Text>{record.respTime}</Text>
          </div>
        )}
        {record.respMode && (
          <div>
            <Text type="secondary">响应模式：</Text>
            <Text>{record.respMode || '-'}</Text>
          </div>
        )}
        {record.chargeTime && (
          <div>
            <Text type="secondary">收费时段：</Text>
            <Text>{record.chargeTime}</Text>
          </div>
        )}

        <div>
          <Text type="secondary">收费方式：</Text>
          <Text>{record.chargeType || '-'}</Text>
        </div>
      </Space>
    ),
  },
  {
    title: '付款信息',
    dataIndex: 'payInfo',
    render: (_, record) => (
      <Space direction="vertical">
        <div>
          <Text type="secondary">服务总价：</Text>
          <Text>¥{record.payInfo?.totalPrice || 0}</Text>
        </div>
        <div>
          <Text type="secondary">优惠金额：</Text>
          <Text>¥{record.payInfo?.discountPrice || 0}</Text>
        </div>

        <div>
          <Text type="secondary">实付金额：</Text>
          <Text>¥{record.payInfo?.payPrice || 0}</Text>
        </div>
      </Space>
    ),
  },
  {
    title: '退款信息',
    dataIndex: 'refundPrice',
    render: (_, record) => (
      <Space direction="vertical">
        <div>
          <Text type="secondary">累计退款金额：</Text>
          <Text>¥{record.refundPrice || 0}</Text>
        </div>
      </Space>
    ),
  },
];
