xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    InteractionManager,
    DeviceEventEmitter
} from 'react-native';

import {zoomW,zoomH} from '../../utils/getSize';

const back = require('../../img/returnB.png');
const circleAdd = require('../../img/circleAdd.png');
const circleDel = require('../../img/circleDel.png');
const avatar = require('../../img/avatar.png');
const remove = require('../../img/remove.png');

export default class AddPeople extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title:'添加执行人',
        headerLeft:(<View style={{flex:1,display:'flex',flexDirection:'row'}}>
            <TouchableOpacity style={styles.topIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
                <Image source={back} style={{width:(16/zoomH),height:(16/zoomH)}} resizeMode="contain" />
            </TouchableOpacity>
        </View>),
        headerRight:(<View style={{flex:1,display:'flex',flexDirection:'row'}}>
            {navigation.state.params && <TouchableOpacity activeOpacity={navigation.state.params.opacity} style={styles.topIcon} onPress={navigation.state.params?navigation.state.params.finish:null}>
                <Text style={{fontSize:16,color:navigation.state.params.color}}>完成</Text>
            </TouchableOpacity>}
        </View>)
    });

    constructor(props){
        super(props);
        this.state = {
            canAdd:false
        };
    };

    componentWillMount(){
        this.setState({
            doEmployee:global.doEmployee,
            ccEmployee:global.ccEmployee
        });
        if((this.props.navigation.state.params.from == 'doEmployee' && global.doEmployee.length == 0) || (this.props.navigation.state.params.from == 'ccEmployee' && global.ccEmployee.length == 0)){
            this.props.navigation.setParams({
                color:'rgba(0,190,60,.5)',
                opacity:1
            });
            this.setState({
                canAdd:false
            })
        }else{
            this.props.navigation.setParams({
                color:'rgba(0,190,60,1)',
                opacity:0.8
            });
            this.setState({
                canAdd:true
            })
        }
    }

    componentDidMount(){
        this.props.navigation.setParams({
            back:()=>{
                InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
            },
            finish:()=>{
                if(!this.state.canAdd){
                    return;
                }
                global.doEmployee = this.state.doEmployee;
                global.ccEmployee = this.state.ccEmployee;
                InteractionManager.runAfterInteractions(() => {
                    DeviceEventEmitter.emit('reloaAddEmployee');
                    this.props.navigation.goBack();
                })
            }
        });
        let _this = this;
        this.reloaEmployee = DeviceEventEmitter.addListener('reloaEmployee',function(){
            _this.setState({
                doEmployee:global.doEmployee,
                ccEmployee:global.ccEmployee
            });
            if((_this.props.navigation.state.params.from == 'doEmployee' && global.doEmployee.length !=0) || (_this.props.navigation.state.params.from == 'ccEmployee' && global.ccEmployee.length !=0)){
                _this.props.navigation.setParams({
                    color:'rgba(0,190,60,1)',
                    opacity:0.8
                });
                _this.setState({
                    canAdd:true
                })
            }
        });
    };
    /*渲染人员*/
    renderPeople(item,index){
        return(
            <View key={index} style={styles.avatarBox}>
                <View style={styles.avatarPic}>
                    <Image source={item.avatar?{uri:item.avatar+'?x-oss-process=image/resize,w_500'}:avatar} style={{width:(50/zoomH),height:(50/zoomH),borderRadius:(25/zoomH)}} resizeMode="cover" />
                    <TouchableOpacity activeOpacity={0.8} style={{paddingLeft:(10/zoomH),paddingBottom:(10/zoomH),position:'absolute',top:0,right:0}} onPress={() => this.delPerson(index)}>
                        <Image source={remove} style={{width:(18/zoomH),height:(18/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                </View>
                <Text style={{fontSize:12,color:'#666',marginTop:(6/zoomH)}}>{item.name}</Text>
            </View>
        )
    };
    /*删除人员*/
    delPerson(index){
        if(this.props.navigation.state.params.from == 'doEmployee'){
            let doEmployee = JSON.parse(JSON.stringify(global.doEmployee));
            doEmployee.splice(index,1);
            this.setState({
                doEmployee:doEmployee
            });
            if(doEmployee.length == 0){
                this.props.navigation.setParams({
                    color:'rgba(0,190,60,.5)',
                    opacity:1
                });
                this.setState({
                    canAdd:false
                })
            }else{
                this.props.navigation.setParams({
                    color:'rgba(0,190,60,1)',
                    opacity:0.8
                });
                this.setState({
                    canAdd:true
                })
            }
        }else if(this.props.navigation.state.params.from == 'ccEmployee'){
            let ccEmployee = JSON.parse(JSON.stringify(global.ccEmployee));
            ccEmployee.splice(index,1);
            this.setState({
                ccEmployee:ccEmployee
            });
            if(ccEmployee.length == 0){
                this.props.navigation.setParams({
                    color:'rgba(0,190,60,.5)',
                    opacity:1
                });
                this.setState({
                    canAdd:false
                })
            }else{
                this.props.navigation.setParams({
                    color:'rgba(0,190,60,1)',
                    opacity:0.8
                });
                this.setState({
                    canAdd:true
                })
            }
        }
    };

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

    render(){
        return(
            <View style={styles.background}>
                <View style={styles.addContent}>
                    <Text style={{fontSize:17,color:'#333',paddingTop:(15/zoomW),paddingLeft:(10/zoomW)}}>执行人</Text>
                    <View style={styles.addItem}>
                        <TouchableOpacity style={styles.avatarBox} activeOpacity={0.8} onPress={() => InteractionManager.runAfterInteractions(() => {this.props.navigation.navigate('AddEmployee',{from:this.props.navigation.state.params.from});})}>
                            <Image source={circleAdd} style={{width:(50/zoomH),height:(50/zoomH)}} resizeMode="contain" />
                        </TouchableOpacity>
                        {/*<TouchableOpacity style={styles.avatarBox} activeOpacity={0.8}>*/}
                            {/*<Image source={circleDel} style={{width:(50/zoomH),height:(50/zoomH)}} resizeMode="contain" />*/}
                        {/*</TouchableOpacity>*/}
                        {!!this.state.doEmployee && this.props.navigation.state.params.from == 'doEmployee' && this.state.doEmployee.map((item,index) => this.renderPeople(item,index))}
                        {!!this.state.ccEmployee && this.props.navigation.state.params.from == 'ccEmployee' && this.state.ccEmployee.map((item,index) => this.renderPeople(item,index))}
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topIcon:{
        paddingLeft:(10/zoomW),
        paddingRight:(10/zoomW),
        height:'100%',
        display:'flex',
        justifyContent:'center'
    },
    background:{
        flex:1,
        backgroundColor:'#ececf1',
        display:'flex',
        alignItems:'center'
    },
    addContent:{
        width:'100%',
        backgroundColor:'#fff',
        marginTop:(30/zoomH),
        padding:(5/zoomW)
    },
    addItem:{
        width:'100%',
        display:'flex',
        flexDirection:'row',
        flexWrap:'wrap'
    },
    avatarBox:{
        width:(50/zoomH),
        margin:(10/zoomW),
        borderRadius:4,
        display:'flex',
        alignItems:'center',
        paddingTop:(8/zoomH)
    },
    avatarPic:{
        width:(50/zoomH),
        height:(50/zoomH),
        borderRadius:(25/zoomH),
        borderWidth:StyleSheet.hairlineWidth,
        borderColor:'#ddd',
        borderStyle:'solid'
    }
});