import Taro, {Component} from '@tarojs/taro';
import {View, Text, ScrollView, Image} from '@tarojs/components';
import {getImgUrl} from '../../utils';
import './index.scss';
import router from '../../router/index';

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

        this.state = {};
    }

    static defaultProps = {
        floor: [],
        title: '热门系列',
        isShow: false
    }

    goToList(item) {
      router.go('productList', { 
        series: item.series_id,
        name: item.series_name
      });
    }

    render() {
        let {floor, title, isShow} = this.props;

        return (
            <View className="hot-series">
                <Text className="title">{title}</Text>
                <ScrollView
                    className='scrollview'
                    scrollX
                    scrollWithAnimation
                    scrollLeft='0'
                    lowerThreshold='20'
                    upperThreshold='20'
                >
                    {
                        floor.map(item => {
                            return (
                                <View className="item" key={item.series_id}>
                                  <Image onClick={this.goToList.bind(this, item)} src={getImgUrl(item.image_url, 140, 140)} mode="aspectFill" className="item-img" />
                                        <View className="item-name">{item.series_name}</View>
                                </View>
                            )
                        })
                    }
                </ScrollView>
                <View className={isShow ? "category-line" : "category-line hidden"}></View>
            </View>
        )
    }
}