/**
 * 重点区域事件, 事件详情
 */
import services from '@/services';
import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from 'react';
import Casecirculation, { CulationComponentRef } from './Casecirculation';
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 KeyAreaEventDetail = forwardRef<EventDetailRef, propsType>((props, ref) => {
  const { eventId, pretreatmentType, eventType = 'comm' } = props;
  const casecirculationRef = useRef<CulationComponentRef>(null);

  const [eventDetail, setEventDetail] = useState<API.EventDetailDto>(); //事件详情
  
  //查询事件基本信息
  const queryEventBaseApi = () => {
    services.Physicalsign.getKeyAreaEventDetail(eventId).then((res) => {
      // @ts-ignore
      setEventDetail(res.data);
    });
  };

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

  useImperativeHandle(ref, () => ({
    handleRefresh,
    lastcasecirculationRecord: casecirculationRef.current
      ?.getLastCasecirculationId as API.CulationType,
  }));
  

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

  return (
    <div className={styles.eventContent}>
      {eventDetail && (
        <>
          <EventLeftInfo eventInfo={eventDetail} />
          <div className={styles.transferWrap}>
            <Casecirculation
              eventType={eventType}
              ref={casecirculationRef}
              eventId={eventId}
              pretreatmentType={pretreatmentType}
              eventInfo={eventDetail}
            />
          </div>
        </>
      )}
    </div>
  );
});

export default KeyAreaEventDetail;
