xntalk / xntalk-rnapp

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

import {width,zoomW,zoomH} from '../../utils/getSize';
import {xnToast,NoDoublePress} from '../../utils/utils';
import AppService from "../../service/AppService";

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(() => {
                    InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
                });
            },
            addTeam:()=>{
                if(this.state.itemList.length !=0){
                    this.props.navigation.state.params.callback(this.state.itemList);
                    NoDoublePress.onPress(() => {
                        InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
                    })
                }
            }
        });
    };
    /*获取可关联任务*/
    getList(){
        this.setState({
            sheetList:[]
        });
        if(global.isConnected){
            let params = {
                userId:global.userId,
                pageSize:0
            };
            this.setState({
                loading:true
            });
            AppService.getCanTeamList(params).then((data) => {
                this.setState({
                    loading:false
                });
                if(data.message){
                    xnToast(data.message);
                    return;
                }
                if(data.errors.length > 0){
                    xnToast(data.errors[0].message);
                }else{
                    this.setState({
                        sheetList:data.result.concat(this.props.navigation.state.params.selected)
                    });
                }
            }).catch((error) => {
                this.setState({
                    loading:false
                });
                xnToast(error)
            })
        }else{
            xnToast('暂无网络连接，请稍后重试！')
        }
    };
    /*一键删除功能*/
    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={() => NoDoublePress.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),position:'absolute',top:0}} resizeMode="center" />}
                </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.processPercentt} 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){
            selectedId.push(item.objectId);
            itemList.push(item);
        }else{
            selectedId.splice(selectedId.indexOf(item.objectId),1);
            itemList.splice(selectedId.indexOf(item.objectId),1);
        }
        console.log(itemList);
        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)'
            });
        }
    };

    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} />
                    {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'
    }
});