customer / shanghai-railway-rnapp

/**
 * Created by tdzl2003 on 12/18/16.
 */
import React, {Component, PropTypes} from "react";
import {
    Dimensions,
    Image,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Platform,
    FlatList,
    BackHandler,
    ActivityIndicator,
    StatusBar
} from "react-native";
import Toast from 'react-native-root-toast';
import {zoomW,zoomH} from '../../utils/getSize';
import {timeChange} from '../../utils/utils';
const noResult = require('../../img/noResult.png');
const submitLog = require('../../img/submitLog.png');
import AppService from '../../service/AppService';
function isIphoneX() {
    let dimen = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (dimen.height === 812 || dimen.width === 812)
    );
}


var options = {
    title: '选择头像',
    storageOptions: {
        skipBackup: true,
        path: 'images',

        waitUntilSaved:true
    },
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'选择相册',
    quality:1,
    noData:true,
    maxWidth: 200,
    maxHeight: 200

};

export default class myMessage extends Component {
    static navigationOptions = ({navigation}) => ({
        headerTitle:'我的消息',
        headerLeft:(
            <TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack()}>
                <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
            </TouchableOpacity>
        ),
        headerRight:(
            <View></View>
        )
    });



    constructor(props){
        super(props);
        this.state = {
            loadMore:false,
            isLoading: false,
            isAll: false,
            loading:false,
            list:[],
            totalCount:0
        };
    }

    /*页面初始化*/
    componentWillMount(){
        // let message = {
        //     messageTitle:"1111",
        //     messageContent:"dfdsfasfasfas"
        // }
        // let messageList=[];
        // messageList.push(message);
        // this.setState({
        //     list: messageList,
        //     totalCount:1
        // });
        this.search();
    };

    componentWillUnmount(){

    }

    componentDidMount(){

    }

    //搜索
    search() {
        // console.warn("===========");
        this.setState({
            isLoading: false,
            isAll: false
        }, () => {
            let _this = this;
            _this.setState({
                isLoading: true,
                loading:true,
            }, () => {
                // let params = {pageSize:10};
                 // console.warn(params, 'params');
                AppService.getUnreadMessageList({pageSize:0}).then((data) => {
                   /* if (data.message) {
                        Toast.show(data.message);
                        return;
                    }*/
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        Toast.show(data.errors[0].message);
                    } else {
                        for(var i=0;i<data.messageList.length;i++){
                            if(data.messageList[i].businessType == 'POST'){
                                data.messageList[i].businessType ='回复';
                            }else if(data.messageList[i].businessType == 'COMMENT'){
                                data.messageList[i].businessType ='评论';
                            }else if(data.messageList[i].businessType == 'EVENT') {
                                data.messageList[i].businessType = '事件上报';
                            }
                            data.messageList[i].time =timeChange(Date.parse(new Date(data.messageList[i].messageTime)));
                        }
                        this.setState({
                            list:data.messageList,
                            totalCount:data.messageList.length
                        });
                    }
                    _this.setState({
                        loading:false,
                        isLoading: false,
                    });
                });
            });

        });
    }

    // 加载更多
    addList() {
        let _this = this;
        let params = {};
        /*if (_this.state.isAll) {
            return;
        }
        if (_this.state.isLoading) {
            return;
        }
        const length = this.state.list.length;
        if (length % 10 === 0 && !this.state.isLoading) {
            _this.setState({
                isLoading: true,
                loading:true,
            }, () => {
                AppService.getUnreadMessageList(params).then((data) => {
                    if (data.message) {
                        Toast.show(data.message);
                        return;
                    }
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        Toast.show(data.errors[0].message);
                    } else {
                        if (data.result.length === 0) {
                            _this.setState({
                                isAll: true,
                            });
                        } else {
                            _this.setState({
                                list: _this.state.list.concat(data.result),
                            });
                        }
                        _this.setState({
                            loading:false,
                            isLoading: false,
                        });
                    }
                });
            });
        }*/
    }
    //已读
    read(id) {
        // console.log(params, 'params');
        let params = {
            ids:[]
        };
        params.ids.push(id);
        AppService.readMessage(params).then((data) => {
            if (data.message) {
                Toast.show(data.message);
                return;
            }
            if (!!data.errors === true && !!data.errors.length > 0) {
                Toast.show(data.errors[0].message);
            } else {
                console.log(data.result);
                Toast.show("消息已读");
            }
        });
    }

    /* 渲染列表*/
    keyExtractor = (item, index) => index;
    renderItem({ item, index }) {
        return (
            <View style={[styles.row,{marginTop:10},{borderBottomWidth:1}]}  key={index}
                              onPress={()=>{}}>
                <View style={[styles.tableLine]}>
                    <Image source={submitLog} resizeMode="contain" style={styles.submitLogIcon} />
                    <Text style={styles.time}>{item.businessType}  {item.time}</Text>
                </View>
                <View style={[styles.tableLine]}>
                    <Text style={styles.title}>{item.messageTitle}</Text>
                </View>
                <View style={[styles.tableLine]}>
                    <Text style={styles.text}>{item.messageContent}</Text>
                </View>

                {/*<Image style={styles.icon} source={require('../../img/arrow_right.png')} resizeMode={'contain'}/>*/}
            </View>
        );
    }
    render(){
        return(
            <View style={styles.bg}>
                <StatusBar barStyle={'default'}/>
                {this.state.totalCount !=0 &&
                <FlatList
                    onEndReachedThreshold={0.05}
                    onEndReached={this.addList.bind(this)}
                    data={this.state.list}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={this.keyExtractor}
                />}
                {this.state.totalCount ==0 && <View style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
                    <Image source={noResult} resizeMode="contain" style={styles.noResult} />
                    <Text style={{fontSize:16,color:'#b2b2b2'}}>暂无数据~</Text>
                </View>}
                {this.state.loadMore && <ActivityIndicator />}
                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}
            </View>
        )
    }
}
const styles = StyleSheet.create({
    backWrap: {
        justifyContent: 'center',
        paddingLeft: 18.5/zoomW,
        paddingRight: 18.5/zoomW,
        height: 44/zoomH,
    },
    back: {
        width: 8.5/zoomW,
        height: 15/zoomH,
    },
    bg:{
        flex:1,
        backgroundColor:'#f6f6f6',
    },
    row:{
        height:128/zoomH,
        flexDirection:'column',
        paddingHorizontal:15/zoomW,
        // alignItems:'center',
        borderBottomColor:'#dddddd',
        backgroundColor:'white',
        justifyContent: 'center',
    },
    title:{
        fontSize:16,
        color:'#4b4b4b',
        flex:1,
        marginLeft:37/zoomW
    },
    text:{
        color:'#A9A9A9',
        fontSize:14,
        marginLeft:37/zoomW
    },
    time:{
        color:'#A9A9A9',
        fontSize:14,
        marginLeft:10/zoomW
    },
    img:{
        width:31/zoomW,
        height:31/zoomW,

    },
    noResult: {
        width: (300 / zoomW),
        height: (138 / zoomH),
        marginTop: (150 / zoomH),
        marginBottom: (30 / zoomH),
    },
    tableLine:{
        marginTop: (2 / zoomH),
        flexDirection:'row',
    },
    submitLogIcon:{
        // backgroundColor: "#3E6DB7",
        width: (27 / zoomW),
        height: (20 / zoomH),
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
});