import React from 'react';
import Swiper from 'swiper';
import styles from './styles.less'
import closeImg from '../../../../assets/close2.png';
import classNames from 'classnames';
import 'swiper/css/swiper.min.css';

class ShowVoucher extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bannerList: this.props.bannerList,
        }

        this.slider = null
    }

    componentDidMount() {
        this.showSwiper()


    }


    showSwiper() {
        //swiper初始化
        const { bannerList } = this.state
        if (bannerList.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,
                observeParents: true,
            })
        } else {
            this.swiper = new Swiper('.swiper-container', {
                loop: false,
                observer: true,
                observeParents: true,
            })
        }
    }

    render() {

        const { bannerList } = this.state
        // const showSwiper = window.localStorage.getItem(storageKey)
        return (
            <>
                {bannerList.length > 0 && <div className={styles.mask}>
                    <div className={styles.content}>
                        <img src={closeImg} alt="" className={styles.close} onClick={() => this.props.closeSwiper()} />
                        <div className={classNames(['swiper-container', styles.carousel])} >
                            <div className={classNames(['swiper-wrapper', styles.carousel])} >
                                {bannerList.map((item, index) =>
                                    <div key={'swiper' + index} className={classNames(['swiper-slide', styles.carouselItem])} >
                                        {/* <img style={{ width: '100%', borderRadius: '10px' }} src={item} alt="" /> */}
                                        <img style={{ maxHeight: '504px', borderRadius: '10px' }} src={item} alt="" />
                                    </div>,
                                )}
                            </div>
                            <div className={classNames(['swiper-pagination', styles.dots])} ></div>
                        </div>
                    </div>
                </div>}
            </>
        )
    }
}


export default ShowVoucher





// import React, { useState, useEffect } from 'react';
// import Carousel, { Modal, ModalGateway } from 'react-images';

// const ShowVoucher = props => {
//     const { bannerList = [], open, onClose } = props;
//     const [modalIsOpen, setModalIsOpen] = useState(open)
//     useEffect(() => {
//         setModalIsOpen(open)
//     }, [bannerList, open])

//     const toggleModal = () => {
//         setModalIsOpen(!modalIsOpen)
//         if (typeof onClose === 'function') {
//             onClose()
//         }

//     }
//     const styleInit = {
//         header: (base, state) => ({ //头部样式
//             position: 'absolute',
//             top: 90,
//             right: 90,
//             zIndex: 9999,
//         }),
//         view: (base, state) => ({
//             textAlign: 'center',
//             height: state.isFullscreen ? '100%' : 600  //当点击全屏的时候图片样式
//         })
//     }
//     return (
//         <ModalGateway >
//             {modalIsOpen ? (
//                 <Modal onClose={toggleModal} >
//                     <Carousel views={bannerList} styles={styleInit} />
//                 </Modal>
//             ) : null}
//         </ModalGateway>
//     );

// }

