//公用事件列表
import Modal from '@/components/HncyModal';
import LabelImgText from '@/components/LabelImgText';
import EventDetail from '@/pages/GlobalModalServices/modals/EventDetail';
import services from '@/services';
import { imageOptions, joinPictureHttp } from '@/utils/comm';
import { useModel } from '@umijs/max';
import { Flex, Image, List } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import styles from './index.less';

/**
 * @description 城市cqi-安全问题
 */

interface SafetyProblemProps {
  indexsItems: any;
  // listData: any;
  // setParams: (params: any) => void;
  listHeight?: number; //高度
}
const SafetyProblem: React.FC<SafetyProblemProps> = ({
  listHeight = 650,
  indexsItems,
}) => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [listData, setListData] = useState([]);

  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });

  const page = useRef({
    page: 1,
  });

  //下一页
  const loadMoreData = () => {
    // page.current.page++
  };

  const getListData = () => {
    const params = {
      indexId: indexsItems?.id,
      objectId: indexsItems?.objectId,
      indexType: '1',
      pageNo: page.current.page,
      pageSize: 50,
    };
    services.Physicalsign.getIndexSafetyProblemList(params).then((res: any) => {
      if (res.code === 200) {
        setListData(res.data);
      }
    });
  };

  useEffect(() => {
    if (indexsItems?.objectId) {
      getListData();
    }
  }, [indexsItems?.objectId]);

  return (
    <div
      style={{
        height: listHeight,
        overflow: 'auto',
        padding: '20px 0',
      }}
    >
      <InfiniteScroll
        style={{ overflow: 'hidden' }}
        loadMore={loadMoreData}
        hasMore={true}
        useWindow={false}
      >
        <List
          grid={{ column: 3, gutter: 20 }}
          dataSource={listData}
          loading={false}
          renderItem={(item: any) => (
            <List.Item key={item.eventId}>
              <div className={styles.cardWrap}>
                <Image
                  {...imageOptions}
                  src={joinPictureHttp(item.eventImageUrl)}
                  width={'100%'}
                  height={'160px'}
                  style={{ objectFit: 'cover' }}
                />
                <div
                  className={styles.info}
                  onClick={() =>
                    setDetailModalOpt({
                      open: true,
                      title: '事件详情',
                      eventId: item.eventId,
                    })
                  }
                >
                  <p className={styles.cardText}>
                    {item.eventTitle ?? '无标题'}
                  </p>
                  <Flex gap={10} align="center">
                    <span className={styles.status}>
                      {item.eventStatusText}
                    </span>
                    <span className={styles.type}>
                      {item.collectionModeText}
                    </span>
                  </Flex>
                  <LabelImgText
                    value={
                      <>
                        <span style={{ color: '#CBEDFF' }}>
                          上报时间：{item.eventCreateTime}
                        </span>
                      </>
                    }
                    valueStyle={{ color: '#fff', fontSize: '16px' }}
                  />
                  <LabelImgText
                    value={
                      <>
                        <span style={{ color: '#CBEDFF' }}>
                          发生位置：{item.eventAddress}
                        </span>
                      </>
                    }
                    valueStyle={{ color: '#fff', fontSize: '16px' }}
                  />
                </div>
              </div>
            </List.Item>
          )}
        />
      </InfiniteScroll>
      <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt?.title}
        onCancel={() =>
          setDetailModalOpt({ open: false, title: '', eventId: '' })
        }
        width={'fit-content'}
        height={950}
      >
        <EventDetail eventId={detailModalOpt?.eventId} />
      </Modal>
    </div>
  );
};

export default SafetyProblem;
