xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    ScrollView,
    Animated,
    Alert,
    InteractionManager
} from 'react-native';
import Picker from 'react-native-picker';

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

const back = require('../../img/returnB.png');

export default class SetReport extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title:'设置进度汇报',
        headerLeft:(<View style={{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={{display:'flex',flexDirection:'row'}} />)
    });

    constructor(props){
        super(props);
        this.state = {
            left:new Animated.Value(2/zoomH),
            background:'#c6c6c6',
            btnList:[{name:'一'},{name:'二'},{name:'三'},{name:'四'},{name:'五'},{name:'六'},{name:'日'}],
            remindTime:'',
            weekBackground:'#fff',
            indexList:[],
            showSetting:false
        };
    };

    componentWillMount(){

    };

    componentDidMount(){
        this.props.navigation.setParams({
            back:() => {
                if(this.state.showSetting && (this.state.indexList.length == 0 || this.state.remindTime.length == 0)){
                    Alert.alert(
                        '提示',
                        '请选择提醒频率',
                        [
                            {text: '确定', onPress:() => {return}}
                        ],
                        {cancelable:false}
                    );
                }else{
                    let content = '';
                    let week = '';
                    if(this.state.indexList.length != 0){
                        for(let i=0;i<this.state.indexList.length;i++){
                            week = week + ' ' + this.state.indexList[i] + ' '
                        }
                        content = '每周'+ week + this.state.remindTime
                    }
                    this.props.navigation.state.params.callback(content);
                    InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
                }

            }
        });
    };
    /*是否打开提醒*/
    isTop(){
        if(this.state.background == '#c6c6c6'){
            this.setState({
                background:'#27c159',
                showSetting:true
            });
            Animated.timing(
                this.state.left,
                {toValue:(32/zoomH),duration:200}
            ).start();
        }else if(this.state.background == '#27c159'){
            this.setState({
                background:'#c6c6c6',
                showSetting:false
            });
            Animated.timing(
                this.state.left,
                {toValue:(2/zoomH),duration:200}
            ).start();
        }
    };
    /*选择时间*/
    openTimePicker(){
        let hours = [],
            minutes = [],
            Phour = '',
            Pminutes = '';
        let now = new Date();
        for(let i=0;i<25;i++){
            if(i<10){
                i='0'+i;
            }
            hours.push(i);
        }
        for(let i=0;i<60;i++){
            if(i<10){
                i='0'+i;
            }
            minutes.push(i);
        }
        let pickerData = [hours,['时'],minutes,['分']];
        if(now.getHours()<10){
            Phour = '0'+now.getHours();
        }else{
            Phour = now.getHours();
        }
        if(now.getMinutes()<10){
            Pminutes = '0'+now.getMinutes()
        }else{
            Pminutes =now.getMinutes()
        }
        let selectedValue = [Phour,['时'],Pminutes,['分']];
        Picker.init({
            pickerData,
            selectedValue,
            pickerConfirmBtnText:'设置提醒',
            pickerCancelBtnText:'取消',
            pickerConfirmBtnColor:[26,173,25,1],
            pickerCancelBtnColor:[153,153,153,1],
            pickerToolBarBg:[240,239,245,1],
            pickerBg:[255,255,255,1],
            pickerTitleText: '',
            wheelFlex: [1,1,1],
            showMask:true,
            onPickerConfirm:remindTime => {
                this.setState({
                    remindTime:remindTime[0]+':'+remindTime[2]
                });
            },
        });
        Picker.show()
    };
    /*渲染列表*/
    renderBtn(item,index){
        return(
            <TouchableOpacity key={index} activeOpacity={0.8} style={[styles.weekBtn,{backgroundColor:this.state.indexList.indexOf(item.name) != -1 ? '#27c159':'#fff'}]} onPress={() => this.selectWeek(item.name)}>
                <Text style={{fontSize:18,color:this.state.indexList.indexOf(item.name) != -1 ? '#fff':'#666'}}>{item.name}</Text>
</TouchableOpacity>
)
    };
    /*选择星期*/
    selectWeek(name){
        let indexList = this.state.indexList;
        if(indexList.indexOf(name) == -1){
            indexList.push(name)
        }else{
            indexList.splice(indexList.indexOf(name),1)
        }
        this.setState({
            indexList:indexList
        })
    }

    render(){
        return(
            <View style={styles.background}>
                <View style={{width:'100%',height:(20/zoomH)}} />
                <View style={styles.btnBox}>
                    <View>
                        <Text style={{fontSize:18,color:'#000'}}>汇报提醒</Text>
                        <Text style={{fontSize:12,color:'#999'}}>开启之后可以定时提醒成员汇报任务进度</Text>
                    </View>

                    <TouchableOpacity activeOpacity={0.8} style={[styles.topBtn,{backgroundColor:this.state.background}]} onPress={() => this.isTop()}>
                        <Animated.View style={[styles.circleDot,{left:this.state.left}]} />
                    </TouchableOpacity>
                </View>
                <View style={{width:'100%',height:(20/zoomH)}} />
                {this.state.showSetting && <View style={styles.setBox}>
                    <Text style={{fontSize:18,color:'#000'}}>提醒频率</Text>
                    <View style={styles.weekList}>
                        {this.state.btnList && this.state.btnList.map((item,index) => this.renderBtn(item,index))}
                    </View>
                    <TouchableOpacity style={{width:'100%',display:'flex',flexDirection:'row',justifyContent:'space-between'}} activeOpacity={0.8} onPress={() => this.openTimePicker()}>
                        <Text style={{fontSize:18,color:'#000',paddingTop:(10/zoomH)}}>提醒时间</Text>
                        {this.state.remindTime.length != 0 && <Text style={{fontSize:18,color:'#000',paddingTop:(10/zoomH)}}>{this.state.remindTime}</Text>}
                    </TouchableOpacity>
                </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'
    },
    btnBox:{
        width:'100%',
        height:(58/zoomH),
        backgroundColor:'#fff',
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW)
    },
    topBtn:{
        width:(60/zoomH),
        height:(30/zoomH),
        borderRadius:(15/zoomH),
        display:'flex',
        justifyContent:'center'
    },
    circleDot:{
        width:(26/zoomH),
        height:(26/zoomH),
        backgroundColor:'#fff',
        borderRadius:(13/zoomH),
        position:'absolute'
    },
    setBox:{
        width:'100%',
        backgroundColor:'#fff',
        paddingTop:(10/zoomH),
        paddingBottom:(10/zoomH),
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW)
    },
    weekList:{
        width:'100%',
        paddingTop:(15/zoomH),
        paddingBottom:(15/zoomH),
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center',
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderBottomColor:'#eee',
        borderStyle:'solid'
    },
    weekBtn:{
        width:(32/zoomH),
        height:(32/zoomH),
        borderRadius:(16/zoomH),
        borderWidth:StyleSheet.hairlineWidth,
        borderStyle:'solid',
        borderColor:'#ccc',
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    }
});