import React,{Component} from 'react'
import {
  View,
  Text,
  Image,
  StyleSheet,
  FlatList,
  ActivityIndicator
} from 'react-native'

class Movie extends Component{
    state={
        arr:[
            'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
            'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
            'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg'    
        ],
        loading:false
    }
    _renderItem({item,index})
    {
        console.log(item);
        return(
            <View style={styles.item}>
                <Image source={{uri:item}} style={styles.image}/>
                <Text>电影名称</Text>
            </View>
        )
    }
    divider()
    {
        return (
            <View style={styles.divider}>

            </View>
        )
    }
    footer()
    {
        return (
            <ActivityIndicator size="large" color="#ccc" animating={this.state.loading}/>
        )
    }   
    loadMore()
    {
        this.setState({
            loading:true
        })
        this.setState({
            arr:this.state.arr.concat(this.state.arr)
        })
        this.setState({
            loading:false
        })
    }
    refresh()
    {
        this.setState({
            loading:true
        })
        this.setState({
            arr:[
                'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
                'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
                'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
                'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
                'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
                'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg'    
            ]
        })
        this.setState({
            loading:false
        })
    }
    emptyLoad()
    {
        return (
            <Text>数据稍后就来</Text>
        )
    }
    render()
    {
        return(
            <View>
                <FlatList
                    style={styles.wrap}
                    data={this.state.arr}
                    renderItem={this._renderItem.bind(this)}
                    numColumns={2}
                    keyExtractor={(item,index)=>item+index} 
                    columnWrapperStyle={{justifyContent:'space-around',marginBottom:20}}
                    ItemSeparatorComponent={this.divider}
                    ListFooterComponent={this.footer.bind(this)}
                    // 上拉加载
                    onEndReachedThreshold={0.2}
                    onEndReached={this.loadMore.bind(this)}
                    // 下拉刷新
                    refreshing={this.state.loading}
                    onRefresh={this.refresh.bind(this)}
                    // 列表为空时加载
                    ListEmptyComponent={this.emptyLoad}

                />
                
            </View>
        )
    }
}

const styles = StyleSheet.create({
    wrap:{
        paddingHorizontal:10,

    },
    item:{
        width:'47%',
        justifyContent:'center',
        alignItems:'center',
        
    },
    image:{
        height:200,
        width:'100%',
        marginBottom:10
    },
    divider:{
        width:'100%',
        height:2,
        backgroundColor:'#ccc',
        marginBottom:5
    }


})

export default Movie