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 moment from 'moment';
import md5 from 'md5';
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,
    NoDoublePress
} from '../../utils/utils';
import xnService from "../../service/AppService";
import Picker from 'react-native-picker'
import {observable} from "mobx";
// import MyTextInput from "../component/MyTextInput";
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 eventReport extends Component {
    static navigationOptions = ({navigation}) => ({
        title:'事件上报',
        tabBarIcon: ({ tintColor }) => (
            <View style={[styles.icon]}>
                <Image style={[{tintColor: tintColor}]}
                       source={require('../../img/root_eventReport.png')}
                       resizeMode='contain'
                />
            </View>

        ),
        header:null
    });

    @observable
    isAble = false;

    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:[],
            selectType:'四乱秩序',
            showSelect:false,
            bottom:new Animated.Value(-157),
            imgType:['bmp','jpeg','jp2','gif','tiff','png','exif','wbmp','mbm','jpg','heic'],
            trainId:'',
            trainGroupId:'',
            trainLineId:'',
            trainCarriageId:'',
            trainDoorId:'',
            positionFlag:'',
            nextStation:'',
            currentStation:'',
            keyboardSpace: 0,
            loading:false,
            selectPosition:'车厢',
            isTransferStation:false,
            selectStationLocation:'站厅',
            statusBarColor:'default',
            showType:false,
            // isAble:false,
            stationName:'',
            LineList:[],
            LineNameList:['1号线','2号线','3号线','4号线','5号线','6号线','7号线','8号线','9号线','10号线','11号线','12号线','13号线','15号线','16号线','17号线','18号线','浦江线','磁浮线'],
            selectLineName:'请选择线路',
            address:''
        };

    };

    componentWillMount(){
        this.openCamera();
        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));


    };

    async componentWillReceiveProps(props) {
        if ( props.isFocused ) {
            this.openCamera();
            this.getAddress();
        } else {

        }

    }

    componentDidMount(){
        this.getAddress();
        let _this = this;

        this.listener = Platform.OS == 'ios' ?
            NativeModule.addListener('locationData', (data) => {
                if(!!data.requestDatadata){
                    global.stationName = data.requestData.replace(/[^\u4e00-\u9fa5\w]/g,'').replace(/地铁站/g,'')
                    _this.getLineList(global.stationName);
                }
            }):
            DeviceEventEmitter.addListener('locationData',(data) => {
                if(!!data.requestDatadata){
                    global.stationName = data.requestData.replace(/[^\u4e00-\u9fa5\w]/g,'').replace(/地铁站/g,'')
                    _this.getLineList(global.stationName);
                }
            });
    }

    componentWillUnmount(){
        this.closeSelect();

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

        try {
            Picker.hide();
        }catch (e) {

        }
    }


    getLineList(text){
        if (text==='' || text===undefined){
            this.setState({LineNameList:['1号线','2号线','3号线','4号线','5号线','6号线','7号线','8号线','9号线','10号线','11号线','12号线','13号线','15号线','16号线','17号线','18号线','浦江线','磁浮线'],selectLineName:'请选择线路'})
            return;
        }

        let _this= this;
        xnService.findLineNum({lineName: text}).then((data) => {
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0){
                xnToast(data.errors[0].message);
            }else{

                if (data.result.length>0) {
                    let arr=[];
                    for (let i = 0;i<data.result.length;i++){
                        arr.push(data.result[i].lineName.replace(/轨道交通/g,''))
                    }
                    _this.setState({
                        stationName:data.result[0].stName,
                        stationId:data.result[0].stNo,
                        isTransferStation:data.result[0].transferTag==='换乘站'?true:false,
                        LineList:data.result,
                        LineNameList:arr,
                        selectLineName:arr[0]
                    })
                }

            }
        })
    }

    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 prams={
        //     lineId:'09',
        //     lineName:'09号线',
        //     carriageNumber:'090886',
        //     stationId:'',
        //     stationName:'',
        //     content:'5:05 测试数据',
        //     type1Id:'default',
        //     type2Id:'default',
        //     type3Id:'default',
        //     type1Name : '车厢事件',
        //     type2Name : 'default',
        //     type3Name : 'default',
        //     gradeId:'A',
        //     gradeName : '紧急',
        //     title : '车厢事件',
        //     happenTime:'2018-04-29 17:18:10',
        //     commitTime:'2018-04-29 18:10:13',
        //     volunteerId:'2017100400109',
        //     volunteerName:'超哥的的',
        //     volunteerContact:'18221919491',
        //     volunteerSex:'男',
        //     volunteerBirthday:'',
        //     nextStationId:'0124',
        //     nextStationName:'新闸路',
        //     sbNumber:'A',
        //     csType:'B',
        //     gaFlag:'2018-04-29 17:06:03',
        //     appAttachementAddressList:[''],
        //
        // }


        let prams={
            content:_this.state.describe,
            happenTime:moment(Number(new Date().getTime())).format('YYYY-MM-DD HH:mm:ss'),
            commitTime:moment(Number(new Date().getTime())).format('YYYY-MM-DD HH:mm:ss'),
            volunteerId:global.user.id,
            volunteerName:global.user.nickName?global.user.nickName:global.user.mobilePhone,
            volunteerContact:global.user.mobilePhone,
            volunteerSex:global.user.gender?global.user.gender:'',
            volunteerBirthday:'',
            sbNumber:'B',
            gaFlag:moment(Number(new Date().getTime())).format('YYYY-MM-DD HH:mm:ss'),
            appAttachementAddressList:itemList,
            type1Id:'default',
            type2Id:'default',
            type3Id:'default',
            type2Name : 'default',
            type3Name : 'default',

        };

        if (_this.state.selectType == '治安事件') {

            prams.type1Name = '治安事件';
            prams.gradeId='A';
            prams.gradeName = '紧急';
            prams.title = '治安事件';

        }else if (_this.state.selectType == '环境卫生') {

            prams.type1Name = '环境卫生';
            prams.gradeId ='B';
            prams.gradeName = '不紧急';
            prams.title = '环境卫生';

        }else if (_this.state.selectType == '设施设备') {

            prams.type1Name = '设施设备';
            prams.gradeId = 'D';
            prams.gradeName = '不紧急';
            prams.title = '设施设备';

        }else if (_this.state.selectType == '四乱秩序') {

            prams.type1Name = '四乱秩序';
            prams.gradeId = 'C';
            prams.gradeName = '紧急';
            prams.title = '四乱秩序';
        }




        if (this.state.selectPosition == '车厢') {

            prams.lineId = this.state.trainLineId;
            prams.lineName = '轨道交通'+ this.state.trainLineId + '号线';

            if (this.state.trainLineId.length <1) {
                prams.lineName = '轨道交通'+ '0'+ this.state.trainLineId + '号线';
            }
            let trainId = !!_this.state.trainId?_this.state.trainId+'-':'';
            prams.carriageNumber = trainId + _this.state.trainCarriageId;
            prams.stationId = _this.state.currentStationId;
            prams.stationName = _this.state.currentStation;
            prams.nextStationId = _this.state.nextStationId;
            prams.nextStationName = _this.state.nextStation;
            prams.detailed = prams.lineName +'-'+prams.carriageNumber+'号车厢';
        } else{
            // 车站

            if (this.state.selectLineName == '浦江线'||this.state.selectLineName == '磁浮线') {
                prams.lineId = '';
                prams.lineName = this.state.selectLineName;
            }else{
                prams.lineId = this.state.selectLineName.replace(/轨道交通/g,'').replace(/号线/g,'');
                if (prams.lineId.length < 2){
                    prams.lineId = '0' + prams.lineId;
                }
                prams.lineName = '轨道交通'+ prams.lineId + '号线';
            }

            prams.carriageNumber = '';
            prams.stationId = _this.state.stationId || '';
            prams.stationName = this.state.stationName;
            let details = prams.lineName + '-' + prams.stationName + '-' + this.state.selectStationLocation;
            let address = !!this.state.address?'-' + this.state.address:'';
            prams.detailed = details + address;

        }

        xnService.createEvevns(prams).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.setState({
                    itemList:[],
                    describe:'',
                    selectType:'四乱秩序',
                },function () {
                    _this.testCanPost();
                })
            }
        })
    }

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

        if (this.state.describe==''||this.state.describe==undefined){
            //描述为空

            // this.setState({
            //     isAble:false
            // });
            this.isAble = false;
            return;
        }

        if (this.state.selectPosition == '车厢') {
            //车厢

            if (!!!this.state.trainLineId){
                // this.setState({
                //     isAble:false
                // });
                this.isAble = false;
                return;
            }

            if (!!!this.state.trainCarriageId){
                // this.setState({
                //     isAble:false
                // });
                this.isAble = false;
                return;
            }

        }else{
            //车站
            if (!!!this.state.stationName){
                // this.setState({
                //     isAble:false
                // });
                this.isAble = false;
                return;
            }

            if (this.state.selectLineName==='请选择线路'){
                // this.setState({
                //     isAble:false
                // });
                this.isAble = false;
                return;
            }

        }
        this.isAble = true;
        // this.setState({
        //     isAble:true
        // });

    }

    // 打开键盘
    updateKeyboardSpace(frames) {
        try {
            Picker.hide();
        }catch (e) {

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

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

    /*打开和关闭选择图片*/
    selectPic(){
        try {
            Picker.hide();
        }catch (e) {

        }
        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
            });

            // this.setState({
            //     loading:true
            // });
            // xnService.postAddattact(params).then((response) => {
            //     this.setState({
            //         loading:false
            //     });
            //     if(response.message){
            //         xnToast(response.message);
            //         return;
            //     }
            //     if(response.errors.length > 0) {
            //         xnToast(response.errors[0].message);
            //     }else{
            //         this.setState({
            //             loading:false
            //         });
            //
            //     }
            // })
        })
    };

    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
        });
    }

    getAddress=() => {
        let params = {
            userId: global.user.id
        };
        if(global.deviceParams) {

            if (global.deviceParams.wifiData != undefined){
                let vm = {
                    deviceCode:global.user.account + '|' + global.deviceParams.wifiData.wIP + '|' + global.deviceParams.wifiData.wBSSID,
                    RSS:global.deviceParams.wifiData.wRSS,
                    deviceType:1,
                    deviceMac:''
                };
                let data = global.deviceParams.requestData;
                data.push(vm);

                params.requestData = data;
            }else {
                params.requestData = global.deviceParams.requestData;
            }
        }

        xnService.getAddress(params).then((data) => {
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0){
                xnToast(data.errors[0].message);
            }else{
                if (!!data.trainLineId&&data.trainLineId==='未知') {
                    data.trainLineId = '';
                }
                this.setState({
                    trainId:data.trainId || '',
                    trainGroupId:data.trainGroupId || '',
                    trainLineId:(!data.trainLineId || data.trainLineId === '') ? '' : data.trainLineId,
                    trainCarriageId:data.trainCarriageId || '',
                    trainDoorId:data.trainDoorId || '',
                    positionFlag:data.positionData && data.positionData.positionFlag ? data.positionData.positionFlag : '',
                    nextStation:data.positionData && data.positionData.endStationName ? data.positionData.endStationName : '',
                    currentStation:data.positionData && data.positionData.beginStationName ? data.positionData.beginStationName : '',
                    nextStationId:data.positionData && data.positionData.endStationId ? data.positionData.endStationId : '',
                    currentStationId:data.positionData && data.positionData.beginStationId ? data.positionData.beginStationId : '',
                });
            }
        })
    };

    //图片渲染
    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_100'}} 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]}>
                    <Text style={styles.title}>事件上报</Text>
                    {this.isAble&&<TouchableOpacity style={[styles.renderRight,{backgroundColor:'#ff7700'}]} onPress={() => this.doPost()}>
                        <Text style={{ color:'#fff', fontSize:14 }}>上报</Text>
                    </TouchableOpacity>}
                    {!this.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='事件描述'/>

                        <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>
                    {/*事件类型*/}
                    <View style={{flex:1,height:102/zoomH,justifyContent:'flex-end',paddingLeft:24/zoomW}}>
                        <View style={{flex:1,flexDirection:'row'}}>
                            <View style={{flex:1,paddingTop:10/zoomH}}>
                                <View style={{flexDirection:'row'}}>
                                    <Text style={{color:'#595959',fontSize:14}}>事件类型</Text>
                                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                                        this.setState({
                                            showType:true
                                        })
                                    }}>
                                        <Image style={{width:16/zoomW,height:16/zoomW,marginLeft:5/zoomW}} source={require('../../img/info-circle.png')}/>
                                    </TouchableOpacity>
                                </View>
                                <View style={{flex:1,justifyContent:'center',width:70}}>
                                    <TouchableOpacity style={{alignItems:'center'}} activeOpacity={0.8} onPress={()=>{NoDoublePress.onPress(() => {
                                        this.props.navigation.navigate('ErrorPost',{});
                                    })}}>
                                        <View>
                                            <Image style={{width:30/zoomW,height:30/zoomW}} source={require('../../img/phoneError.png')} resizeMode={"contain"}></Image>
                                        </View>
                                        <Text style={{color:'#595959',fontSize:12}}>软件报修</Text>
                                    </TouchableOpacity>

                                </View>

                            </View>

                            <View style={{marginLeft:15,flex:2,backgroundColor:'white', flexDirection: 'row', flexWrap: 'wrap',paddingRight:20/zoomW}}>
                                {/*四乱秩序*/}
                                <TouchableOpacity onPress={()=>{
                                    this.setState({selectType:'四乱秩序'});
                                    try {
                                        Picker.hide();
                                    }catch (e) {

                                    }
                                }} style={{marginRight: 16/zoomW,width: 88/zoomW,height:32/zoomH}}>
                                    <View style={{flex:1,borderColor:this.state.selectType=='四乱秩序'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectType=='四乱秩序'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                        <Text style={this.state.selectType=='四乱秩序'?styles.selectText:styles.unSelectText}>四乱秩序</Text>
                                    </View>
                                </TouchableOpacity>
                                {/*环境卫生*/}
                                <TouchableOpacity onPress={()=>{
                                    this.setState({selectType:'环境卫生'});
                                    try {
                                        Picker.hide();
                                    }catch (e) {

                                    }
                                }} style={{marginRight: 16/zoomW,width: 88/zoomW,height:32/zoomH}}>
                                    <View style={{flex:1,borderColor:this.state.selectType=='环境卫生'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectType=='环境卫生'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                        <Text style={this.state.selectType=='环境卫生'?styles.selectText:styles.unSelectText}>环境卫生</Text>
                                    </View>
                                </TouchableOpacity>
                                {/*设施设备*/}
                                <TouchableOpacity onPress={()=>{this.setState({selectType:'设施设备'});
                                    try {
                                        Picker.hide();
                                    }catch (e) {

                                    }}} style={{marginRight: 16/zoomW,marginTop:20/zoomH,width: 88/zoomW,height:32/zoomH}}>
                                    <View style={{flex:1,borderColor:this.state.selectType=='设施设备'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectType=='设施设备'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                        <Text style={this.state.selectType=='设施设备'?styles.selectText:styles.unSelectText}>设施设备</Text>
                                    </View>
                                </TouchableOpacity>
                                {/*治安事件*/}
                                <TouchableOpacity onPress={()=>{this.setState({selectType:'治安事件'});
                                    try {
                                        Picker.hide();
                                    }catch (e) {

                                    }}} style={{marginRight: 16/zoomW,marginTop:20/zoomH,width: 88/zoomW,height:32/zoomH}}>
                                    <View style={{flex:1,borderColor:this.state.selectType=='治安事件'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectType=='治安事件'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                        <Text style={this.state.selectType=='治安事件'?styles.selectText:styles.unSelectText}>治安事件</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={{backgroundColor:'#e5e5e5',height:1}}></View>
                    </View>

                    {/*车站/车厢*/}
                    <View style={{width:width,height:60/zoomH,flexDirection:'row',alignItems:'center',paddingLeft:22/zoomW}}>
                        <Text style={{color:'#595959',fontSize:14}}>所在位置</Text>
                        <View style={{flex:1,height:60/zoomH,marginLeft:13/zoomW,borderBottomWidth: 1,borderBottomColor: '#e5e5e5',paddingLeft:58/zoomW,flexDirection:'row',alignItems:'center'}}>
                            {/*车厢*/}
                            <TouchableOpacity onPress={()=>{
                                this.setState({selectPosition:'车厢'});
                                try {
                                    Picker.hide();
                                }catch (e) {

                                }
                            }} style={{width: 60/zoomW,height:32/zoomH}}>
                                <View style={{flex:1,borderColor:this.state.selectPosition=='车厢'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectPosition=='车厢'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                    <Text style={this.state.selectPosition=='车厢'?styles.selectText:styles.unSelectText}>车厢</Text>
                                </View>
                            </TouchableOpacity>
                            {/*车站*/}
                            <TouchableOpacity onPress={()=>{this.setState({selectPosition:'车站'})}} style={{width: 60/zoomW,height:32/zoomH,marginLeft:16/zoomW}}>
                                <View style={{flex:1,borderColor:this.state.selectPosition=='车站'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectPosition=='车站'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                    <Text style={this.state.selectPosition=='车站'?styles.selectText:styles.unSelectText}>车站</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/*区分类型的 UI*/}
                    {this.state.selectPosition == '车厢'&&<View>
                        <View style={{width:width,height:60/zoomH,flexDirection:'row',alignItems:'center',paddingLeft:22/zoomW}}>
                            <Text style={{color:'#595959',fontSize:14}}>所在线路</Text>
                            <View style={{flex:1,height:60/zoomH,marginLeft:13/zoomW,borderBottomWidth: 1,borderBottomColor: '#e5e5e5',paddingLeft:58/zoomW,flexDirection:'row',alignItems:'center'}}>
                                <TextInput
                                    style={[styles.inputBox,{}]}
                                    placeholder='输入线路号'
                                    returnKeyType="done"
                                    keyboardType="numeric"
                                    maxLength={2}
                                    underlineColorAndroid="transparent"
                                    placeholderTextColor="#8c8c8c"
                                    value={this.state.trainLineId}
                                    defaultValue={this.state.trainLineId}
                                    onChangeText={(text) => {
                                        this.setState({
                                            trainLineId: text.replace(/[^\-?\d]/g,''),
                                        },function(){
                                            this.testCanPost();
                                        });
                                    }}
                                />
                                {!!this.state.trainLineId&&<Text>号线</Text>}
                            </View>


                        </View>
                        <View style={{width:width,height:60/zoomH,flexDirection:'row',alignItems:'center',paddingLeft:22/zoomW}}>
                            <Text style={{color:'#595959',fontSize:14}}>车厢号</Text>
                            <View style={{flex:1,height:60/zoomH,marginLeft:13/zoomW,paddingLeft:72/zoomW,flexDirection:'row',alignItems:'center'}}>
                                <TextInput
                                    style={[styles.inputBox]}
                                    placeholder='输入车厢号'
                                    returnKeyType="done"
                                    keyboardType="numeric"
                                    underlineColorAndroid="transparent"
                                    placeholderTextColor="#8c8c8c"
                                    value={this.state.trainCarriageId}
                                    defaultValue={this.state.trainCarriageId}
                                    onChangeText={(text) => {
                                        this.setState({
                                            trainCarriageId: text.replace(/[^\-?\d]/g,'')
                                        },function(){
                                            this.testCanPost();
                                        })
                                    }}
                                />
                                {!!this.state.trainCarriageId&&<Text>号车厢</Text>}
                            </View>

                        </View>
                    </View>}


                    {/*车站*/}
                    {this.state.selectPosition == '车站'&&<View style={{}}>
                        <View style={{width:width,height:60/zoomH,flexDirection:'row',alignItems:'center',paddingLeft:22/zoomW}}>
                            <Text style={{color:'#595959',fontSize:14}}>车站</Text>
                            <View style={{flex:1,height:60/zoomH,marginLeft:41/zoomW,borderBottomWidth: 1,borderBottomColor: '#e5e5e5',paddingLeft:57/zoomW,flexDirection:'row',alignItems:'center'}}>
                                <TouchableOpacity style={{height:40/zoomH,flexDirection:'row',justifyContent:'center',alignItems:'center'}} onPress={()=>{

                                    Picker.init({
                                        pickerData: this.state.LineNameList,
                                        pickerTitleText:'',
                                        pickerConfirmBtnText:'确定',
                                        pickerCancelBtnText:'取消',
                                        onPickerConfirm: data => {
                                            console.log(data);
                                            _this.setState({
                                                selectLineName:data[0]
                                            })
                                        },
                                        onPickerCancel: data => {
                                            console.log(data);
                                        },
                                        onPickerSelect: data => {
                                            console.log(data);
                                        }
                                    });
                                    Picker.show();
                                }}>
                                    <Text style={{fontSize:14}}>{this.state.selectLineName}</Text>
                                    <Image style={{marginLeft:5/zoomW,width:6/zoomW,height:4/zoomH}} source={require('../../img/Triangle.png')}/>
                                </TouchableOpacity>
                                <View style={{width:1,height:33/zoomH,backgroundColor:'#e5e5e5',marginLeft:12/zoomW}}></View>
                                <TextInput
                                    style={[styles.inputBox,{marginLeft:12/zoomW}]}
                                    placeholder='请输入车站名'
                                    returnKeyType="done"
                                    underlineColorAndroid="transparent"
                                    placeholderTextColor="#8c8c8c"
                                    value={this.state.stationName}
                                    defaultValue={this.state.stationName}
                                    onChangeText={(text) => { this.setState({
                                        stationName: text
                                    },function(){
                                        this.testCanPost();
                                    })}}
                                    onBlur={()=>{_this.getLineList(this.state.stationName)}}
                                />
                            </View>
                        </View>
                        {/*站内位置*/}
                        <View style={{width:width,height:this.state.isTransferStation?102/zoomH:60/zoomH,flexDirection:'row',paddingLeft:22/zoomW,paddingTop:14/zoomH}}>

                            <Text style={{color:'#595959',fontSize:14,marginTop:10/zoomH}}>站内位置</Text>
                            <View style={{flex:1,height:this.state.isTransferStation?88/zoomH:46/zoomH,marginLeft:13/zoomW,borderBottomWidth: 1,borderBottomColor: '#e5e5e5',paddingLeft:58/zoomW}}>
                                {/*站厅/站台*/}
                                <View style={{flexDirection:'row',marginBottom:12/zoomH}}>
                                    <TouchableOpacity onPress={()=>{this.setState({selectStationLocation:'站厅'})}} style={{width: 90/zoomW,height:32/zoomH}}>
                                        <View style={{flex:1,borderColor:this.state.selectStationLocation=='站厅'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectStationLocation=='站厅'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                            <Text style={this.state.selectStationLocation=='站厅'?styles.selectText:styles.unSelectText}>站厅</Text>
                                        </View>
                                    </TouchableOpacity>

                                    <TouchableOpacity onPress={()=>{this.setState({selectStationLocation:'站台'})}} style={{width: 90/zoomW,height:32/zoomH,marginLeft:16/zoomW}}>
                                        <View style={{flex:1,borderColor:this.state.selectStationLocation=='站台'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectStationLocation=='站台'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                            <Text style={this.state.selectStationLocation=='站台'?styles.selectText:styles.unSelectText}>站台</Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>
                                {/*存在换乘通道*/}
                                {this.state.isTransferStation&&<View>
                                    <TouchableOpacity onPress={()=>{this.setState({selectStationLocation:'换乘通道'})}} style={{width: 90/zoomW,height:32/zoomH}}>
                                        <View style={{flex:1,borderColor:this.state.selectStationLocation=='换乘通道'? '#ff7700':'#d9d9d9',borderWidth: 1,borderRadius: 16,backgroundColor:this.state.selectStationLocation=='换乘通道'? '#ff7700':'transparent',alignItems:'center',justifyContent:'center'}}>
                                            <Text style={this.state.selectStationLocation=='换乘通道'?styles.selectText:styles.unSelectText}>换乘通道</Text>
                                        </View>
                                    </TouchableOpacity>
                                </View>}
                            </View>
                        </View>
                        {/*详细位置(选填)*/}
                        <View style={{width:width,height:60/zoomH,flexDirection:'row',alignItems:'center',paddingLeft:22/zoomW}}>
                            <Text style={{color:'#595959',fontSize:14}}>详细位置</Text>
                            <View style={{height:60/zoomH,marginLeft:13/zoomW,paddingLeft:58/zoomW,flexDirection:'row',alignItems:'center'}}>
                                <TextInput
                                    style={[styles.inputBox,{minWidth: 170/zoomW}]}
                                    placeholder='可详细描述当前位置 (选填)'
                                    returnKeyType="done"
                                    underlineColorAndroid="transparent"
                                    placeholderTextColor="#8c8c8c"
                                    value={this.state.address}
                                    defaultValue={this.state.address}
                                    onChangeText={(text) => { this.setState({ address: text },function(){
                                        this.testCanPost();
                                    })}}
                                />
                            </View>
                        </View>

                    </View>}


                    {/*底部分割线*/}
                    <View style={{alignItems:'flex-end'}}>
                        <View  style={{backgroundColor:'#e5e5e5',height:1,width:width-24}}></View>
                    </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>}
                <Modal animationType={'none'} transparent={true} visible={this.state.showType} onRequestClose={() => {}}>
                    <View  style={[styles.modalBg,{justifyContent:'center',alignItems:'center'}]}>
                        <View style={{width:294/zoomW,height:402/zoomH,backgroundColor:'#fff',borderRadius:4,justifyContent:'center',alignItems:'center',paddingTop:30}}>
                            <Text style={{fontSize:18,color:'#262626',fontWeight: '900'}}>事件类型</Text>
                            <ScrollView style={{flex:1,marginTop:10,paddingBottom: 30}} scrollEventThrottle={200}>
                                <Text style={{padding: 16,color:'#595959',lineHeight:30,paddingBottom: 30}} numberOfLines={1000}>{'治安事件：是指在轨道交通范围内，违反治安管理法律法规、轨道交通管理条例等的行为。如抢劫、斗殴等行为。\n' +
                                '环境卫生：是指在轨道交通范围内，地面、墙面、车厢等脏污、积水等现象。如地面上有打翻的奶茶等。\n' +
                                '四乱秩序：是指在轨道交通范围内，有乞讨卖艺、违法设摊、散发小广告、非法兜售等行为。\n' +
                                '设施设备：是指在轨道交通范围内，有车厢或车站设备故障或运作状态不正常等现象。如车站照明不亮，车厢车载电视黑屏等。'}</Text>
                            </ScrollView>

                        </View>
                        <TouchableOpacity style={{marginTop:40/zoomH,width:50,height:50}} onPress={()=>{
                            this.setState({showType:false})}}>
                            <Image style={{width:50,height:50}} source={require('../../img/closeType.png')}/>
                        </TouchableOpacity>
                    </View>

                </Modal>
            </View>
        );
    }
}

export default withNavigationFocus(eventReport)

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',
    },
    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
    },
    select:{
        borderRadius:4,
        borderWidth:1,
        borderColor:'#4b85e0',
        alignItems:'center',
        justifyContent:'center',
        width:70/zoomW,
        height:22/zoomH
    },
    unSelect:{
        borderRadius:4,
        borderWidth:1,
        borderColor:'#dcdcdc',
        alignItems:'center',
        justifyContent:'center',
        width:70/zoomW,
        height:22/zoomH
    },
    selectText:{
        fontSize:14,
        color:'#fff'
    },
    unSelectText:{
        fontSize:14,
        color:'#000'
    },
    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'
    },
    addressWrap:{
        width:'100%',
        height:44/zoomH,
        backgroundColor:'#fff',
        paddingLeft:15/zoomW,
        paddingRight:15/zoomW,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
    },
    inputBox: {
        textAlign:'left',
        minWidth:100/zoomW,
        fontSize: 13,
        color: '#000',
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    },
});