/**
 * 事件详情
 * 有两种模式：单兵直达样式
 *           通用信息样式
 */
import services from '@/services';
import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState,
} from 'react';
import Casecirculation, { CulationComponentRef } from './Casecirculation';
import DirectEventDetail from './DirectEventDetail';
import EventLeftInfo from './EventLeftInfo';
import styles from './index.less';
export type propsType = {
  eventId: string;
  pretreatmentType?: string; //查询预处理案件流转
  eventType?: 'pretreatment' | 'comm'; //区分是预处理还是通用，预处理接口不一样，里面数据一样
};

export type EventDetailRef = {
  handleRefresh: () => void;
  lastcasecirculationRecord: API.CulationType;
};

const EventDetail = forwardRef<EventDetailRef, propsType>((props, ref) => {
  const { eventId, pretreatmentType, eventType = 'comm' } = props;
  const casecirculationRef = useRef<CulationComponentRef>(null);

  useImperativeHandle(ref, () => ({
    handleRefresh,
    lastcasecirculationRecord: casecirculationRef.current
      ?.getLastCasecirculationId as API.CulationType,
  }));
  const [eventDetail, setEventDetail] = useState<API.EventDetailDto>(); //事件详情

  useEffect(() => {
    queryEventBaseApi();
  }, [eventId]);

  //刷新数据
  const handleRefresh = () => {
    queryEventBaseApi();
    casecirculationRef.current?.queryCirculationRecord(); //查询流转记录
  };

  //查询事件基本信息
  const queryEventBaseApi = () => {
    if (eventType === 'pretreatment') {
      //预处理
      services.PreEventQuery.getEventInfoDetail(eventId).then((res) => {
        // @ts-ignore
        setEventDetail(res);
      });
    } else {
      //办理
      services.DealQuery.getEventInfoDetail(eventId).then((res) => {
        // @ts-ignore
        setEventDetail(res);
      });
    }
  };

  //判断是否直达且已办理-已直达的详情(dbzdMark==='1'&&eventStatus===60)
  const isDirectPend = useMemo(() => {
    return (
      eventDetail?.eventBase?.dbzdMark == '1' &&
      eventDetail?.eventBase?.eventStatus == '60'
    );
  }, [eventDetail]);

  return (
    <>
      {/* 判断是否直达且已办理-已直达 */}
      {isDirectPend ? (
        eventDetail && (
          <DirectEventDetail
            eventId={eventDetail?.eventBase.eventId}
            eventDetail={eventDetail}
          />
        )
      ) : (
        // 基本通用样式的详情
        <div className={styles.eventContent}>
          {eventDetail && (
            <>
              <EventLeftInfo eventInfo={eventDetail} />
              <div className={styles.transferWrap}>
                <Casecirculation
                  eventType={eventType}
                  ref={casecirculationRef}
                  eventId={eventId}
                  pretreatmentType={pretreatmentType}
                />
              </div>
            </>
          )}
        </div>
      )}
    </>
  );
});

export default EventDetail;
