import { Space } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import {
  getTradeOrderDetail,
  type TradeOrderDetailRespVO,
  type TradeOrderPageRespVO,
} from '@/services/trade/order';
import BasicInfo from './src/info/basic-info'; //基本信息（通版）
import ExtendCostInfo from './src/info/extend-cost'; //服务附加费（殡葬专属字段）
import ExtendService from './src/info/extend-service'; //可选服务（殡葬专属字段）
import ProdInfo from './src/info/prod-info'; //商品信息（通版）
import ServiceInfo from './src/info/service-info';

export interface ItemConfig<T> {
  data?: T;
  loading?: boolean;
  orderCategoryId?: number;
  id?: number;
}
const OrderDetail: React.FC<{ data?: TradeOrderPageRespVO }> = (props) => {
  const { data } = props;
  const [detais, setDetails] = useState<TradeOrderDetailRespVO>();
  const [loading, setLoading] = useState<boolean>(false);
  const fetch = useCallback(async () => {
    try {
      setLoading(true);
      if (data?.id) {
        const res = await getTradeOrderDetail(data.id);
        setDetails(res);
      }
    } finally {
      setLoading(false);
    }
  }, [data?.id]);
  useEffect(() => {
    fetch();
  }, [data?.id]);

  return (
    <Space direction="vertical" size={24} style={{ width: '100%' }}>
      <BasicInfo data={detais} loading={loading} />
      <ProdInfo data={detais?.items} loading={loading} />
      {detais?.tradeServeInfo && (
        <ServiceInfo
          data={detais.tradeServeInfo}
          orderCategoryId={detais?.orderCategoryId}
          loading={loading}
        />
      )}
      {detais?.tradeExtendServeInfo && (
        <ExtendService
          data={detais.tradeExtendServeInfo}
          orderCategoryId={detais?.orderCategoryId}
        />
      )}
      {detais?.tradeExtendCostInfo && (
        <ExtendCostInfo
          data={detais?.tradeExtendCostInfo}
          orderCategoryId={detais?.orderCategoryId}
        />
      )}
    </Space>
  );
};

export default React.memo(OrderDetail);
