import React, { Component } from 'react';
import { Carousel, WingBlank } from 'antd-mobile';


import './Slide.css'

class Slide extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        imgHeight: 176
      }
    }

    render() {
      return (
        <WingBlank>
          <Carousel
            autoplay={true}
            infinite
            slideWidth={1}
            beforeChange={(from, to) => {}}
            afterChange={index => {}}
          >
            {this.props.slide.map(item => (
              <a
                key={item.toString()}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={item.img}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </WingBlank>
      );
    }
  }


  export default Slide