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

interface EventPicListProps {
  listData: any;
  setParams: (params: any) => void;
  listHeight?: number; //高度
  handleDetail?: (record: any) => void;
}
const EventPicList: React.FC<EventPicListProps> = (
  { listData, listHeight = 700, setParams, handleDetail },
  ref,
) => {
  const page = useRef({
    page: 1,
  });
  useImperativeHandle(ref, () => {
    return {
      resPage,
    };
  });
  const resPage = () => {
    page.current.page = 1;
  };

  return (
    <div id={'scrollableDiv1'}>
      <InfiniteScroll
        style={{
          height: listHeight,
          overflow: 'auto',
        }}
        height={listHeight}
        dataLength={listData.items?.length ?? 0}
        hasMore={listData?.hasNext}
        scrollableTarget={'scrollableDiv1'}
        loader={
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        }
        next={() => {
          console.log('222');
          page.current.page++;
          setParams(page);
        }}
      >
        <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={item?.photosZWW}
                  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>
                    {(item.collectionModeName || item.eventTypeName) && (
                      <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?.position}</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 forwardRef(EventPicList);
