import { Flex, Carousel } 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 KeyAreaEventDetail from '@/pages/Common/Event/KeyAreaEventDetail';
import EmptySpace from '@/components/EmptySpace';

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>
      {
        eventList?.length ? (
          <div className={styles.carouselWrap}>
            <Flex 
              gap={20}
              // style={{
              //   width: `${167 * eventList?.length}px`,
              //   animation: `templates-partner-moving ${
              //     (length / showNum / 2) * speed
              //   }s infinite linear`
              // }}
            >
              {
                eventList?.map((item: any) => (
                  <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}>{item.reportDurationDescription}</div>
                    <div className={styles.cardTitle}>
                      <div>
                        {item.standardEventTitle}
                      </div>
                    </div>
                  </div>
                ))
              }
            </Flex>
          </div>
        ) : <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
      }


      {/* <div className={styles.moreBtn}>
        更<br></br>多
      </div> */}

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

export default LiveSlideshow;
