customer / shanghai-railway-rnapp

/**
 * Created by Cassie on 2018/03/21
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    Animated,
    ActivityIndicator,
    NativeModules,
    NativeEventEmitter,
    DeviceEventEmitter,
    Alert,
    Modal,
    Platform,
    BackHandler,
    AsyncStorage,
    Button,
    FlatList,
    ScrollView,
    StatusBar,
    Keyboard
} from 'react-native';
import { withNavigationFocus } from 'react-navigation-is-focused-hoc';

import {zoomW,zoomH,width,height} from '../../utils/getSize';
import {getHeaderHeight,getHeaderPadding,clock,xnToast,timeReduce,timePlus,timeEvery,getDay} from '../../utils/utils';
import xnService from "../../service/AppService";
import moment from 'moment';

const nativeBridge = NativeModules.BlueToolManage;
const NativeModule = new NativeEventEmitter(nativeBridge);

var ImagePicker = require('react-native-image-picker');
var options = {
    title: null,
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'从手机相册中选取',
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};

class errorPost extends Component {
    static navigationOptions = ({navigation}) => ({
        header:null
    });

    constructor(props){
        super(props);
        this.keyboardShow = null;
        this.keyboardHide = null;
        this._gestureHandlers = {
            onStartShouldSetResponder: () => {
                return false;
            },
            // 对触摸进行响应
            onMoveShouldSetResponder: () => {
                Keyboard.dismiss();
                return false;
            },
        };
        let _this = this;

        this.state = {
            itemList:[],
            bottom:new Animated.Value(-157),
            imgType:['bmp','jpeg','jp2','gif','tiff','png','exif','wbmp','mbm','jpg','heic'],
            keyboardSpace: 0,
            loading:false,
            isAble:false,
            showSelect:false
        };
    };

    componentWillMount(){

        this.keyboardShow = Platform.OS === 'ios' ?
            Keyboard.addListener('keyboardWillShow', this.updateKeyboardSpace.bind(this)) : Keyboard.addListener('keyboardDidShow', this.updateKeyboardSpace.bind(this));
        this.keyboardHide = Platform.OS === 'ios' ?
            Keyboard.addListener('keyboardWillHide', this.resetKeyboardSpace.bind(this)) : Keyboard.addListener('keyboardDidHide', this.resetKeyboardSpace.bind(this));
    };

    componentDidMount(){

    }

    componentWillUnmount(){
        this.closeSelect();

        // 卸载键盘弹出事件监听
        if (this.keyboardShow !== null) {
            this.keyboardShow.remove();
        }
        // 卸载键盘隐藏事件监听
        if (this.keyboardHide !== null) {
            this.keyboardHide.remove();
        }
    }




    doPost(){

        let _this = this;
        if (_this.state.describe==''||_this.state.describe==undefined){
            xnToast('描述不能为空');
            return;
        }

        _this.setState({
            loading:true
        });

        let itemList=[];
        for (let i=0;i<_this.state.itemList.length;i++){
            if (_this.state.itemList[i].url){
                itemList.push(_this.state.itemList[i].url);
            }
        }
        let parms ={
            content:_this.state.describe,
            title:'软件异常',
            commitTime:moment(Number(new Date().getTime())).format('YYYY-MM-DD HH:mm:ss'),
            appAttachementAddressList:itemList
    };


        xnService.phoneErrorPost(parms).then((data) => {
            _this.setState({
                loading:false
            });
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0){
                xnToast(data.errors[0].message);
            }else{
                xnToast('异常上报成功');

                this.props.navigation.goBack()

            }
        })
    }

    // 检测是否可以上报
    testCanPost(){

        if ( this.state.describe=='' || this.state.describe==undefined){

            this.setState({
                isAble:false
            });
        }else{
            this.setState({
                isAble:true
            });
        }

    }

    // 打开键盘
    updateKeyboardSpace(frames) {

        if (!frames.endCoordinates) {
            return;
        }
        const keyboardHeight = frames.endCoordinates.height;// 获取键盘高度
        this.setState({
            keyboardSpace: keyboardHeight,
        });
    }

    // 关闭键盘
    resetKeyboardSpace() {
        this.setState({
            keyboardSpace: 0,
        });
    }

    /*打开和关闭选择图片*/
    selectPic(){
        this.setState({
            showSelect:true,
        });
        Animated.timing(
            this.state.bottom,
            {toValue:0}
        ).start();
    };

    closeSelect(){
        this.setState({
            showSelect:false,
            bottom:new Animated.Value(-157)
        });
    };

    /*打开相机*/
    openCamera(){
        NativeModules.BlueToolManage.openCameraWithpassportId(global.passport.id).then((data) => {
            this.closeSelect();
            let res = JSON.parse(data);
            let url = res.url;
            let fileType = '';
            if(res.type == 'IMAGE'){
                fileType = 'IMAGE';
            }
            let params = {
                type:fileType,
                name:url.substring(url.lastIndexOf('/')+1,url.lastIndexOf('.')),
                extension:url.substring(url.lastIndexOf('.')+1),
                storagePath:url,
            };

            let imgList = this.state.itemList;
            imgList.push({url:url,name:params.name,type:fileType});
            this.setState({
                itemList:imgList
            });
        })
    };

    toAlbum(){
        global.openImg = true;
        ImagePicker.launchImageLibrary({},(response) => {
            this.closeSelect();
            if(response.didCancel){

            }else if (response.error){
                xnToast('相册访问失败,请重新尝试或检查是否开启相册权限');
            }
            else{
                this.setState({
                    loading:true
                });
                let timestamp = (new Date()).getTime();
                let fileName = response.fileName ? global.user.id+timestamp+response.fileName : global.user.id+timestamp+response.uri.substring(response.uri.lastIndexOf('/')+1);
                xnService.getAccess({name:fileName}).then((data) => {
                    if(data.message){
                        xnToast(data.message);
                        return;
                    }
                    if(data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    }else{
                        NativeModules.BlueToolManage.simpleUpload(data.accessKeyId,data.accessKeySecret,data.securityToken,data.info.endpoint,data.info.bucket,data.info.fileUrl,response.path || response.uri).then((res) => {
                            let extension = res.substring(res.lastIndexOf('.')+1).toLowerCase();
                            let fileType = '';
                            if(this.state.imgType.indexOf(extension) != -1){
                                fileType = 'IMAGE'
                            }
                            let params = {
                                type:fileType,
                                name:res.substring(res.lastIndexOf('/')+1,res.lastIndexOf('.')),
                                extension:extension,
                                storagePath:res,                            };

                            this.setState({
                                loading:false
                            });

                            let imgList = this.state.itemList;
                            imgList.push({url:res,name:params.name,type:fileType});
                            this.setState({
                                itemList:imgList
                            });

                        })
                    }
                })
            }
        });
    };

    delegate(rowID){
        let imgList = this.state.itemList;
        imgList.splice(rowID,1);
        this.setState({
            itemList:imgList
        });
    }

    //图片渲染
    renderItem = (item,rowID) => {
        return(
            <View style={[styles.innerViewStyle,{position:"relative",marginLeft:rowID==0?0:11/zoomW}]} key={rowID}>
                <Image style={{width:'100%',height:'100%'}} source={{uri:item.url+'?x-oss-process=image/resize,w_1000'}} resizeMode='cover' />
                <TouchableOpacity style={{position:"absolute",right:0,top:0,width:20/zoomW,height:20/zoomW}} onPress={()=>this.delegate(rowID)}>
                    <Image style={{width:'100%',height:'100%'}} source={require('../../img/deleteIcon.png')} resizeMode="contain" ></Image>
                </TouchableOpacity>
            </View>
        )
    };

    render(){

        const _this = this;

        return (
            <View style={styles.background} {...this._gestureHandlers}>
                <StatusBar barStyle={this.state.statusBarColor}/>
                <View style={[styles.headerWrap]}>
                    <TouchableOpacity style={styles.renderLeft} onPress={() => this.props.navigation.goBack()}>
                        <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
                    </TouchableOpacity>
                    {/*<TouchableOpacity style={[styles.renderLeft,{backgroundColor:'#ff7700'}]} onPress={() => this.doPost()}>*/}
                    {/*    <Text style={{ color:'#fff', fontSize:14 }}>上报</Text>*/}
                    {/*</TouchableOpacity>*/}

                    <Text style={styles.title}>APP异常上报</Text>
                    {this.state.isAble&&<TouchableOpacity style={[styles.renderRight,{backgroundColor:'#ff7700'}]} onPress={() => this.doPost()}>
                        <Text style={{ color:'#fff', fontSize:14 }}>上报</Text>
                    </TouchableOpacity>}
                    {!this.state.isAble&&<View style={[styles.renderRight,{backgroundColor:'#D8D8D8'}]}>
                        <Text style={{ color:'#fff', fontSize:14 }}>上报</Text>
                    </View>}


                </View>
                <ScrollView
                    keyboardShouldPersistTaps="always"
                    contentInset = {{ bottom:this.state.keyboardSpace }}
                    style={{ flex: 1 ,width:width}}
                    alwaysBounceVertical={false}
                    automaticallyAdjustContentInsets={false}
                    scrollEventThrottle={200}
                >
                    <View style={styles.top}>
                        <TextInput style={{fontSize:18,height:86/zoomH,maxHeight:86/zoomH,marginBottom:11/zoomH}} underlineColorAndroid="transparent" multiline={true} value={this.state.describe} onChangeText={(text)=>{
                            this.setState({describe:text},function(){
                                this.testCanPost();
                            })

                        }} placeholder='APP异常描述'></TextInput>

                        <ScrollView horizontal={true} contentContainerStyle={{flex:1,alignItems:'center'}} style={{width:'100%',height:98/zoomH}} scrollEventThrottle={200}>
                            {this.state.itemList.map((v, i) => this.renderItem(v, i))}
                            {this.state.itemList.length < 3 && <TouchableOpacity style={{ marginLeft:this.state.itemList.length ==0?0: 11/zoomW }} onPress={()=>this.selectPic()}>
                                <View style={{width:98/zoomW, height:98/zoomW,backgroundColor:'#ededed',justifyContent:'center',alignItems:'center'}}>
                                    <Image style={{width:32/zoomW,height:32/zoomW}} source={require('../../img/add.png')}/>
                                </View>
                            </TouchableOpacity>}
                        </ScrollView>
                    </View>

                </ScrollView>

                <Modal animationType={'none'} transparent={true} visible={this.state.showSelect} onRequestClose={() => {}}>
                    <TouchableOpacity activeOpacity={1} style={styles.modalBg} onPress={() => this.closeSelect()}>
                        <Animated.View style={[styles.selectContent,{bottom:this.state.bottom}]}>
                            <View style={{marginBottom:7}}>
                                <TouchableOpacity activeOpacity={.9} onPress={() => this.openCamera()}>
                                    <View style={styles.selectModal}>
                                        <Text style={{color:'#333',fontSize:18,marginBottom:(5/zoomH)}}>拍摄</Text>
                                        <Text style={{color:'#999',fontSize:10}}>照片或视频</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity activeOpacity={.9} onPress={() => this.toAlbum()}>
                                    <View style={styles.selectModal}>
                                        <Text style={{color:'#333',fontSize:18}}>从手机相册选择</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <TouchableOpacity activeOpacity={.9} onPress={() => this.closeSelect()}>
                                <View style={styles.selectModal}>
                                    <Text style={{color:'#333',fontSize:18}}>取消</Text>
                                </View>
                            </TouchableOpacity>
                        </Animated.View>
                    </TouchableOpacity>
                </Modal>


                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}

            </View>
        );
    }
}

export default withNavigationFocus(errorPost)

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#fff',
        display:'flex',
        alignItems:'center',
    },
    headerWrap: {
        width: '100%',
        height:getHeaderHeight(),
        paddingTop:getHeaderPadding(),
        backgroundColor:'#fff',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
    },
    title: {
        color:'#000',
        fontSize:18,
        fontWeight:'bold',
    },
    renderLeft: {
        position: 'absolute',
        left: 0,
        top: getHeaderPadding()+10,
        width:57/zoomW,height:32/zoomH
        ,justifyContent:'center',alignItems:'center',borderRadius:4
    },
    renderRight: {
        position: 'absolute',
        right: 0,
        top: getHeaderPadding()+5,
        width:57/zoomW,height:32/zoomH
        ,justifyContent:'center',alignItems:'center',marginRight: 16/zoomW,borderRadius:4
    },
    icon:{
        width:40,
        height:40,
        marginBottom:5,
        borderRadius:20,
        backgroundColor:'white',
        alignItems:'center',
        justifyContent:'center'
    },
    top:{
        // maxHeight:224/zoomH,
        width:'100%',
        height:237/zoomH,
        backgroundColor:'#fff',
        paddingLeft:20/zoomW,
        paddingRight:20/zoomW,
        paddingTop:11/zoomH,
        marginBottom:10/zoomH
    },
    innerViewStyle:{
        width:98/zoomW,
        height:98/zoomW,
        justifyContent:'center',
    },
    contentContainer:{
        width:60/zoomW,
        height:60/zoomW
    },
    modalBg:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,.5)'
    },
    selectContent:{
        width:'100%',
        position:'absolute'
    },
    selectModal:{
        width:'100%',
        height:50,
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#fff',
        borderBottomWidth:1,
        borderBottomColor:'#ddd'
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
});