import EventPicList from '@/pages/Common/components/EventPicList';
import services from '@/services';
import { useModel } from '@umijs/max';
import { Flex, Spin } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { ChildrenModalMethods } from '../../type';
import styles from './index.less';

/**
 *
 * @description 影响指标
 */

const InfluenceSignNew = (props: {
  data: any;
  objectId: string;
  modalDispatch: ChildrenModalMethods;
}) => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { data, modalDispatch, objectId } = props;

  const params = {
    page: 1,
    count: 10,
    objectId: objectId,
    // conditionId: data?.conditionId,
    indexId: data?.id,
    finished: false,
  };

  const fetchParams = useRef<any>(params);
  const [loading, setLoading] = useState(true);

  //事件列表
  const [listData, setListData] = useState<any>({
    items: [],
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });

  const getListData = async () => {
    const res = await services.Physicalsign.getPhysicalsignindexPageCaseInfoVO(
      fetchParams.current,
    );
    if (res.code === 200) {
      let items = res.data.items.map((item: any) => ({
        ...item,
        standardEventTitle: item?.conditionName,
        caseStatusText: item?.eventStatusText,
        collectionModeName: item?.sourceText,
        address: item?.eventAddress,
        reportTime: item?.eventCreateTime,
        disposePicPath: item?.eventImageUrl,
      }));
      let result = {
        ...res.data,
        items:
          fetchParams.current.page === 1
            ? items
            : [...listData.items, ...items],
      };
      setListData(result);
      setLoading(false);
    }
  };

  useEffect(() => {
    getListData();
  }, []);

  return (
    <div className={styles.wrap}>
      {loading && (
        <Flex
          align="center"
          justify="center"
          style={{ height: '100%', paddingTop: 50 }}
        >
          <Spin></Spin>
        </Flex>
      )}
      {listData?.items?.length ? (
        <EventPicList
          listData={listData}
          listHeight={700}
          setParams={(page) => {
            fetchParams.current.page = page;
            getListData();
          }}
          handleDetail={(details) => {
            modalDispatch.push(
              'EventDetail',
              {
                w: 'fit-content',
                props: {
                  eventId: details.eventId,
                },
              },
              1,
            );
          }}
        />
      ) : (
        <></>
      )}
    </div>
  );
};

export default InfluenceSignNew;
