customer / shanghai-railway-rnapp

import React, {Component} from 'react';
import {ActivityIndicator, DeviceEventEmitter,FlatList, StyleSheet, Text, View} from 'react-native';
import {zoomH, zoomW} from '../../../utils/getSize';
import ItemImageText from '../../component/ItemImageText';
import ItemCourse from '../../component/ItemCourse';
import AtlasItem from '../../atlas/AtlasItem';
import QuestionHomeListItem from "../../questions/QuestionHomeListItem";
import AppService from "../../../service/AppService";
import {xnToast} from "../../../utils/utils";
const  pageSize = 20;
export default class Collection extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        header: null
    });
    constructor(props) {
        super(props);
        this.state = {
            index: 1,
            data: [],
            loading: true,
            isAll: false,
        }
    }

    componentWillMount() {
        let _this = this;
        this.refreshCollectList = DeviceEventEmitter.addListener(
            "refreshCollectList",
            function() {
                _this.setState({
                    data:[],
                },function () {
                    _this.getCollectThread();
                });

            }
        );


        this.getCollectThread();
    }

    getCollectThread () {
        const _this = this;
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        let params = {
            forumId: global.forumId,
            collectUserId: global.userId,
            sourceFrom:'APP',
            isActive: true,
            pageSize: pageSize,
            pageNumber: 1
            // isForward: false,
        };
        AppService.queryCollect(params).then((data) => {
            console.log(params);
            console.log(data);

            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                console.log(data.result);
                this.setState({
                    data:data.result,
                    loading: false
                }, () => {
                    if (_this.state.data.length == Number(data.totalCount)) {
                        _this.setState({
                            isAll: true
                        });
                    }
                })
            }
        }).catch((error) => {
            console.log(error);
        });;
    };

    goCollection = () => {
        this.setState({
            index: 1
        })
    };

    goHistory = () => {
        this.setState({
            index: 2
        })
    };

    // 加载更多
    loadMore =()=> {
        const _this = this;
        var length = this.state.data.length;
        console.log(length)
        if (length < pageSize) {
            return;
        } else {
            let params = {
                forumId: global.forumId,
                collectUserId: global.userId,
                isActive: true,
                sourceFrom:'APP',
                pageSize: pageSize,
                pageNumber: length / pageSize + 1
            };
            AppService.queryCollect(params).then((data) => {
                console.log(params)
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    console.log(data.result);
                    _this.setState({
                        data: _this.state.data.concat(data.result),
                        loading: false
                    }, ()=> {
                        if (_this.state.data.length == Number(data.totalCount)) {
                            _this.setState({
                                isAll: true
                            });
                        }
                    })
                }
            }).catch((error) => {
                console.log(error);
            });;
        }
    };

    // 列表底部
    _footer = () => <View style={styles.footerWrap}>
        <View style={[styles.line, {marginRight: 40 / zoomW}]}/>
        <Text style={{fontSize: 14, color: '#A4A9B0', textAlign: 'center'}}>没有数据了</Text>
        <View style={[styles.line, {marginLeft: 40 / zoomW}]}/>
    </View>

    keyExtractor = (item, index) => index;

    renderCollectionItem({item,index}) {
        if(item.thread ==undefined){
            return <View></View>
        }
        //帖子类型
        switch (item.thread.threadType){
            case 0://图文
                return(<ItemImageText  itemList = {item.thread}  nav = {this.props.navigation} showType = {true}/>);
                break;
            case 1://图集
                return(<AtlasItem item={item.thread} nav = {this.props.navigation} showType = {true}/>);
                break;
            case 2://视频
                return(<ItemImageText  itemList = {item.thread}  nav = {this.props.navigation} isVideo={true} showType = {true}/>);
                break;
            case 3: //提问
                return <QuestionHomeListItem item={item.thread} nav={this.props.navigation} showType = {true}/>;
                break;
            case 4: //文章
                return <ItemImageText itemList={item.thread} nav={this.props.navigation} showType = {true} />;
                break;
            case 5: //课程
                return <ItemCourse item={item.thread} nav={this.props.navigation} showType = {true} />;
                break;
            default:
                //其他
                return <ItemImageText itemList={item.thread} nav={this.props.navigation} showType = {true}/>;
                break;
        }
    }


    render() {
        return(
            <View style={styles.background}>
                {this.state.loading ?
                    <View style={styles.loadingBg}>
                        <View style={styles.loadingBox}>
                            <ActivityIndicator size="large" color="#fff" />
                            <Text
                                style={{ fontSize: 16, color: "#fff", marginTop: 6 / zoomH }}
                            >
                                加载中...
                            </Text>
                        </View>
                    </View> :
                    <FlatList
                        data={this.state.data}
                        renderItem={this.renderCollectionItem.bind(this)}
                        onEndReachedThreshold={0.01}
                        onEndReached={this.loadMore.bind(this)}
                        keyExtractor={this.keyExtractor}
                        ListFooterComponent={(this.state.data.length > 0 && this.state.isAll) ? this._footer : null}
                    />
                }

            </View>
        )
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#f0f4f3',
        display:'flex',
    },
    tab: {
        display:'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: '#fff'
    },
    tabContent: {
        fontSize: 16,
        paddingTop: 12 / zoomH,
        paddingBottom: 12 / zoomH,
    },
    active: {
        color: '#F04134',
        borderBottomWidth: 2,
        borderColor: '#F04134',
        borderStyle:'solid',
    },
    collectContainer: {
        marginTop: 8 / zoomH,
        backgroundColor: '#fff',
        paddingTop: 10 / zoomH,
        paddingBottom: 10 / zoomH,
    },
    headIcon: {
        display:'flex',
        flexDirection: 'row',
        marginLeft: 15 / zoomW,
    },
    headIconImage: {
        width: 36 / zoomH,
        height: 36 / zoomW,
        marginRight: 8 / zoomW,
        backgroundColor: '#ccc'
    },
    collectContent: {
        backgroundColor:'#f0f4f3',
        marginTop: 10 / zoomH,
        marginLeft: 15 / zoomW,
        marginRight: 15 / zoomW,
        paddingTop: 5 / zoomH,
        paddingLeft: 10 / zoomW,
        paddingBottom: 10 / zoomH,
    },
    collectImage: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    loadingBg: {
        position: "absolute",
        top: 0,
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    },
    loadingBox: {
        width: 100 / zoomW,
        height: 120 / zoomH,
        backgroundColor: "rgba(0,0,0,.5)",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
    }
});