/**
 * Created by zack on 2018/4/19.
 */
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableHighlight,
    ImageBackground
} from 'react-native'
import React, { Component } from 'react'
import ScreenDimensions from '../../../utils/ScreenDimensions'
import ScreenDimensionsClientHeight from '../../../utils/ScreenDimensions'
import NavigationBarHeight from '../../../utils/NavigationBarHeight'
import TabBarHeight from '../../../utils/TabBarHeight'
import RefreshInfiniteListView from '../../../utils/RefreshInfiniteListView'

//ScreenDimensions.clientHeight 
const clientHeight = ScreenDimensions.clientHeight;
export default class SmallVideoViewController extends Component {

    constructor(props) {
        super(props)
        this.state = {

        }
    }

    componentDidMount() {
        var data = [];
        let titles = ["如何在5分钟内记住100个单词", "Moira带你边走边学", "金融职员必备英语", "美式英语与英式英语的区别"];
        let users = ['Micheal', 'Moira', 'Nahila', 'Ahmed'];
        let watchs = ['241', '2万', '3574', '4.6万'];
        for (var i = 1; i < 5; i++) {
            data.push({ 
                key: i - 1, 
                ima: "img_" + i, 
                title: titles[i - 1], 
                user: users[i - 1], 
                watch: watchs[i - 1] 
            });
        }
        this.list.setData(data)
    }

    render() {
        return (
            <View style={styles.View}>
                <RefreshInfiniteListView
                    style={styles.flatListStyle}
                    numColumns={2}
                    onScroll={()=>{
                        
                    }}
                    ref={this.listRef.bind(this)}
                    renderItem={this.renderRow.bind(this)}
                    onRefresh={this.onRefresh.bind(this)}
                    onEndReached={this.onInfinite.bind(this)}>
                </RefreshInfiniteListView>
            </View>
        );
    }
    renderRow(item) {
        let uer = require('../../../resources/images/TabBar/Community/SmallVideo/img_4.png');

        let uerIcon = require('../../../resources/images/TabBar/Community/SmallVideo/user_3.png');

        let addIcon = require('../../../resources/images/TabBar/Community/SmallVideo/follow.png');
        return (
            <TouchableHighlight
                underlayColor={"white"}
                onPress={this.onPress.bind(this)}>
                <View style={item.index / 2 == 0 ? styles.cellLeftStyle : styles.cellRightStyle}>
                    <ImageBackground source={uer} style={styles.ImageView}>
                        <ImageBackground source={require('../../../resources/images/TabBar/Community/SmallVideo/bg.png')} style={styles.bottomImage} >
                            <Text style={styles.titleStyle}>{item.title}</Text>
                            <View style={styles.bottomStyle}>
                                <View style={styles.bottomLeftStyle}>
                                    <View style={styles.headImage}>
                                        <Image source={uerIcon} style={styles.userIcon} />
                                        <Image source={addIcon} style={styles.followStyle} />
                                    </View>
                                    <Text style={styles.nameStyle}>{item.user}</Text>

                                </View>
                                <View style={styles.bottomRightStyle}>
                                    <Text style={styles.numberStyle}>{item.watch}</Text>
                                    <Image source={require('../../../resources/images/TabBar/Community/SmallVideo/view.png')} style={styles.watchStyle} />

                                </View>
                            </View>
                        </ImageBackground>
                    </ImageBackground>
                </View>
            </TouchableHighlight>
        )
    }
    listRef(node) {
        this.list = node;
    }
    onRefresh() {
        //下拉刷新
        this.list.setRefreshing(true);
        this.requestData(false)
    }
    onInfinite() {
        //上拉加载
        this.requestData(true)
    }
    requestData(isLoadMore) {
        this.list.setRefreshing(false);
        if (isLoadMore) {
            console.log("上啦中=======")
        } else {
            console.log("下啦中=======")
        }


    }
    onPress() {
        // this.hideTabBar()
      this.props.callSmallback();
    }
}
const styles = StyleSheet.create({
    flatListStyle: {
        width: ScreenDimensions.width,
        height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
    },
    View: {
        width: ScreenDimensions.width,
        height: ScreenDimensions.height,
        // marginTop: NavigationBarHeight.height ,
    },
    rowStyle: {
        width: ScreenDimensions.width / 2,
        height: 200,
    },
    ImageView: {
        width: ScreenDimensions.width / 2 - 3,
        height: clientHeight / 2 - 1,
        justifyContent: "flex-end"
    },
    cellLeftStyle: {
        width: ScreenDimensions.width / 2,
        paddingLeft: 2,
        paddingRight: 1,
        marginTop: 1,
        height: clientHeight / 2,
    },
    cellRightStyle: {
        width: ScreenDimensions.width / 2,
        paddingLeft: 1,
        paddingRight: 2,
        marginTop: 1,
        height: clientHeight / 2,
    },
    bottomImage: {
        width: "100%",
        height: 171 / 512 * clientHeight / 2,
        marginBottom: 0,
    },
    titleStyle: {
        marginHorizontal: 11,
        color: "#fff",
        fontSize: 15,
        flex: 1
    },
    bottomStyle: {
        justifyContent: "space-between",
        flexDirection: "row",
        flex: 1.5,
        marginBottom: 10
    },
    bottomLeftStyle: {
        flex: 1,
        alignItems: "flex-end",
        flexDirection: "row",
    },
    nameStyle: {
        fontSize: 14,
        color: "#ffffff",
        marginLeft: 5
    },
    headImage: {
        flexDirection: "row"
    },
    bottomRightStyle: {
        flex: 1,
        alignItems: "flex-end",
        flexDirection: "row",
        justifyContent: "flex-end"
    },
    userIcon: {
        width: 40,
        height: 40,
        marginLeft: 11,
    },
    followStyle: {
        width: 12,
        height: 12,
        marginTop: 30,
        marginLeft: -15
    },
    watchStyle: {
        width: 17,
        height: 11,
        marginBottom: 2,
        marginRight: 8,
        marginLeft: 2
    },
    numberStyle: {
        fontSize: 14,
        color: "#ffffff"
    }
})