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 { transferImage } from '@/utils/tools'

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

  }

  changeCurrent(event) {
    // const { isChange } = this.props
    const current = event.detail.current

    // if(isChange){

    //    this.props.onChange(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 + 'swiper'}
              onClick={this.onBannerClick.bind(this, item)}
              className='home-banner__swiper-item'
            >
              <Image
                mode="aspectFill"
                style={style}
                className='home-banner__swiper-item-img'
                src={transferImage(item.image || item.coverImg || item.url || item.img || emptyImg)}
              />
            </SwiperItem>
          ))}
        </Swiper>
        {
          this.props.logo &&
          (
            <Image
              mode="aspectFill"
              className='logo'
              src={this.props.logo}
            />
          )
        }
      </View>
    )
  }
}
