import React from 'react'
import { getWindow, getDocument, extend } from 'ssr-window';
import Swiper from "swiper"
import "swiper/swiper.min.css"
import SwiperCore, {Autoplay, Navigation, Pagination, Scrollbar, A11y } from 'swiper';


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




export default class BannerTwo extends React.Component {
    constructor(props) {
        super(props);
        this.window = getWindow();      
        var body = document.querySelector('body');
        this.height = body.clientWidth * 0.38;
        console.log(body.clientHeight);
        console.log(window.screen.height);
        console.log("avail:"+window.screen.availHeight);
        console.log(body.clientWidth);
        this.state = {
            banner: [
                {img: "./assets/images/banner1.png"}, // public
                {img: "./assets/images/banner1.png"},
                {img: "./assets/images/banner1.png"},
            ]
        } 
    }


    componentDidMount() {
         this.swiperObj = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: true,
            speed: 1000,
            loop: true,
            slidesPerView: 1,
            direction: 'horizontal',     
            autoplayDisableOnInteraction: false,
            pagination: {
                 el: '.swiper-pagination',
                 clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            observer: true,//修改swiper自己或子元素时，自动初始化swiper  

            observeParents: true,//修改swiper的父元素时，自动初始化swiper  
       })

    }
    componentDidUpdate(){
       this.swiperObj.update();

       this.swiperObj.slideTo(0, 1000, false);
    }

    render() {
        return (
          <>
            <div className="swiper-container">
              <div className="swiper-wrapper">
                {
                    this.state.banner.map((item, index) => {
                    return (
                        <div className="swiper-slide" key={"k" + index}>
                            <img src={item.img}  alt='' style= {{width: '100%', height: '100%'}}></img>
                        </div>
                    )
                })}
              </div>
             <div className="swiper-pagination"></div>
               
               <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
          </div>
         </>
        )
    }
}