/*
 * @Title:数据列表轮播组件
 * @Author: hongmye
 * @Date: 2023-02-08 16:03:42
 */
import PandaEmpty from '@wisdom-components/empty';
import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/pagination/pagination.min.css';
import SwiperCore, { Autoplay, Mousewheel, Navigation, Pagination } from 'swiper/core';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
import styles from './index.less';

SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel]);

const DataCarousel = ({ list, itemHeight, renderItem, config, autoplay, onSwiper, showEmpty = true }) => {
  const autoplayConfig = {
    delay: autoplay,
    disableOnInteraction: false,
  };
  const contentRef = useRef(null);
  const swiperRef = useRef(null);
  const [listData, setListData] = useState([]);

  useEffect(() => {
    setListData(list);
  }, [list]);
  return (
    <div
      className={classNames(styles.dataCarousel, 'dataCarousel')}
      style={{ width: '100%', height: '100%' }}
      ref={contentRef}
    >
      <div className={classNames(styles.dataCarouselSwiper)} style={{ width: '100%', height: '100%' }}>
        {listData && listData.length ? (
          <Swiper
            slidesPerView="auto"
            autoplay={autoplay * 1 && listData.length > 1 ? autoplayConfig : false}
            loop
            height={itemHeight}
            direction="vertical"
            onSlideChange={e => {}}
            mousewheel
            onSwiper={swiper => {
              swiperRef.current = swiper;
              onSwiper && onSwiper(swiper);
              // 鼠标悬浮暂停效果
              swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop());
              // 鼠标移开后继续自动滚屏效果
              swiper.$el[0].addEventListener('mouseleave', () => {
                listData.length > 1 && autoplay * 1 ? swiper.autoplay.start() : '';
              });
            }}
            {...config}
          >
            {listData.map((item, index) => (
              <SwiperSlide key={index} virtualIndex={index} onClick={() => {}}>
                {renderItem(item, index + 1)}
              </SwiperSlide>
            ))}
          </Swiper>
        ) : showEmpty ? (
          <div style={{ paddingTop: 10 }}>
            <PandaEmpty />
          </div>
        ) : null}
      </div>
    </div>
  );
};

export default DataCarousel;