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

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

  onBannerClick(item) {
    this.props.onClick(item)
  }
  render() {
    const { list, indicatorDots} = this.props
    return (
      <View className='home-banner'>
        <Swiper
          className='home-banner__swiper'
          circular
          autoplay
          indicatorDots={indicatorDots}
          indicatorActiveColor='rgb(178, 42, 49)'
        // TODO 目前 H5、RN 暂不支持 previousMargin、nextMargin
        // previousMargin
        // nextMargin
        >
          {list.map((item, index) => (
            <SwiperItem
              key={index}
              onClick={this.onBannerClick.bind(this, item)}
              className='home-banner__swiper-item'
            >
              <Image
                mode="aspectFill"
                className='home-banner__swiper-item-img'
                src={getThumbnail(item.image)}
              />
            </SwiperItem>
          ))}
        </Swiper>
      </View>
    )
  }
}
