import { Flex } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import { joinPictureHttp } from '@/utils/comm';
import Modal from '@/components/HncyModal';
import EventDetail from '@/pages/Common/Event/EventDetail';

const LiveSlideshow: React.FC<{ eventList: any }> = (props) => {

  const { eventList } = props;

  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: ''
  })

  return (
    <div className={styles.container}>
      <div className={styles.title}>
        实况<br></br> 轮播
      </div>
      <Flex gap={20} style={{ overflowY: 'hidden' }} >
        {
          eventList?.map(item => (
            <div className={styles.card} key={item.eventId}
              onClick={() => {
                // setDetailModalOpt({ open: true, title: '事件详情', eventId: item.eventId })
              }}>
              <img src={joinPictureHttp(item.disposePicPath)} alt=""></img>
              <div className={styles.time}>5分钟前</div>
              <div className={styles.cardTitle}>
                <div>
                  {item.standardEventTitle}
                </div>
              </div>
            </div>
          ))
        }
      </Flex>
      {/* <div className={styles.moreBtn}>
        更<br></br>多
      </div> */}

      <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt?.title}
        onCancel={() => setDetailModalOpt({ open: false, title: '', eventId: '' })}
        width={1160}
        height={950}
      >
        <EventDetail eventId={detailModalOpt?.eventId} />
      </Modal>
    </div>
  );
};

export default LiveSlideshow;
