import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image, Block } 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'
    },
    type:'',
    // activityStyle: {
    //   height: '200px'
    // },
    onClick: function () { }
  }

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

    const styles = activityStyle ? activityStyle : style
    return (
      <View className='home-banner' style={styles}>

        <Swiper
          className='home-banner__swiper'
          circular
          autoplay
          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'
            >
              <View style={{ display: 'block' }}>
                <Image
                  mode="aspectFill"
                  style={style}
                  className='home-banner__swiper-item-img'
                  src={getThumbnail(item.bannerListImg || item.image || item.url || item.img || item.imgUrl || emptyImg)}
                />
                {type=='activity' && <View className='home-banner__swiper-item__title'> {item.title}</View>}
              </View>
            </SwiperItem>
          ))}
        </Swiper>
      </View>
    )
  }
}
