import Taro, {Component} from '@tarojs/taro';
import { Swiper, SwiperItem, Navigator, Image, Button, ScrollView } from '@tarojs/components';
import {getImgUrl, debounce} from '../../utils';
const _ = require('lodash');
import './index.scss';
import router from '../../router/index';

export default class Focus extends Component {
    constructor(props) {
        super(props);

        this.state = {
          focusID: 'focus',
          scrollTop: 0
        };
    }

    static defaultProps = {
        floor: []
    }

    componentWillMount() {}

    componentDidMount() {

    }

    componentWillUnmount() {}

    componentDidShow() {

    }

    componentDidHide() {}

    goToResource(item) {
      router.goUrl(item.url);
    }

    onScroll(e) {
      console.log(e.detail);
      console.log(e);
      console.log((e.detail.scrollLeft / 335).toFixed(0));
      let index = (e.detail.scrollLeft / 335).toFixed(0);

      let _this = this;
 
      if (this.scrollEndTimer) {
          clearTimeout(this.scrollEndTimer);
          this.scrollEndTimer = null;
      }

      this.scrollEndTimer = setTimeout(function () {
        _this.setState({
            focusID: `focus${index}`
        })
      }, 40);
    }

    render() {
        let {floor} = this.props;
        let { focusID, scrollTop } = this.state;

        return (
        <View className='swiper-bg'>  
            <Swiper
                className='index-swiper'
            >
                {
                    floor.map((item, index) => {
                        return (
                            <SwiperItem key={index}>
                              <Image onClick={this.goToResource.bind(this, item)} src={getImgUrl(item.src, 670, 280)} mode="aspectFill" />
                            </SwiperItem>
                        )
                    })
                }
            </Swiper>

        </View>
        )
    }
}