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

/**
 * @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;
