import { MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import { useParams } from '@umijs/max';
import { Tabs } from 'antd';
import { useEffect, useState } from 'react';
import MyFollows from '../follows';
import Info from '../components/Info';

export default function Show({ title = '详情' }: { title?: string } = {}) {
  const { id } = useParams<{ id: string }>();
  const [data, setShow] = useState<any>({});

  const loadShow = () => {
    let paramsId: any = { id: id ?? 0 };
    Apis.Emergency.EmergencyEvents.Show(paramsId).then((res) => {
      setShow(res?.data);
    });
  };

  useEffect(() => {
    loadShow();
  }, [id]);

  const items = [
    {
      label: '事件详情',
      key: 'emergency_events_show_info',
      children: <Info item={data} reload={loadShow} />,
    },
    {
      label: '事件跟进记录',
      key: 'emergency_events_show_follows',
      children: <MyFollows item={data} reload={loadShow} />,
    },
  ];

  return (
    data?.id && (
      <MyPageContainer
        enableTabs={true}
        tabKey={`emergency_events_show_${id}`}
        title={`${title} - ${data?.name}`}
      >
        <Tabs type="card" items={items} />
      </MyPageContainer>
    )
  );
}
