xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TextInput,
    ScrollView,
    TouchableOpacity,
    DeviceEventEmitter,
    Modal,
    Animated,
    FlatList,
    StatusBar,
    InteractionManager,
    NativeModules,
    ActivityIndicator
} from 'react-native';
import Carousel from 'react-native-looped-carousel';
import ImagePicker from 'react-native-image-picker';
import {width,height,zoomW,zoomH} from '../../utils/getSize';
import AppService from "../../service/AppService";
const cross = require('../../img/cross.png');
const contact = require('../../img/contact.png');
const bread = require('../../img/bread.png');
const del = require('../../img/close.png');

const rar = require('../../img/rar.png');
const word = require('../../img/word.png');
const pdf = require('../../img/pdf.png');
const ppt = require('../../img/ppt.png');
const txt = require('../../img/txt.png');
const excle = require('../../img/excle.png');
const bmp = require('../../img/bmp.png');
const tif = require('../../img/tif.png');
const tiff = require('../../img/tiff.png');
const defaultFile = require('../../img/defaultFile.png');
const mp3 = require('../../img/mp3.png');
const pic = require('../../img/pic.png');

import {getTopHeight,xnToast,xnBorderWidth,NoDoublePress} from '../../utils/utils';

const photoOptions = {
    title:'上传图片',
    storageOptions:{
        skipBackup:true,
        path:'images',
        waitUntilSaved:true
    },
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'从手机相册选择',
    quality:0.75,
    noData:true,
    mediaType:'photo',
    allowsEditing:false
};
export default class AddNotice extends Component {

    constructor(props) {
        super(props);
        this.state = {
            focus:false,
            sheetList :[],
            imgList:[],
            showSelect:false,
            bottom:new Animated.Value(-157),
            title:'',
            content:'',
            doEmployee:'',
            employeeCount:0,
            canCreate:false,
            delPic:false,
            showView:false,
            currentIndex:0,
            showFlieSelect:false,
            type:'',
            fileType: ['rar', 'word','doc','docx','dotx', 'pdf', 'ppt', 'txt', 'excel','xls','xlsx','xltx', 'xlsm','mp3', 'bmp', 'jpeg', 'jp2', 'gif', 'tif','tiff', 'png', 'exif', 'wbmp', 'mbm', 'jpg', 'heic'],
            fileAvatar: [rar, word,word,word,word, pdf, ppt, txt, excle,excle,excle,excle,excle, mp3,bmp, pic,pic,pic,tif,tiff,pic,pic,pic,pic,pic,pic],
        }

    }

    componentWillMount(){
        this.props.navigation.setParams({
            color:'rgba(0,190,60,.5)',
            opacity:0.5
        });
    };

    componentDidMount(){
        /*this.props.navigation.setParams({
            back:()=>{
                this.props.navigation.goBack();
                global.doEmployee = [];
            }
        });*/
        this.props.navigation.setParams({
            title:'',
            backgroundColor:'white',
            titleColor:'black',
            isBack:true,
            backClick:()=>{this.back()},
        });
        let _this = this;

        this.reloaAddEmployee = DeviceEventEmitter.addListener('reloadSelectEmployee',function(){_this.reloadEmployee()});



    };
    back(){
        this.props.navigation.goBack();
        global.doEmployee = [];
    }
    componentWillUnmount(){
        if(this.reloaAddEmployee){
            this.reloaAddEmployee.remove();
        }

    };
    doPost(){
        let _this = this;
        if(!_this.state.title.replace(/(^\s*)/g,"") ||_this.state.title.replace(/(^\s*)/g,"").length == 0){
        xnToast('请填写标题');
        return;
        }
        if(!_this.state.content.replace(/(^\s*)/g,"") ||_this.state.content.replace(/(^\s*)/g,"") == 0){
        xnToast('请填写内容');
        return;
        }
        if (_this.state.employeeCount == 0)
        {
            xnToast('请选人通知人员');
            return;
        }
        this.setState({
            loading:true
        });
        console.log('post');

        // let userIds =[];
        // for (let i = 0;i<global.doEmployee.length;i++){
        //     userIds.push(global.doEmployee[i].userId);
        // }

        var params = {
            content : this.state.content,
            title : this.state.title,
            userList:global.doEmployee,
            attachmentList:this.state.sheetList,
        };

        AppService.createAnnouncement(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{
                xnToast('新建通知成功！');
                global.doEmployee = [];
                DeviceEventEmitter.emit('reloadHomeList');
                this.props.navigation.navigate('home');
                // console.log("emitreloadHomeList");
                this.props.navigation.goBack();
            }
        }).catch((error) => {
            this.setState({
                loading:false
            });
            xnToast(error)
        })
    }
    /*刷新员工显示*/
    reloadEmployee(){

        for(let j=0;j<global.selectedEmployee.length;j++){
            for(let i=0;i<global.doEmployee.length;i++){
                if(global.doEmployee[i].userId == global.selectedEmployee[j].userId){
                    global.doEmployee.splice(i,1);
                    break;
                }
            }
        }

        global.selectedEmployee = [];
        let count =0;
        if(global.doEmployee.length !=0){
            count = global.doEmployee.length;
        }
        this.setState({
            employeeCount:count,

        });
        this.checkCreate();
    };
    /*判断是否可创建*/
    checkCreate(){
        if(this.state.title.length != 0 && this.state.content.length !=0 &&  global.doEmployee.length != 0){
            // if( global.doEmployee.length != 0){
            this.props.navigation.setParams({
                color:'rgba(0,190,60,1)',
                opacity:0.8
            });
            this.setState({
                canCreate:true
            })
        }
    };
    /*打开和关闭选择图片*/
    selectPic(){
        this.setState({
            showSelect:true,
        });
        Animated.timing(
            this.state.bottom,
            {toValue:0}
        ).start();
    };
    closeSelect(){
        this.setState({
            showSelect:false,
            bottom:new Animated.Value(-157)
        });
    };

    /*模态框取消操作*/
    closeModal(){
        this.setState({
            showFlieSelect:false,
            bottom:new Animated.Value(-(170/zoomH))
        });
    };

    /*选择通知人员*/
    toChoosePerson() {
        this.props.navigation.navigate('addPeople');
    }
    /*显示图片*/
    showPic(index){
        this.setState({
            currentIndex:index
        },function(){
            this.setState({
                showView:true
            });
        })
    };
    /*关闭图片*/
    closePic(){
        this.setState({
            picBottom:new Animated.Value(-(320/zoomH)),
            showView:false
        })
    };
    /*删除图片*/
    delPic(index){
        let list = this.state.sheetList;
        list.splice(index,1);
        this.setState({
            sheetList:[]
        },function(){
            this.setState({
                sheetList:list
            })
        });
    };

    /*打开相册*/
    toAlbum(){
        InteractionManager.runAfterInteractions(() => {
            this.setState({
                showSelect:false,
            });

            ImagePicker.showImagePicker(photoOptions,(response) => {
                if(response.didCancel){}
                else if(response.error){
                    if(__IOS__){
                        if(response.error.indexOf('Photo') != -1){
                            Alert.alert(
                                '获取照片权限失败',
                                '通知正请求获取照片权限用于上传图片,请前往设置页面打开照片权限',
                                [
                                    {text: '确定', onPress: function(){return;}}
                                ],
                            )
                        }else if(response.error.indexOf('Camera') != -1){
                            Alert.alert(
                                '获取相机权限失败',
                                '通知正请求获取相机权限用于上传图片,请前往设置页面打开相机权限',
                                [
                                    {text: '确定', onPress: function(){return;}}
                                ],
                            )
                        }
                    }else {
                        if(response.error.startsWith("Permissions weren't granted")){
                            Alert.alert(
                                '获取照片权限失败',
                                '通知正请求获取照片权限用于上传图片,请前往设置页面打开照片权限',
                                [
                                    {text: '确定', onPress: function(){return;}}
                                ],
                            )
                        }
                    }
                    return;
                }
                else if(response.customButton){}
                else{
                    if(!!response && !!response.uri){//处理操作过程中去后台关闭应用权限
                        let fileName = response.fileName ? response.fileName : response.uri.substring(response.uri.lastIndexOf('/')+1);
                        if(global.isConnected){
                            this.setState({
                                loading:true
                            });
                            AppService.getAccess({name:fileName}).then((data) => {
                                if(data.message){
                                    xnToast(data.message);
                                    return;
                                }
                                if(data.errors.length > 0) {
                                    xnToast(data.errors[0].message);
                                }else{
                                    NativeModules.system.simpleUpload(data.accessKeyId,data.accessKeySecret,data.securityToken,data.info.endpoint,data.info.bucket,fileName,response.path || response.uri).then((res) => {
                                        this.setState({
                                            loading:false
                                        });
                                        let extension = res.substring(res.lastIndexOf('.')+1).toLowerCase();
                                        let params = {
                                            type:'IMAGE',
                                            name:res.substring(res.lastIndexOf('/')+1,res.lastIndexOf('.')),
                                            extension:extension,
                                            storagePath:res,
                                            sourceType:'DIRECT',
                                            attributes:JSON.stringify({index:0})
                                        };
                                        let sheetList = this.state.sheetList;
                                        let imgList = this.state.imgList;
                                        if(imgList.length != 0){
                                            for(let i=0;i<imgList.length;i++){
                                                imgList[i].attributes = JSON.stringify({index:Number(JSON.parse(imgList[i].attributes).index)+1})
                                            }
                                        }
                                        sheetList.unshift(params);
                                        imgList.unshift(params);
                                        this.setState({
                                            sheetList:[]
                                        },function(){
                                            this.setState({
                                                sheetList:sheetList,
                                                imgList:imgList
                                            },function(){
                                                this.checkCreate();
                                            });
                                        });
                                    }).catch((error) => {
                                        this.setState({
                                            loading:false
                                        });
                                        xnToast(error)
                                    })
                                }
                            }).catch((error) => {
                                this.setState({
                                    loading:false
                                });
                                xnToast(error)
                            })
                        }else{
                            xnToast('暂无网络连接，请稍后重试！')
                        }
                    }

                }
            })
        })
    };

    /*查看文件*/
    showFile(item){
        NativeModules.system.downlaodFiles(item.filePath?item.filePath.substring(item.filePath.lastIndexOf('/')+1):item.storagePath.substring(item.storagePath.lastIndexOf('/')+1),item.filePath?item.filePath:item.storagePath,'0');
    };

    //选择文件
    toChooseFile(){
        this.setState({
            showSelect:false,
        });
        this.setState({
            showFlieSelect:true
        });
        Animated.timing(
            this.state.bottom,
            {toValue:(10/zoomH)}
        ).start();
    }

    /*选择云盘文件*/
    selectFromDisk(){
        this.closeModal();
        NativeModules.system.openYunDisk().then((data) => {
            let extension = data.substring(data.lastIndexOf('.')+1).toLowerCase();
            let params = {
                type:'OTHER',
                name:data.substring(data.lastIndexOf('/')+1,data.lastIndexOf('.')),
                extension:extension,
                storagePath:data,
                sourceType:'DIRECT'
            };
            let sheetList = this.state.sheetList;
            sheetList.unshift(params);
            this.setState({
                sheetList:[]
            },function(){
                this.setState({
                    sheetList:sheetList
                },function(){
                    this.checkCreate();
                });
            });
        })
    };

    /*本地文件上传*/
    upLocalFile(){
        this.closeModal();
        InteractionManager.runAfterInteractions(() => {
            const FilePickerManager = require('NativeModules').FilePickerManager;
            FilePickerManager.showFilePicker(null,(response) => {
                if(response.didCancel){}
                else if(response.error){}
                else{
                    if(!!response && !!response.path ){//处理中途切换去关闭应用权限的问题
                        let fileName = response.path.substring(response.path.lastIndexOf('/')+1);
                        if(global.isConnected){
                            this.setState({
                                loading:true
                            });
                            AppService.getAccess({name:fileName}).then((data) => {
                                if(data.message){
                                    xnToast(data.message);
                                    return;
                                }
                                if(data.errors.length > 0) {
                                    xnToast(data.errors[0].message);
                                }else{
                                    NativeModules.system.simpleUpload(data.accessKeyId,data.accessKeySecret,data.securityToken,data.info.endpoint,data.info.bucket,fileName,response.path).then((res) => {
                                        this.setState({
                                            loading:false
                                        });
                                        let extension = res.substring(res.lastIndexOf('.')+1).toLowerCase();
                                        let params = {
                                            type:'OTHER',
                                            name:res.substring(res.lastIndexOf('/')+1,res.lastIndexOf('.')),
                                            extension:extension,
                                            storagePath:res,
                                        };
                                        let sheetList = this.state.sheetList;
                                        sheetList.unshift(params);
                                        this.setState({
                                            sheetList:[]
                                        },function(){
                                            this.setState({
                                                sheetList:sheetList
                                            },function(){
                                                this.checkCreate();
                                            });
                                        });
                                    }).catch((error) => {
                                        this.setState({
                                            loading:false
                                        });
                                        xnToast(error)
                                    })
                                }
                            }).catch((error) => {
                                this.setState({
                                    loading:false
                                });
                                xnToast(error)
                            })
                        }else{
                            xnToast('暂无网络连接，请稍后重试！')
                        }

                    }else {
                        xnToast('请在设置中开启相机权限！')
                    }
                }
            })
        })
    };


    /* 渲染图片列表*/
    keyExtractor = (item,index) => index;
    renderItem = ({item,index}) => (
        item.type == 'IMAGE' ?
            <TouchableOpacity activeOpacity={0.8} onPress={() => NoDoublePress.onPress(() => this.showPic(Number(JSON.parse(item.attributes).index)))}>
                <View style={styles.attachItem}>
                    <Image source={{uri:item.filePath ? item.filePath+'?x-oss-process=image/resize,w_500':item.storagePath+'?x-oss-process=image/resize,w_500'}} style={{width:(64/zoomH),height:(64/zoomH),borderRadius:7}} resizeMode="contain" />
                    <TouchableOpacity style={styles.closeBtn} onPress={() => NoDoublePress.onPress(() => {this.delPic(index)})}>
                        <Image source={del} style={{width:(8/zoomH),height:(8/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
            :
            <TouchableOpacity activeOpacity={0.8} onPress={() => NoDoublePress.onPress(() => this.showFile(item))}>
                <View style={styles.attachItem}>
                    <Image source={this.state.fileType.indexOf(item.extension) != -1 ? this.state.fileAvatar[this.state.fileType.indexOf(item.extension)]:defaultFile} style={{width:(64/zoomH),height:(64/zoomH),borderRadius:7}} resizeMode="contain" />
                    <TouchableOpacity style={styles.closeBtn} onPress={() => NoDoublePress.onPress(() => {this.delPic(index)})}>
                        <Image source={del} style={{width:(8/zoomH),height:(8/zoomH)}} resizeMode="contain" />
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
    );
    render(){
        return(
            <View style={styles.background}>
                <StatusBar
                    backgroundColor={'#FFFFFF'}
                    barStyle={"dark-content"}
                    networkActivityIndicatorVisible
                />

                <ScrollView keyboardShouldPersistTaps='always'>
                    <View style={{paddingBottom:(15/zoomH),borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:'#eee',borderStyle:'solid'}}>
                        <View style={styles.postTitle}>
                            <TextInput underlineColorAndroid="transparent" autoFocus={false} style={styles.titleText}
                                       placeholder='公告标题(必填）'  placeholderTextColor="#999999"  onChangeText={(value) => {this.setState({title:value})}}  maxLength={40} />
                        </View>
                        <View style={styles.content}>
                            <TextInput ref="text" blurOnSubmit = {false} underlineColorAndroid="transparent" multiline={true} style={styles.contentText} placeholder='输入内容' onChangeText={(value) => {this.setState({content:value})}} maxLength={1000}  />
                            <View style={styles.addImg}>
                                <TouchableOpacity activeOpacity={0.6} style={styles.contentImg} onPress={() => this.selectPic()}>
                                    <Image style={{width:(20/zoomW),height:(20/zoomW)}} source={cross} resizeMode="contain" />
                                </TouchableOpacity>
                                {this.state.sheetList.length != 0 && <View style={{display:'flex',width:width-20/zoomW,paddingLeft:(15/zoomW),paddingRight:(15/zoomW)}}>
                                    <FlatList showsHorizontalScrollIndicator={false} horizontal={true} keyExtractor={this.keyExtractor} data={this.state.sheetList} renderItem={this.renderItem} />
                                </View>}
                            </View>
                        </View>
                        <TouchableOpacity activeOpacity={0.6} style={styles.selectItem} onPress={()=>this.toChoosePerson()}>
                            <View style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
                                <Image source={contact} style={styles.plateTip} resizeMode="contain" />
                                <Text style={{fontSize:16,color:'#000000'}}>通知人员</Text>
                            </View>
                            <View style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
                                <Text style={{fontSize:16,color:'#000000'}}>{this.state.employeeCount}</Text>
                                <Image source={bread} style={styles.rightArrow} resizeMode="contain" />
                            </View>
                        </TouchableOpacity>
                    </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={{marginLeft:(20/zoomW),marginRight:(20/zoomW),marginBottom:7,backgroundColor:'#ffffff', borderRadius:12,borderWidth:1, borderColor:'#ddd', borderStyle:'solid'}}>
                                <TouchableOpacity activeOpacity={.9} onPress={() => this.toAlbum()}>
                                    <View style={styles.selectModal}>
                                        <Text style={{color:'#047BFF',fontSize:21}}>图片</Text>
                                    </View>
                                </TouchableOpacity>
                                <Text style = {{height:xnBorderWidth(), backgroundColor:'#eee'}}></Text>
                                <TouchableOpacity activeOpacity={.9} onPress={() => this.toChooseFile()}>
                                    <View style={styles.selectModal}>
                                        <Text style={{color:'#047BFF',fontSize:21}}>文件</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <TouchableOpacity style={{marginLeft:(20/zoomW),marginRight:(20/zoomW),marginBottom:7,backgroundColor:'#ffffff', borderRadius:12,borderWidth:1, borderColor:'#ddd', borderStyle:'solid'}}
                                              activeOpacity={.9} onPress={() => this.closeSelect()}>
                                <View style={styles.selectModal}>
                                    <Text style={{color:'#047BFF',fontSize:21}}>取消</Text>
                                </View>
                            </TouchableOpacity>
                        </Animated.View>
                    </TouchableOpacity>
                </Modal>
                <Modal animationType={'none'} visible={this.state.showView} transparent={true} onRequestClose={() => {}}>
                    <View style={styles.viewBg}>
                        <View style={{width:width,height:getTopHeight(),display:'flex',flexDirection:'row',alignItems:'center',position:'absolute',top:0}}>
                            <TouchableOpacity activeOpacity={0.8} style={{height:'100%',display:'flex',justifyContent:'center',paddingLeft:(15/zoomW),paddingRight:(15/zoomW)}} onPress={() => this.closePic()}>
                                <Image source={del} style={{width:(12/zoomW),height:(12/zoomH)}} resizeMode="contain" />
                            </TouchableOpacity>
                            <View style={{flex:1,display:'flex',justifyContent:'center',alignItems:'center'}}>
                                <Text style={{fontSize:16,color:'#fff'}}>{this.state.currentIndex + 1}/{this.state.imgList.length}</Text>
                            </View>
                            <TouchableOpacity activeOpacity={1} style={{height:'100%',display:'flex',justifyContent:'center',paddingLeft:(15/zoomW),paddingRight:(15/zoomW)}} onPress={() => {Animated.timing(this.state.picBottom,{toValue:0}).start();}}>
                                {/*{this.props.navigation.state.params.from != 'addTarget' && <Image source={ddd} style={{width:(30/zoomW),height:(20/zoomH)}} resizeMode="contain" />}*/}
                                <View style={{width:(30/zoomW),height:(20/zoomH)}} />
                            </TouchableOpacity>
                        </View>
                        <Carousel
                            style={{height:height-(getTopHeight()),width:width,paddingBottom:getTopHeight()}}
                            bullets={false}
                            isLooped={false}
                            autoplay={false}
                            currentPage={this.state.currentIndex}
                            onAnimateNextPage={(index) => this.setState({currentIndex:index})}
                        >
                            {this.state.imgList.map((item,index) =>
                                <TouchableOpacity activeOpacity={1} key={index} style={{width:width,height:(height-2*(getTopHeight())),display:'flex',justifyContent:'center',alignItems:'center'}}>
                                    <Image source={{uri:item.filePath ? item.filePath+'?x-oss-process=image/resize,w_500':item.storagePath+'?x-oss-process=image/resize,w_500'}} style={{width:width,height:height-(getTopHeight())}} resizeMode="contain" />
                                </TouchableOpacity>
                            )}
                        </Carousel>
                    </View>
                </Modal>
                <Modal animationType={'none'} visible={this.state.showFlieSelect} transparent={true} onRequestClose={() => {}}>
                    <View style={styles.modalBg}>
                        <Animated.View style={[styles.selectContent,{bottom:this.state.bottom}]}>
                            <View  style={{marginLeft:(20/zoomW),marginRight:(20/zoomW),marginBottom:7,backgroundColor:'#ffffff', borderRadius:12,borderWidth:1, borderColor:'#ddd', borderStyle:'solid'}}>
                                {__ANDROID__ && <TouchableOpacity activeOpacity={0.8} style={styles.fileSettingItem} onPress={() => this.upLocalFile()}>
                                    <Text style={{fontSize:18,color:'#000'}}>上传本机文件</Text>
                                </TouchableOpacity>}
                                <TouchableOpacity activeOpacity={0.8} style={[styles.fileSettingItem,{borderBottomWidth:0}]} onPress={() => this.selectFromDisk()}>
                                    <Text style={{fontSize:18,color:'#000'}}>从云盘选择</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={{marginLeft:(20/zoomW),marginRight:(20/zoomW),marginBottom:7,backgroundColor:'#ffffff', borderRadius:12,borderWidth:1, borderColor:'#ddd', borderStyle:'solid'}}>
                                <TouchableOpacity activeOpacity={0.8} style={[styles.fileSettingItem,{borderBottomWidth:0}]} onPress={() => NoDoublePress.onPress(() => {this.closeModal()})}>
                                    <Text style={{fontSize:18,color:'#000'}}>取消</Text>
                                </TouchableOpacity>
                            </View>
                        </Animated.View>
                    </View>
                </Modal>
                {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>}
                <TouchableOpacity activeOpacity={0.6} style={{flex: 1,display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'center',position:"absolute",bottom:0,width:"100%",backgroundColor:"rgba(40,195,90,0.50)",height:(48/zoomH)}}
                                  onPress={()=>this.doPost()}>
                    <View>
                        <Text style={{fontSize:16,color:'#FFFFFF'}}>发布</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    topIcon:{
        paddingLeft:(10/zoomW),
        paddingRight:(10/zoomW),
        height:'100%',
        display:'flex',
        alignItems:'center'
    },
    background:{
        width:'100%',
        height:'100%',
        backgroundColor:'#f3f3f3'
    },
    postTitle:{
        width:'100%',
        height:(60/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid',
        paddingLeft:(17/zoomW),
        paddingRight:(17/zoomW),
        backgroundColor:'#fff'
    },
    targetTitle:{
        width:width,
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderStyle:'solid',
        borderColor:'#eee',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        display:'flex',
        flexDirection:'row'
    },
    titleText:{
        flex:1,
        padding:0,
        paddingRight:(10/zoomW),
        color:'#333',
        fontSize:18,
    },
    addImg:{
        width:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        marginBottom:(10/zoomH)
    },
    contentImg:{
        width:(64/zoomH),
        height:(64/zoomH),
        borderWidth:1,
        borderColor:'#ddd',
        borderStyle:'solid',
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    imgItem:{
        width:(80/zoomW),
        height:(80/zoomW),
        marginRight:(5/zoomW),
        marginBottom:(10/zoomH)
    },
    plateTip:{
        width:(20/zoomW),
        height:(20/zoomW),
        marginRight:(10/zoomW)
    },
    rightArrow:{
        width:(10/zoomW),
        height:(10/zoomW),
        marginLeft:(10/zoomW)
    },
    modalBg:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,.5)'
    },
    content:{
        width:'100%',
        display:'flex',
        backgroundColor:'#fff',
        paddingLeft:(17/zoomW),
        paddingRight:(17/zoomW),
    },
    contentText:{
        width:'100%',
        height:(245/zoomH),
        fontSize:16,
        color:'#333',
        textAlignVertical:'top',
        padding:0,
        paddingTop:(10/zoomH),
        paddingBottom:(10/zoomH)
    },
    selectItem:{
        width:'100%',
        height:(44/zoomH),
        backgroundColor:'#ffffff',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        marginTop:(10/zoomW),
        paddingLeft:(17/zoomW),
        paddingRight:(17/zoomW),
        justifyContent:'space-between',
        alignItems:'center'
    },
    selectContent:{
        width:'100%',
        position:'absolute'
    },
    selectModal:{
        width:'100%',
        height:50,
        display:'flex',
        alignItems:'center',
        justifyContent:'center',
    },
    attachItem:{
        width:(65/zoomH),
        height:(65/zoomH),
        borderStyle:'solid',
        borderColor:'#ddd',
        borderWidth:StyleSheet.hairlineWidth,
        marginRight:(15/zoomW)
    },
    closeBtn:{
        width:(14/zoomH),
        height:(14/zoomH),
        backgroundColor:'rgba(0,0,0,.2)',
        borderBottomLeftRadius:4,
        position:'absolute',
        top:0,
        right:0,
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    viewBg:{
        width:width,
        height:height,
        backgroundColor:'#000',
        display:'flex',
        justifyContent:'flex-end'
    },
    picItem:{
        width:'100%',
        height:(50/zoomH),
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        borderStyle:'solid',
        borderBottomColor:'#eee',
        borderBottomWidth:StyleSheet.hairlineWidth
    },
    fileSettingItem:{
        width:'100%',
        height:(50/zoomH),
        borderStyle:'solid',
        borderBottomColor:'#eee',
        borderBottomWidth:StyleSheet.hairlineWidth,
        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'
    },
    loadingBg:{
        position:'absolute',
        top:0,
        width:'100%',
        height:'100%',
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
})