import React, { useEffect } from 'react';
// import Swiper from 'swiper';
import styles from './style.less'
import './swiper.less'
import classNames from 'classnames';
import closeImg from '../../../assets/close.png';
// import 'swiper/css/swiper.min.css';
import { Carousel } from 'antd';

const swiper = ({ list, onClose }) => {

    useEffect(() => {
        // if (list.length > 0) {
        //     //swiper初始化
        //     if (list.length > 1) {
        //         this.swiper = new Swiper('.swiper-container', {
        //             slidesPerView: 1,
        //             loop: true,
        //             autoplay: {
        //                 disableOnInteraction: false,
        //             },
        //             touchRatio: 1.5,
        //             pagination: {
        //                 el: '.swiper-pagination',
        //                 bulletElement: 'li',
        //                 clickable: true,
        //                 bulletActiveClass: 'antd-pro-pages-swiper-style-active',
        //             },
        //             observer: true,//修改swiper自己或子元素时，自动初始化swiper
        //             observeParents: true,//修改swiper的父元素时，自动初始化swiper
        //         })
        //     } else {
        //         this.swiper = new Swiper('.swiper-container', {
        //             loop: false,
        //             observer: true,//修改swiper自己或子元素时，自动初始化swiper
        //             observeParents: true,//修改swiper的父元素时，自动初始化swiper
        //         })
        //     }

        // }
    }, [])

    return (
        <>
            {list.length > 0 && <div className={styles.mask}>
                <div className={styles.content}>
                    <img src={closeImg} alt="" className={styles.close} onClick={onClose} />
                    <Carousel autoplay draggable>
                        {list.map((item, index) =>
                            <img className={styles.swiperImg} key={index} style={{ borderRadius: '10px', objectFit: 'contain' }} src={item} alt="" />,
                            // <img className={styles.swiperImg} style={{ width: '32vw', minWidth: '757px', height: '21.3vw', minHeight: '504px', borderRadius: '10px' }} src={item} alt="" />,
                        )}
                    </Carousel>
                    {/* <div className={classNames(['swiper-container', styles.carousel])}  >object-fit: contain;
                        <div className={classNames(['swiper-wrapper', styles.carousel])} >
                            {list.map((item, index) =>
                                <div key={'swiper' + index} className={classNames(['swiper-slide', styles.carouselItem])} >
                                    <img style={{ width: '100%', height: '100%', borderRadius: '10px' }} src={item} alt="" />
                                </div>
                            )}
                        </div>
                        <div className={classNames(['swiper-pagination', styles.dots])}  ></div>
                    </div> */}
                </div>
            </div>}
        </>
    )
};

export default swiper;
