import React, { useState, useRef } from "react";
import { Alert, message } from 'antd';
import Swiper from 'swiper';
import router from 'umi/router';
import request from '../../utils/request'
import apis from '../../services/apis';
import styles from './style.less'
import closeImg from '../../assets/close.png';
import classNames from 'classnames';
import 'swiper/css/swiper.min.css';

const storageKey = 'showSwiperIndex';

class swiper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: true,
            bannerList: []
        }

        this.slider = null
    }

    componentDidMount() {
        this.getbannerList({ pageNumber: 1, pageSize: 999, type: 'sample' })


    }


    getbannerList(params) {

        request({ ...apis.indexEcharts.indexBanner, params: { ...params } }).then(res => {
            this.setState({ bannerList: res.records || [] }, () => {
                const bannerShow = window.localStorage.getItem(storageKey)

                if (bannerShow) {
                    //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,
                        })
                    }

                }
            })
        }).catch(err => {

            <Alert
                style={{
                    marginBottom: 24,
                }}
                message={err}
                type="error"
                showIcon
            />
        })
    }
    handleSwiperItem(item) {
        if (item.targetId) {
            const aTag = document.createElement('a')

            aTag.setAttribute('href', `${window.location.origin}${window.location.pathname}#/h5SampleManager/h5Sample/detail?id=${item.targetId}`);
            aTag.setAttribute('target', '_blank')
            document.body.appendChild(aTag)
            aTag.click();
        } else {
            message.warning('当前开屏通知不存在关联的H5样例');

        }
    }

    closeSwiper() {
        this.setState({
            visible: false
        })
        window.localStorage.removeItem(storageKey)
    }
    render() {

        const { visible, bannerList } = this.state
        const showSwiper = window.localStorage.getItem(storageKey)
        return (
            <>
                {bannerList.length > 0 && visible && showSwiper && <div className={styles.mask}>
                    <div className={styles.content}>
                        <img src={closeImg} alt="" className={styles.close} onClick={() => this.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])} onClick={() => this.handleSwiperItem(item)}>
                                        <img style={{ width: '100%', height: '100%', borderRadius: '10px' }} src={item.noticeImg} alt="" />
                                        <div className={styles.title}>{item.title}</div>
                                    </div>
                                )}
                            </div>
                            <div className={classNames(['swiper-pagination', styles.dots])}  ></div>
                        </div>
                    </div>
                </div>}
            </>
        )
    }
}


export default swiper
