import type { ProColumns } from '@ant-design/pro-components';
import { Button, Tag, Typography } from 'antd';
import type { BaseType } from 'antd/es/typography/Base';
import dayjs from 'dayjs';
import { dateFormat } from '@/constants';
import {
  OrderBtnLableMap,
  OrderStatus,
  OrderStatusLabels,
} from '@/constants/trade';
import type { DeptVO } from '@/services/system/dept';
import type { TradeOrderDetailRespVO } from '@/services/trade/order';

const { Title, Text, Paragraph } = Typography;

const sharedOnCell = (_: DeptVO, index?: number) => {
  if (index === 3) {
    return { colSpan: 0 };
  }

  return {};
};
export const surchargeInfoColumns: ProColumns<DeptVO>[] = [
  {
    title: '服务附加费',
    dataIndex: 'serveExtFee',
    width: '33.33%',
    render: (_, record, index) => {
      if (index === 3) {
        return 33333;
      }
      return (
        <Tag color={record.status === 1 ? 'green' : 'red'}>{record.name}</Tag>
      );
    },
    onCell: (_, index) => ({
      colSpan: index === 3 ? 4 : 1,
    }),
  },
  {
    title: '费用详情',
    dataIndex: 'leaderUserId',
    onCell: sharedOnCell,
  },
  {
    title: '付款信息',
    dataIndex: 'sort',
    onCell: sharedOnCell,
  },
  {
    title: '退款信息',
    dataIndex: 'leaderUserId1',
    onCell: sharedOnCell,
  },
];

export type BtnType = 'sales' | 'confirm';

export const renderBaseInfoOrder = (
  data: TradeOrderDetailRespVO,
  handleClick: (type: BtnType) => void,
): React.ReactNode => {
  const orderStatusObj = data.orderStatus
    ? OrderStatusLabels[data.orderStatus as unknown as OrderStatus]
    : { color: 'default', label: '未知' };

  return (
    <>
      <Title
        type={(orderStatusObj?.color as BaseType) || ''}
        level={4}
        style={{ margin: 0 }}
      >
        {data?.orderStatus && orderStatusObj.label}
      </Title>
      {data.orderStatus === 10 && (
        <span>
          <Text type="secondary">剩余</Text>
          <Text>4分30秒</Text>
        </span>
      )}

      {data.orderStatus &&
        Number(data.orderStatus) === OrderStatus.Refunded && (
          <Paragraph>
            <Text type="secondary">退款时间：</Text>
            <Text>{data.refundTime}</Text>
          </Paragraph>
        )}
      {data.orderStatus &&
        (Number(data.orderStatus) === OrderStatus.Completed ||
          Number(data.orderStatus) === OrderStatus.Refunded) && (
          <Paragraph>
            <Text type="secondary">服务完成时间：</Text>
            <Text>{dayjs(data.finishTime).format(dateFormat)}</Text>
          </Paragraph>
        )}
      {data.orderStatus &&
        Number(data.orderStatus) === OrderStatus.Completed && (
          <Paragraph>
            <Text type="secondary">售后保障期：</Text>
            <Tag
              color={
                data.propertyStatus && Number(data.propertyStatus) === 1
                  ? 'default'
                  : 'gay'
              }
            >
              未过期
            </Tag>
            <Tag
              color={
                data.propertyStatus && Number(data.propertyStatus) === 1
                  ? 'gay'
                  : 'default'
              }
            >
              已过期
            </Tag>
            <Text>{data.propertyTime}</Text>
          </Paragraph>
        )}
      {/* 取消 */}
      {data.orderStatus &&
        Number(data.orderStatus) === OrderStatus.Cancelled && (
          <>
            <div>
              <Text type="secondary">取消时间：</Text>
              <Text>{data.cancelTime}</Text>
            </div>
            <div>
              <Text type="secondary">取消原因：</Text>
              <Text>{data.cancelReason}</Text>
            </div>
            <div>
              <Text type="secondary">备注：</Text>
              <Text>{data?.cancelRemark}</Text>
            </div>
          </>
        )}
      {data.orderStatus &&
        Number(data.orderStatus) <= OrderStatus.PendingAcceptance && (
          <Button type="primary" block onClick={() => handleClick('confirm')}>
            {OrderBtnLableMap[data.orderStatus as unknown as OrderStatus]}
          </Button>
        )}
      {data.orderStatus &&
        Number(data.orderStatus) <= OrderStatus.Completed && (
          <Button block onClick={() => handleClick('sales')}>
            新建售后
          </Button>
        )}
    </>
  );
};
