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

interface EventPicListProps {
  listData: any;
  setParams: (params: any) => void;
  listHeight?: number; //高度
  handleDetail?: (record: any) => void;
  showEventDetail?: boolean; //是否展示详情
}
const EventPicList: React.FC<EventPicListProps> = ({
  listData,
  listHeight = 700,
  setParams,
  handleDetail,
  showEventDetail = false,
}) => {
  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    eventId: string;
  }>({
    open: false,
    eventId: '',
  });

  //下一页
  const loadMoreData = () => {
    if(listData.hasNext) {
      setParams(Number(listData.page) + 1)
    }
  };
  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={joinPictureHttp(item.disposePicPath)}
                    width={'100%'}
                    height={'160px'}
                    style={{ objectFit: 'cover' }}
                  />
                  <div
                    className={styles.info}
                    onClick={() => {
                      if(showEventDetail) {
                        setDetailModalOpt({
                          open: true,
                          eventId: item.eventId,
                        });
                      }
                      if(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>
      {/* 展示详情框 */}
      <Modal
        open={detailModalOpt?.open}
        title={'事件详情'}
        onCancel={() => setDetailModalOpt({ open: false, eventId: '' })}
        width={1160}
        height={950}
      >
        <EventDetail eventId={detailModalOpt?.eventId} />
      </Modal>
    </>
  );
};

export default EventPicList;
