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

export default class SwiperBanner extends Component {
  static defaultProps = {
    list: [],
    indicatorDots: true,
    style: {
      height: '200px'
    },
    onClick: function () { },
   
  }

  changeCurrent (event) {

 
    const current = event.detail.current
   
    this.props.onChange|| this.props.onChange(current)
  
   
  
  }

  onBannerClick (item) {
    this.props.onClick(item)
  }
  render () {
    const { list, style, indicatorDots, current } = this.props

    console.log('banner',list)
    return (
      <View className='home-banner' style={style}>
        <Swiper
          className='home-banner__swiper'
          circular
          autoplay
          onChange={this.changeCurrent.bind(this)}
          indicatorDots={indicatorDots}
          indicatorActiveColor='rgb(256,256,256)'
        >
          {list.map((item, index) => (
            <SwiperItem
              key={index}
              onClick={this.onBannerClick.bind(this, item)}
              className='home-banner__swiper-item'
            >
              <Image
                mode="widthFix"
                style={style}
                className='home-banner__swiper-item-img'
                src={getThumbnail(item.image || item.url || item.img || emptyImg)}
              />
            </SwiperItem>
          ))}
        </Swiper>
      </View>
    )
  }
}
