xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, {Component} from "react";
import {StyleSheet, View, Text, TouchableOpacity, Image, TextInput, DeviceEventEmitter, ScrollView} from "react-native";
import {zoomW, zoomH} from "../../utils/getSize";
import {NoDoublePress} from "../../utils/utils";

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: navigation.state.params ? navigation.state.params.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 style={styles.topIcon}
                              onPress={navigation.state.params ? navigation.state.params.finish : null}>
                <Text style={{fontSize: 16, color: 'rgba(0,190,60,1)'}}>完成</Text>
            </TouchableOpacity>}
        </View>)
    });

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

    componentWillMount() {
        this.from = this.props.navigation.state.params.from;
        this.target = this.props.navigation.state.params.target ? this.props.navigation.state.params.target : null;
        if (this.target) {
            this.setState({
                doEmployee: global.linkDoEmployee,
                ccEmployee: global.linkCcEmployee
            });
            if ((this.from == 'doEmployee' && global.linkDoEmployee.length == 0) || (this.from == 'ccEmployee' && global.linkCcEmployee.length == 0)) {
                this.props.navigation.setParams({
                    color: 'rgba(0,190,60,.2)',
                    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 {
            this.setState({
                doEmployee: global.doEmployee,
                ccEmployee: global.ccEmployee
            });
            if ((this.from == 'doEmployee' && global.doEmployee.length == 0) || (this.from == 'ccEmployee' && global.ccEmployee.length == 0)) {
                this.props.navigation.setParams({
                    color: 'rgba(0,190,60,.2)',
                    opacity: 1
                });
                this.setState({
                    canAdd: false
                })
            } else {
                this.props.navigation.setParams({
                    color: 'rgba(0,190,60,1)',
                    opacity: 0.8
                });
                this.setState({
                    canAdd: true
                })
            }
        }
        if (this.from == 'doEmployee') {
            this.props.navigation.setParams({
                title: '添加执行人'
            });
        }
        if (this.from == 'ccEmployee') {
            this.props.navigation.setParams({
                title: '添加抄送人'
            });
        }
    }

    componentDidMount() {
        this.props.navigation.setParams({
            back: () => {
                NoDoublePress.onPress(() => {
                    this.props.navigation.goBack();
                });
            },
            finish: () => {
                if (this.target) {
                    global.linkDoEmployee = this.state.doEmployee;
                    global.linkCcEmployee = this.state.ccEmployee;
                } else {
                    global.doEmployee = this.state.doEmployee;
                    global.ccEmployee = this.state.ccEmployee;
                }
                NoDoublePress.onPress(() => {
                    DeviceEventEmitter.emit('reloaAddEmployee');
                    this.props.navigation.goBack();
                })
            }
        });
        let _this = this;
        this.reloaEmployee = DeviceEventEmitter.addListener('reloaEmployee', function () {
            _this.setState({
                doEmployee: global.readyDoEmployee,
                ccEmployee: global.readyCcEmployee
            });
        });
    };

    /*渲染人员*/
    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={() => NoDoublePress.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.userName}</Text>
            </View>
        )
    };

    /*跳转到通讯录*/
    toPeopleList(){
        NoDoublePress.onPress(() => this.props.navigation.navigate('AddEmployee', {
            from: this.from,
            target: this.target ? this.target : null ,
            selectDoEmployee : this.state.doEmployee,
            selectCcEmployee : this.state.ccEmployee
        }))
    }

    /*删除人员*/
    delPerson(index) {
        if (this.from == 'doEmployee') {
            let doEmployee = [];
            if(this.state.doEmployee.length == 0){
                doEmployee = this.target ? JSON.parse(JSON.stringify(global.linkDoEmployee)) : JSON.parse(JSON.stringify(global.doEmployee));
            }else{
                doEmployee = JSON.parse(JSON.stringify(this.state.doEmployee))
            }
            doEmployee.splice(index, 1);
            this.setState({
                doEmployee: doEmployee
            });
        } else if (this.from == 'ccEmployee') {
            let ccEmployee = [];
            if(this.state.ccEmployee.length == 0){
                ccEmployee = this.target ? JSON.parse(JSON.stringify(global.linkCcEmployee)) : JSON.parse(JSON.stringify(global.ccEmployee));
            }else{
                ccEmployee = JSON.parse(JSON.stringify(this.state.ccEmployee))
            }
            ccEmployee.splice(index, 1);
            this.setState({
                ccEmployee: ccEmployee
            });
        }
    };

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

    render() {
        return (
            <View style={styles.background}>
                <ScrollView style={{width:'100%'}}>
                    <View style={styles.addContent}>
                        <Text style={{
                            fontSize: 17,
                            color: '#333',
                            paddingTop: (15 / zoomW),
                            paddingLeft: (10 / zoomW)
                        }}>{this.from == 'doEmployee' ? '执行人' : '抄送人'}</Text>
                        <View style={styles.addItem}>
                            <TouchableOpacity style={styles.avatarBox} activeOpacity={0.8}
                                              onPress={() => this.toPeopleList()}>
                                <Image source={circleAdd} style={{width: (50 / zoomH), height: (50 / zoomH)}}
                                       resizeMode="contain"/>
                            </TouchableOpacity>
                            {!!this.state.doEmployee && this.from == 'doEmployee' && this.state.doEmployee.map((item, index) => this.renderPeople(item, index))}
                            {!!this.state.ccEmployee && this.from == 'ccEmployee' && this.state.ccEmployee.map((item, index) => this.renderPeople(item, index))}
                        </View>
                    </View>
                </ScrollView>
            </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'
    }
});