let cachedResults = {
   nextPage: 1,
   items: [],
   total: 0
}

export default class VideoLists extends Component<{}> {
   constructor(props) {
       super(props)
       this.state = {
           dataSource: [],
           isLoadingTail: false
       }
   }

   componentDidMount() {
       this._fetchData(1)
   }

   _fetchData(page) {
       this.setState({
           isLoadingTail: true
       })
       request.get(config.api.base + config.api.creations, {
           accessToken: 'aa',
           page: page
       })
           .then((data) => {
               if (data.success) {
                   let items = cachedResults.items.slice();

                   items = items.concat(data.data)

                   cachedResults.items=items
                   cachedResults.total=data.total

                   setTimeout(() => {
                       console.log('compelete')
                       console.log(cachedResults.items)
                       this.setState({
                           isLoadingTail:false,
                           dataSource: cachedResults.items
                       })
                   }, 2000)
               }
           })
           .catch((error) => {
               console.warn(error)
           })
   }

   _renderItem = ({item}) => (
       <TouchableHighlight>
           <View style={styles.item}>
               <Text style={styles.title}>{item.title}</Text>
               <Image
                   source={{uri: item.thumb}}
                   style={styles.thumb}
               >
                   <Icon
                       name='ios-play'
                       size={28}
                       style={styles.play}
                   />
               </Image>
               <View style={styles.itemFooter}>
                   <View style={styles.handleBox}>
                       <Icon
                           name='ios-heart-empty'
                           size={28}
                           style={styles.up}
                       />
                       <Text style={styles.handleText}>喜欢</Text>
                   </View>
                   <View style={styles.handleBox}>
                       <Icon
                           name='ios-star-outline'
                           size={28}
                           style={styles.commentIcon}
                       />
                       <Text style={styles.handleText}>评论</Text>
                   </View>

               </View>
           </View>
       </TouchableHighlight>

   )

   _hasMore(){
       return cachedResults.items.length !== cachedResults.total
   }

   _fetchMoreData() {
       if (!this._hasMore() || this.state.isLoadingTail) {
           return
       }
       console.log('more')
       let page = cachedResults.nextPage
       this._fetchData(page)
   }
   _listFooter() {
       if(!this._hasMore() && cachedResults.total !== 0){
           return <View style={styles.loadingMore}><Text style={styles.loadingText}>没有更多数据了</Text></View>
       }
       return   <View><ActivityIndicator size="large" color="#0000ff" /></View>
   }

   render() {
       return (
           <View style={styles.container}>
               <View style={styles.header}>
                   <Text style={styles.headerTitle}>列表页面</Text>
               </View>
               <FlatList
                   data={this.state.dataSource}
                   renderItem={this._renderItem}
                   keyExtractor={(item, index) => String(index)}
                   onEndReached={this._fetchMoreData.bind(this)}
                   onEndReachedThreshold={30}
                   ListFooterComponent={this._listFooter.bind(this)}
               />
           </View>


       );
   }
}