//公用事件列表
import LabelImgText from '@/components/LabelImgText';
import { imageOptions } 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';

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

interface SafetyProblemProps {
  // listData: any;
  // setParams: (params: any) => void;
  listHeight?: number;//高度
}
const SafetyProblem: React.FC<SafetyProblemProps> = ({ listHeight = 650 }) => {

  const [listData, setListData] = useState([])

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

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

  const getListData = () => {
    const params = {
      conditionId: 'RC001',
      objectId: '510100',
      indexType: '1'
    }
    services.Physicalsign.getIndexSafetyProblemList(params).then((res: any) => {
      if (res.code === 200) {
        setListData(res.data)
      }
    })
  }

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


  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={item.eventImageUrl}
                  width={'100%'}
                  height={'160px'}
                  style={{ objectFit: 'cover' }}
                />
                <div className={styles.info}>
                  <p className={styles.cardText}>
                    {item.conditionName ?? '无标题'}
                  </p>
                  <Flex gap={10} align='center'>
                    <span className={styles.status}>{item.eventStatusText}</span>
                    <span className={styles.type}>{item.eventTypeName}</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>
    </div>
  );
};

export default SafetyProblem;
