xntalk / xntalk-rnapp

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

const back = require('../../img/returnB.png');
const avatar = require('../../img/avatar.png');
const allDel = require('../../img/allDel.png');
const search = require('../../img/search.png');
const submitsuccess = require('../../img/submitsuccess.png');

export default class SelectTarget 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.addTeam}>
                <Text style={{fontSize: 16, color: navigation.state.params.color}}>选择</Text>
            </TouchableOpacity>}
        </View>)
    });

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            sheetList: [],
            percent: 30,
            itemList: [],
            selectedId: []
        };
    };

    componentWillMount() {
        if (this.props.navigation.state.params.selected.length != 0) {
            let selectedId = this.state.selectedId;
            let itemList = this.state.itemList;
            for (let i = 0; i < this.props.navigation.state.params.selected.length; i++) {
                selectedId.push(this.props.navigation.state.params.selected[i].objectId);
                itemList.push(this.props.navigation.state.params.selected[i])
            }
            this.setState({
                selectedId: selectedId,
                itemList: itemList
            })
        }
        this.setState({
            sheetList: this.props.navigation.state.params.canSelectList
        });
    }

    componentDidMount() {
        this.props.navigation.setParams({
            color: this.state.itemList.length != 0 ? 'rgba(0,190,60,1)' : 'rgba(0,190,60,0.5)',
            opacity: this.state.itemList.length != 0 ? 0.8 : 1,
            back: () => {
                NoDoublePress.onPress(() => {
                    this.props.navigation.goBack();
                });
            },
            addTeam: () => {
                if (this.state.itemList.length != 0) {
                    this.props.navigation.state.params.callback(this.state.itemList);
                    NoDoublePress.onPress(() => {
                        this.props.navigation.goBack();
                    })
                }
            }
        });
    };

    /*一键删除功能*/
    showDel(type, content) {
        if (__ANDROID__) {
            if (content.length != 0) {
                this.setState({
                    type: type
                })
            } else {
                this.setState({
                    type: ''
                })
            }
        }
    };

    /*渲染列表*/
    renderItem(item, index) {
        return (
            <TouchableOpacity key={index} activeOpacity={0.8} style={{
                width: width,
                height: (100 / zoomH),
                paddingLeft: (15 / zoomH),
                paddingRight: (15 / zoomH),
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center'
            }} onPress={() => this.selectItem(item)}>
                <View style={{width: (24 / zoomH), height: (24 / zoomH), marginRight: (15 / zoomW)}}>
                    <View style={styles.selectDot}/>
                    {this.state.selectedId.indexOf(item.objectId) != -1 && <Image source={submitsuccess} style={{
                        width: (24 / zoomH),
                        height: (24 / zoomH),
                        borderRadius: ( 12 / zoomH ),
                        position: 'absolute',
                        top: 0
                    }} resizeMode="cover"/>}
                </View>
                <View style={styles.listItem}>
                    <View style={{
                        borderRadius: (30 / zoomH),
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderStyle: 'solid',
                        borderColor: '#ddd',
                        borderWidth: StyleSheet.hairlineWidth
                    }}>
                        <PercentageCircle collapsable={false} radius={(28 / zoomH)} percent={item.processPercent}
                                          color={'#28c35a'} borderWidth={(2 / zoomH)}>
                            <Image
                                source={item.avarUrl ? {uri: item.avarUrl + '?x-oss-process=image/resize,w_500'} : avatar}
                                style={{width: (52 / zoomH), height: (52 / zoomH), borderRadius: (26 / zoomH)}}
                                resizeMode="cover"/>
                            <View style={{
                                width: (52 / zoomH),
                                height: (52 / zoomH),
                                borderRadius: (26 / zoomH),
                                position: 'absolute',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                backgroundColor: 'rgba(0,0,0,.2)'
                            }}>
                                <Text style={{fontSize: 14, color: '#fff'}}>{item.processPercent}%</Text>
                            </View>
                        </PercentageCircle>
                    </View>
                    <View style={styles.taskDetail}>
                        <Text style={{fontSize: 17, color: '#000'}} numberOfLines={1}>{item.objectName}</Text>
                        <Text style={{fontSize: 14, color: '#666'}}
                              numberOfLines={1}>{'结束时间：' + moment(Number(item.endTime)).format('YYYY-MM-DD HH:mm')}</Text>
                        <Text style={{fontSize: 14, color: '#666'}} numberOfLines={1}>{item.objectDetail}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    };

    /*选择任务*/
    selectItem(item) {
        let itemList = this.state.itemList;
        let selectedId = this.state.selectedId;
        if (selectedId.indexOf(item.objectId) == -1) {
            itemList.push(item);
            selectedId.push(item.objectId);
        } else {
            itemList.splice(selectedId.indexOf(item.objectId), 1);
            selectedId.splice(selectedId.indexOf(item.objectId), 1);
        }
        this.setState({
            itemList: itemList,
            selectedId: selectedId
        });
        if (this.state.itemList.length != 0) {
            this.props.navigation.setParams({
                color: 'rgba(0,190,60,1)'
            });
        } else {
            this.props.navigation.setParams({
                color: 'rgba(0,190,60,.2)'
            });
        }
    };

    /*搜索任务*/
    searchTarget() {
        let resultList = [];
        let sheetList = this.props.navigation.state.params.canSelectList;
        this.setState({
            loading: true,
            sheetList: []
        }, function () {
            if (this.state.name.length != 0) {
                for (let i = 0; i < sheetList.length; i++) {
                    if (sheetList[i].objectName.indexOf(this.state.name) != -1) {
                        resultList.push(sheetList[i]);
                    }
                }
                this.setState({
                    loading: false,
                    sheetList: resultList
                })
            } else {
                this.setState({
                    loading: false,
                    sheetList: this.props.navigation.state.params.canSelectList
                })
            }
        });
    };

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

    render() {
        return (
            <View style={styles.background}>
                <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"
                               onChangeText={(value) => this.setState({name: value}, function () {
                                   this.showDel('name', this.state.name)
                               })} onFocus={() => this.showDel('name', this.state.name)} onBlur={() => {
                        this.setState({type: ''})
                    }} defaultValue={this.state.name} onSubmitEditing={() => this.searchTarget()}/>
                    {this.state.type == 'name' && <TouchableOpacity style={{
                        height: '100%',
                        position: 'absolute',
                        right: 0,
                        display: 'flex',
                        justifyContent: 'center'
                    }} onPress={() => NoDoublePress.onPress(() => {
                        this.setState({name: '', type: ''})
                    })}>
                        <Image source={allDel} style={{
                            width: (16 / zoomH),
                            height: (48 / zoomH),
                            marginLeft: (10 / zoomW),
                            marginRight: (10 / zoomW)
                        }} resizeMode="center"/>
                    </TouchableOpacity>}
                </View>
                <View style={{width: (345 / zoomW), paddingTop: (10 / zoomH)}}>
                    {!!this.state.sheetList &&
                    <Text style={{fontSize: 12, color: '#666', paddingTop: (5 / zoomH), paddingRight: (5 / zoomH)}}>可关联任务({this.state.sheetList.length})</Text>}
                </View>
                <ScrollView>
                    {this.state.sheetList && this.state.sheetList.map((item, index) => this.renderItem(item, index))}
                </ScrollView>
                {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',
        justifyContent: 'center'
    },
    background: {
        flex: 1,
        backgroundColor: '#fff',
        display: 'flex',
        alignItems: 'center'
    },
    searchBox: {
        width: (345 / zoomW),
        height: (34 / zoomH),
        borderRadius: 3,
        backgroundColor: '#eeeff3',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: (12 / zoomW)
    },
    searchText: {
        flex: 1,
        fontSize: 14,
        color: '#000',
        padding: 0,
        paddingLeft: (8 / zoomW)
    },
    listItem: {
        flex: 1,
        height: (80 / zoomH),
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderStyle: 'solid',
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#eee',
        backgroundColor: '#fff'
    },
    taskDetail: {
        flex: 1,
        paddingLeft: (10 / zoomW)
    },
    selectDot: {
        width: (24 / zoomH),
        height: (24 / zoomH),
        borderRadius: (12 / zoomH),
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: '#ddd',
        borderStyle: 'solid',
        marginRight: (15 / zoomW)
    },
    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'
    }
});