import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
// import { cdn } from '@/constants/api'
import './index.scss'
import { transferImage } from '@/utils/tools'

export default class SwiperBanner extends Component {
  static defaultProps = {
    list: [],
    onClick: function () { }
  }
  state = {
    visiable: true
  }

  componentDidHide() {
    console.log('componentDidHide#######')

    this.setState({
      visiable: false
    })
  }
  componentDidShow() {
    this.setState({
      visiable: true
    })
  }

  componentWillMount() {
    console.log('componentWillMount#######')
  }

  onBannerClick(item) {
    this.props.onClick(item)
  }
  render() {
    const { list, indicatorDots } = this.props
    return (
      <View className='home-banner'>
        {
          this.state.visiable && <Swiper
            className='home-banner__swiper'
            circular
            autoplay
            indicatorDots={indicatorDots}
            indicatorActiveColor='rgb(178, 42, 49)'

          >
            {list.map((item, index) => (
              <SwiperItem
                key={index + 'swiper3'}
                onClick={this.onBannerClick.bind(this, item)}
                className='home-banner__swiper-item'
              >
                <Image
                  mode="aspectFill"
                  className='home-banner__swiper-item-img'
                  src={transferImage(item.image)}
                />
              </SwiperItem>
            ))}
          </Swiper>
        }

      </View>
    )
  }
}
