xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    ScrollView,
    Text,
    TextInput,
    TouchableOpacity,
    InteractionManager,
    DeviceEventEmitter,
    ActivityIndicator,
    FlatList
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import moment from 'moment';
import {width,height,zoomW,zoomH} from '../utils/getSize';
import {xnToast} from '../utils/utils';
import AppService from '../service/AppService'
const back = require('../img/returnB.png');
const search = require('../img/search.png');
const allDel = require('../img/allDel.png');
const bread = require('../img/bread.png');
const avatar = require('../img/avatar.png');
const addTarget = require('../img/addTarget.png');
const withdraw = require('../img/withdraw.png');


export default class Home extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title: "公告通知",
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}}>
            <TouchableOpacity style={styles.topIcon} >
                <Image source={back} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
            </TouchableOpacity>
        </View>),
        headerRight:(
            <View style={{display:'flex',flexDirection:'row',paddingRight:(5/zoomW)}}>
                <TouchableOpacity style={styles.topIcon} onPress = {navigation.state.params?navigation.state.params.addNotice:null} >
                    <Image source={addTarget} style={{width:(26/zoomH),height:(26/zoomH)}} resizeMode="contain" />
                </TouchableOpacity>
            </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            AnnounceList:[],
            ownCount:0,
            loading:false,
            loadMore:false
        };
    }

    componentDidMount(){
        this.props.navigation.setParams({
            addNotice:() => {
                InteractionManager.runAfterInteractions(() => {this.props.navigation.navigate('AddNotice');})
            }
        });

        this.addList(true);
        this.getOwnCount();

        let _this = this;
        this.reloadHomeList = DeviceEventEmitter.addListener('reloadHomeList',function(){
            _this.addList(true);
        });
    };

    componentWillUnmount(){
        if(this.reloadHomeList){
            this.reloadHomeList.remove();
        }
        this.setState = (state,callback)=>{
            return;
        };
    }


    /*获取列表*/
    addList(isRefresh) {
        if (global.isConnected) {

            if (isRefresh){
                this.state = {
                    AnnounceList:[],
                    loading: true
                }
               this.getOwnCount();

            }
            let length = 0;
            length = this.state.AnnounceList ? this.state.AnnounceList.length : this.props.AnnounceList.length;
            let params = {
                userId: global.userId,
                pageSize:10,
                pageNumber:length/10+1,
            };
            if (length % 10 == 0 && !this.state.loadMore) {
                this.setState({
                    loadMore: true,
                });
                AppService.findAnnouncement(params).then((data) => {
                    console.log(data);
                    this.setState({
                        loading: false,
                        loadMore: false,
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        if (length + data.result.length > data.totalCount) {
                            return;
                        }
                        this.setState({
                            AnnounceList:this.state.AnnounceList.concat(data.result),
                        })
                    }
                }).catch((error) => {
                    this.setState({
                        loading: false
                    });
                    xnToast(error)
                })
            }
        }else {
            xnToast('暂无网络连接，请稍后重试！')
        }
    };

    /*获取我发布的通知的数据*/
    getOwnCount(){
        this.setState({
            ownCount:0
        });
        if(global.isConnected){
            let params = {
                ownerUserId : global.userId,
            };
            AppService.getOwnCount(params).then((data) => {
                console.log(data);
                if(data.message){
                    xnToast(data.message);
                    return;
                }
                if(data.errors.length > 0){
                    xnToast(data.errors[0].message);
                }else{
                    this.setState({
                        ownCount:data.count
                    })
                }
            }).catch((error) => {
                xnToast(error)
            })
        }else{
            xnToast('暂无网络连接，请稍后重试！')
        }
    };

   
    /*我发布的通知*/
    _toMyPublish (){
        this.props.navigation.navigate('MyPublish');

    };
    //公告详情
    _toDetail (id){
        this.props.navigation.navigate('NotificationDetail',{"id":id});

    };

   //列表的头部
    ListHeaderComponent() {
        return (
            <View>
                <TouchableOpacity activeOpacity={1} style = {styles.myPublish}  onPress = {()=>this._toMyPublish()}>
                    <Text style = {{fontSize:17,color:'#000000'}}>我发布的通知</Text>
                    <View style = {{alignItems :'center',display:'flex',flexDirection:'row'}}>
                        <Text style = {{fontSize: 17,color:'#666666',marginRight:(5/zoomW)}}>{this.state.ownCount}</Text>
                        <Image source = {bread} style={{width:(13/zoomH),height:(13/zoomH)}} resizeMode="contain"/>
                    </View>
                </TouchableOpacity>
                <View style={{backgroundColor:'#ECECF1',height:(28/zoomH),width:'100%',justifyContent:'center'}}>
                    <Text style = {{paddingLeft:(15/zoomW),textAlign:'left',fontSize :12,color:'#999999',backgroundColor:'#ECECF1'}}>全部通知</Text>
                </View>
            </View>
        )
    }
    //渲染item
    keyExtractor = (item,index) => index;
    renderItem({item,index}){
        return(
            <TouchableOpacity key = {index} activeOpacity={0.8} style={styles.listItem} onPress = {()=>{this._toDetail(item.id)}}>
                <View style = {{flex:1,flexDirection:'row',display:'flex',alignItems:'center',width:'100%'}}>
                    <Image source={item.avatarUrl? {uri:item.avatarUrl+'?x-oss-process=image/resize,w_500'}:avatar} style={{width:(52/zoomH),height:(52/zoomH),borderRadius:(26/zoomH)}} resizeMode="contain" />
                    <View style = {{flex:1,paddingLeft:(10/zoomW)}} >
                        <Text style = {{fontSize:18,color:'#000000'}}>{item.title}</Text>
                        <View style = {{flex:1,display:'flex',flexDirection:'row',justifyContent:'space-between'}}>
                            <Text style = {{fontSize :12,color:'#999999'}}numberOfLines={1}>{item.ownerUserName} {item.announcementTime?moment(Number(item.announcementTime)).format('YYYY-MM-DD HH:mm'):"--"}</Text>
                            {!item.isAllConfirm  && <Text style ={{fontSize :12,color:item.isRevoke?'#999999':'#00BE3C'}}>{item.unConfirmUserCount?item.unConfirmUserCount:0}人未确认 </Text>}
                        </View>
                    </View>
                </View>
                 <View style = {{flex:1}}>
                    <Text style = {{fontSize :14,color:'#666666',marginLeft :(62/zoomH),paddingTop:(17/zoomH), minHeight:70/zoomH}} numberOfLines={3} >{item.content}</Text>
                     {item.isRevoke &&  <Image source={withdraw} style={{width:(70/zoomH),height:(70/zoomH),borderRadius:(26/zoomH),position:'absolute',right:10,alignItems:'center'}} resizeMode="contain" />}
                </View>

            </TouchableOpacity>
        );
    }

    render(){
        return(
            <View style={styles.background}>
                <View style={{flex:1,width:'100%',backgroundColor:'#ffffff'}}>
                    <View style = {{width:'100%',backgroundColor:'#ffffff',alignItems:'center'}}>
                        <View style={styles.searchBox}>
                            <Image source={search} style={{width:(13/zoomH),height:(13/zoomH)}} resizeMode="contain" />
                            <TextInput returnKeyType="search" placeholder='搜索' placeholderTextColor='#8e8e93' style={styles.searchText}
                                       underlineColorAndroid="transparent" clearButtonMode="while-editing"/>
                            <TouchableOpacity style={{height:'100%',position:'absolute',right:0,display:'flex',justifyContent:'center'}}>
                                <Image source={allDel} style={{width:(16/zoomH),height:(48/zoomH),marginLeft:(10/zoomW),marginRight:(10/zoomW)}} resizeMode="center" />
                            </TouchableOpacity>
                        </View>
                    </View>

                    {this.state.AnnounceList && <FlatList  style = {{flex:1,display:'flex',backgroundColor:'#f2f2f2'}}
                                                           onEndReachedThreshold={0.1}
                                                           onEndReached={() => this.addList(false)}
                                                           onRefresh={() => {this.addList(true)}}
                                                           refreshing={false}
                                                           ListHeaderComponent={this.ListHeaderComponent.bind(this)}
                                                           keyExtractor={this.keyExtractor}
                                                           data={this.state.AnnounceList.length == 0 ? this.state.AnnounceList:this.state.AnnounceList}
                                                           renderItem={this.renderItem}/>}
                </View>
                {this.state.AnnounceList.length>10 && this.state.loadMore && <ActivityIndicator />}
                {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>}

            </View>
        );
    }


}

const styles = StyleSheet.create({
   topIcon:{
     paddingLeft:(10/zoomW),
                paddingRight:(10/zoomW),
                height:'100%',
                display:'flex',
                alignItems:'center'
    },

    background:{
        flex:1,
        backgroundColor:'#ececf1',
        display:'flex',
        alignItems:'center'
    },
    itemBackground:{
        flex:1,
        backgroundColor:'#ffffff',
        display:'flex',
        alignItems:'center'
    },

    targetItem:{
        flex:1,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        borderStyle:'solid',
        borderBottomColor:'#eee',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        paddingTop:(10/zoomH),
        paddingBottom:(10/zoomH),
        backgroundColor:'#fff'
    },
    searchBox:{
        width:(345/zoomW),
        height:(34/zoomH),
        backgroundColor:'#eeeff3',
        borderRadius:3,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:(12.5/zoomW),
        paddingRight:(12.5/zoomW),
        marginBottom:(12.5/zoomW)
    },
    searchText:{
        flex:1,
        fontSize:14,
        color:'#000',
        padding:0,
        paddingLeft:(8/zoomW)
    },
    myPublish:{
        width :'100%',
        backgroundColor:'#ffffff',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        paddingTop:(6.5/zoomW),
        paddingBottom:(19/zoomW),
        justifyContent:'space-between',
        flex :1,
        display:'flex',
        flexDirection: 'row'
    },

    listItem:{
       flex:1,
       display:'flex',
       borderStyle:'solid',
       backgroundColor:'#ffffff',
       borderBottomColor:'#eee',
       borderBottomWidth:StyleSheet.hairlineWidth,
       paddingTop:(10/zoomH),
       paddingLeft:(15/zoomW),
       paddingRight:(15/zoomW),
       paddingBottom:(10/zoomH)
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
    loadingBox:{
        width:(100/zoomW),
        height:(120/zoomH),
        backgroundColor:'rgba(0,0,0,.5)',
        borderRadius:8,
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
})