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

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

        this.state = {};
    }

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

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

        return (
            <View className="hot-series">
                <Text className="title">{title}</Text>
                <ScrollView
                    className='scrollview'
                    scrollX
                    scrollWithAnimation
                    scrollLeft='0'
                    lowerThreshold='20'
                    upperThreshold='20'
                    onScrolltoupper={this.onScrolltoupper}
                    onScroll={this.onScroll}>
                    {
                        floor.map(item => {
                            return (
                                <View className="item" key={item.series_id}>
                                    <Navigator url={`/pages/searchList/index?series=${item.series_id}&name=${item.series_name}`} hover-class="none">
                                        <Image src={getImgUrl(item.image_url, 140, 140)} mode="aspectFill" className="item-img" />
                                        <View className="item-name">{item.series_name}</View>
                                    </Navigator>
                                </View>
                            )
                        })
                    }
                </ScrollView>
            </View>
        )
    }
}