//公用事件列表
import { imageOptions } from '@/utils/comm';
import { Flex, Image, List, Spin } from 'antd';
import React, { useRef } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import styles from './index.less';
import { IMG_URL } from '@/utils/variables'

interface EventPicListProps {
  listData: any;
  setParams: (params: any) => void;
  listHeight?: number;//高度
  handleDetail?: (record: any) => void;
}
const EventPicList: React.FC<EventPicListProps> = ({ listData, listHeight = 700, setParams, handleDetail }) => {

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

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


  return (
    <div
      style={{
        height: listHeight,
        overflow: 'auto',
      }}
    >
      <InfiniteScroll
        style={{ overflow: 'hidden' }}
        loadMore={loadMoreData}
        hasMore={listData?.hasNext}
        useWindow={false}
        loader={
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        }
      >
        <List
          grid={{ column: 4, gutter: 20 }}
          dataSource={listData.items}
          loading={false}
          renderItem={(item: any) => (
            <List.Item key={item.eventId}>
              <div className={styles.cardWrap} >
                <Image
                  {...imageOptions}
                  src={IMG_URL + item.disposePicPath}
                  width={'100%'}
                  height={'160px'}
                  style={{ objectFit: 'cover' }}
                />
                <div className={styles.info} onClick={() => handleDetail && handleDetail(item)}>
                  <p className={styles.cardText}>
                    {item.standardEventTitle ?? '无标题'}
                  </p>
                  <Flex align='center'>
                    <span className={styles.status}>{item.caseStatusText}</span>
                    <span className={styles.type}>{item.collectionModeName || item.eventTypeName}</span>
                  </Flex>
                  <div>
                    <span>上报时间：</span>
                    <span>{item.reportTime}</span>
                  </div>
                  <div className={styles.textellipsis}>
                    <span>发生位置：</span>
                    <span>{item.address}</span>
                  </div>
                  {/* <LabelImgText
                    value={<><span style={{ color: '#CBEDFF' }}>上报时间：{item.reportTime}</span></>}
                    valueStyle={{ color: '#fff', fontSize: '16px' }}
                  />
                  <LabelImgText
                    value={<><span style={{ color: '#CBEDFF' }}>发生位置：{item.eventAddress}</span></>}
                    valueStyle={{ color: '#fff', fontSize: '16px' }}
                  />
                  <LabelImgText
                    value={item.reportTime}
                    valueStyle={{ color: '#6A738E', fontSize: '14px' }}
                  />
                  <LabelImgText
                    value={item.address}
                    valueStyle={{ color: '#6A738E', fontSize: '14px' }}
                  /> */}
                </div>
              </div>
            </List.Item>
          )}
        />
      </InfiniteScroll>
    </div>
  );
};

export default EventPicList;
