import { ProCard } from '@ant-design/pro-components';
import {
  Avatar,
  Button,
  Card,
  Divider,
  Empty,
  Space,
  Steps,
  Typography,
} from 'antd';
import dayjs from 'dayjs';
import RcResizeObserver from 'rc-resize-observer';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { OrderStatus, OrderStatusLabels } from '@/constants/trade';
import type {
  TradeOrderDetailRespVO,
  TradeOrderStatusRespVo,
} from '@/services/trade/order/detail';
import type { ItemConfig } from '../../order-info';
import { type BtnType, renderBaseInfoOrder } from './config';
import styles from './index.module.less';

const { Text } = Typography;
const BasicInfo: React.FC<ItemConfig<TradeOrderDetailRespVO>> = (props) => {
  const { data, loading } = props;
  const [orderStatus, setOrderStatus] = useState<number>(0);
  const [statusList, setStatusList] = useState<TradeOrderStatusRespVo[]>([]);

  useEffect(() => {
    if (data) {
      setOrderStatus(Number(data.orderStatus));
      setStatusList(data?.statusList || []);
    }
  }, [data]);

  const [responsive, setResponsive] = useState(false);
  const renderTitle = useCallback(() => {
    return (
      <Space size={16}>
        <div>
          <Text type="secondary">订单编号：</Text>
          <Text copyable>{data?.orderNum}</Text>
        </div>
        <div>
          <Text type="secondary">订单类目：</Text>
          <Text>{data?.orderCategoryName}</Text>
          <Text>ID:</Text>
          <Divider type="vertical" />
          <Text copyable>{data?.orderCategoryId}</Text>
        </div>
        <div>
          <Text type="secondary">订单来源：</Text>
          <Text>{data?.orderTerminal}</Text>
        </div>
        <Space>
          <Avatar size={20} src={data?.userAvatar} />
          <Text>{data?.userName || data?.userNickName}</Text>
          <Text>{data?.userMobile}</Text>
        </Space>
      </Space>
    );
  }, [data]);

  const handleClick = useCallback(
    (type: BtnType) => {
      if (type === 'confirm') {
        //还未完成的按钮事件
        console.log(data?.orderStatus);
      } else if (type === 'sales') {
        //新建售后事件
      }
      console.log(type);
    },
    [data],
  );
  const renderOrderStatus = useMemo(() => {
    if (data) return renderBaseInfoOrder(data, handleClick);
  }, [data]);

  return (
    <div className={styles['order-info']}>
      <Card title="基本信息" loading={loading}>
        <Space direction="vertical" size={16} style={{ width: '100%' }}>
          {data ? (
            <ProCard
              size="small"
              title={renderTitle()}
              bordered
              headerBordered
              gutter={8}
              className="order-info-card"
            >
              <ProCard colSpan="300px">
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 10,
                    alignItems: 'center',
                  }}
                >
                  {renderOrderStatus}
                </div>
              </ProCard>
              <ProCard layout="center">
                <RcResizeObserver
                  key="resize-observer"
                  onResize={(offset) => {
                    setResponsive(offset.width < 460);
                  }}
                >
                  <Steps
                    size="small"
                    progressDot
                    style={{ width: '100%' }}
                    current={statusList.length}
                    direction={responsive ? 'vertical' : 'horizontal'}
                    items={[
                      {
                        title: `创建订单`,
                        description: (
                          <Space direction="vertical" size={0}>
                            {dayjs(data.createTime).format('YYYY-MM-DD')}
                            {dayjs(data.createTime).format('HH:mm:ss')}
                          </Space>
                        ),
                      },
                      {
                        title: `${
                          OrderStatusLabels[OrderStatus.PendingPayment].label
                        } ${
                          orderStatus > OrderStatus.PendingPayment
                            ? '(已付款)'
                            : ''
                        }`,
                        description: (
                          <Space direction="vertical" size={0}>
                            {dayjs(data.createTime).format('YYYY-MM-DD')}
                            {dayjs(data.createTime).format('HH:mm:ss')}
                          </Space>
                        ),
                      },
                      {
                        title: `${
                          OrderStatusLabels[OrderStatus.PendingConfirmation]
                            .label
                        } ${
                          orderStatus > OrderStatus.PendingConfirmation
                            ? '(已确定)'
                            : ''
                        }`,
                        description: (
                          <Space direction="vertical" size={0}>
                            {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
                        {dayjs(data.finishTime).format("HH:mm:ss")} */}
                          </Space>
                        ),
                      },
                      {
                        title: `${
                          OrderStatusLabels[OrderStatus.PendingService].label
                        } ${
                          orderStatus > OrderStatus.PendingService
                            ? '(已开始)'
                            : ''
                        }`,
                        description: (
                          <Space direction="vertical" size={0}>
                            {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
                        {dayjs(data.finishTime).format("HH:mm:ss")} */}
                          </Space>
                        ),
                      },
                      {
                        title: `${
                          OrderStatusLabels[OrderStatus.PendingAcceptance].label
                        } ${
                          orderStatus > OrderStatus.PendingAcceptance
                            ? '(已验收)'
                            : ''
                        }`,
                        description: (
                          <Space direction="vertical" size={0}>
                            {/* {dayjs(data.finishTime).format("YYYY-MM-DD")}
                        {dayjs(data.finishTime).format("HH:mm:ss")} */}
                          </Space>
                        ),
                      },
                      {
                        title: '完成',
                        description: (
                          <Space direction="vertical" size={0}>
                            {dayjs(data.finishTime).format('YYYY-MM-DD')}
                            {dayjs(data.finishTime).format('HH:mm:ss')}
                          </Space>
                        ),
                      },
                    ]}
                  />
                </RcResizeObserver>
              </ProCard>
            </ProCard>
          ) : (
            <Empty />
          )}
          <ProCard
            size="small"
            bordered
            headerBordered
            title="订单付款信息"
            gutter={8}
            extra={<Button size="small">财务状态:{data?.financeStatus}</Button>}
          >
            <ProCard>
              <Space direction="vertical">
                <div>
                  <Text type="secondary">订单总价：</Text>
                  <Text>{data?.price}</Text>
                </div>
                <div>
                  <Text type="secondary">优惠总额：</Text>
                  <Text>{data?.discountPrice}</Text>
                </div>
                <div>
                  <Text type="secondary">实付金额：</Text>
                  <Text>{data?.payPrice}</Text>
                </div>
                <div>
                  <Text type="secondary">累计退款金额：</Text>
                  <Text>{data?.refundPrice}</Text>
                </div>
                <div>
                  <Text type="secondary">最终实收金额：</Text>
                  <Text>{data?.livePrice}</Text>
                </div>
              </Space>
            </ProCard>
            <ProCard>
              <Space direction="vertical">
                <div>
                  <Text type="secondary">支付方式：</Text>
                  <Text>{data?.payType}</Text>
                </div>
                <div>
                  <Text type="secondary">支付渠道：</Text>
                  <Text>{data?.payChannelCode}</Text>
                </div>
                <div>
                  <Text type="secondary">支付时间：</Text>
                  <Text>{data?.payTime}</Text>
                </div>
                <div>
                  <Text type="secondary">交易流水：</Text>
                  <Text>{data?.payOrderId}</Text>
                </div>
              </Space>
            </ProCard>
          </ProCard>
        </Space>
      </Card>
    </div>
  );
};

export default React.memo(BasicInfo);
