import Tabs from '@/components/Tabs';
import EventPicList from '@/pages/Common/components/EventPicList';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { useMount } from 'ahooks';
import { Flex } from 'antd';
import { useRef, useState } from 'react';
const ProblemList = ({
  params,
  hideTab,
}: {
  params: any;
  hideTab?: boolean;
}) => {
  const { dispatch } = useGlobalModalServices();
  const fetchParams = useRef({
    page: 1,
    count: 10,
  });

  //事件列表
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });
  // 事件列表
  const getEventsList = () => {
    services.Physicalsign.getPageDifficultEventVO({
      ...params,
      ...fetchParams.current,
    }).then((res) => {
      console.log(res);

      const data = [...listData.items, ...res?.data?.items];
      setListData({ ...res?.data, items: data });
    });
  };

  const changeListTab = (e) => {
    fetchParams.current = { page: 1, count: 10, listType: e };

    services.Physicalsign.getPageDifficultEventVO({
      ...params,
      ...fetchParams.current,
    }).then((res) => {
      console.log(res);

      setListData({ ...res?.data });
    });
  };

  useMount(() => {
    getEventsList();
  });

  return (
    <div>
      <Flex justify="flex-end" style={{ marginBottom: 20 }}>
        {!hideTab && (
          <Tabs
            onChange={changeListTab}
            itemkey={'key'}
            defaultValue={params?.listType || 'all'}
            items={[
              {
                key: '1',
                label: '100天以上',
              },
              {
                key: '2',
                label: '30-100天',
              },
              {
                key: '3',
                label: '30天以内',
              },
            ]}
          />
        )}
      </Flex>
      <EventPicList
        listData={listData}
        listHeight={640}
        setParams={(page) => {
          fetchParams.current.page = page;
          getEventsList();
        }}
        handleDetail={(details) => {
          dispatch.push(
            'KeyAreaEventDetail',
            {
              title:"详情",
              props: {
                eventId: details.eventId,
              },
            },
            1,
          );
        }}
      />
    </div>
  );
};

export default ProblemList;
