xntalk / xntalk-rnapp

/**
 * Created by mingming on 8/3/18.
 * 楼层详情
 */
/**
 * Created by mingming on 8/3/18.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    ScrollView,
    TextInput,
    FlatList,
    TouchableHighlight,
    NativeModules,
    ActivityIndicator,
    StatusBar,
    Animated,
    Modal,
    Alert
} from 'react-native';

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

const back = require('../../img/back.png');
const close = require('../../img/close.png');
const ddd = require('../../img/ddd.png');
const eachMore = require('../../img/eachMore.png');
const video = require('../../img/video.png');

export default class FloorDetail extends Component {
    static navigationOptions = ({ navigation, screenProps })=>({
        title:navigation.state.params.name,
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}}>
            <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
                <Image source={back} style={styles.backIcon} resizeMode="contain" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.close:null}>
                <Image source={close} style={styles.closeIcon} resizeMode="contain" />
            </TouchableOpacity>
        </View>),
        headerRight:(<View style={styles.rightTop}>
            {global.isThreadOwner && <TouchableOpacity style={styles.rightIcon} onPress={navigation.state.params?navigation.state.params.showSelect:null}>
                <Image source={ddd} style={styles.moreIcon} resizeMode="contain" />
            </TouchableOpacity>}
        </View>)
    });

    constructor(props) {
        super(props);
        this.state={
            content:{},
            list: [{content: 1111, creatTime: '2018-03-05'},
                {content: 2222, creatTime: '2018-03-06'}],
            loading:false,
            showSelect:false,
            bottom:new Animated.Value(-157)
        }
    }

    componentWillMount(){
        this.setState({
            loading:true
        });
        AppService.getPostDetail({id:this.props.navigation.state.params.id}).then((data) => {
            this.setState({
                loading:false
            });
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else{
                this.setState({
                    content:data.post,
                    placeholder:'回复 '+data.post.postUserName+':'
                })
            }
        })
    }

    componentDidMount(){
        this.props.navigation.setParams({
            name:this.props.navigation.state.params.index + '楼',
            back:()=>{
                this.props.navigation.goBack();
            },
            close:()=>{
                NativeModules.system.navTo("BACK");
            },
            showSelect:()=>{
                this.setState({
                    showSelect:true
                });
                Animated.timing(
                    this.state.bottom,
                    {toValue:0}
                ).start();
            }
        });
    };
    /*关闭选择框*/
    closeSelect(){
        this.setState({
            showSelect:false,
            bottom:new Animated.Value(-157)
        });
    };
    /*删除回复*/
    deleteComment(){
        let _this = this;
        Alert.alert(
            '删除提示',
            '确定要删除此楼吗？',
            [
                {text: '取消', onPress:function(){return}},
                {text: '确定', onPress:() => {
                    this.setState({
                        loading:true
                    });
                    AppService.deleteReplay({id:_this.props.navigation.state.params.id}).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.closeSelect();
                            this.props.navigation.navigate('Detail',{id:_this.props.navigation.state.params.threadId})
                        }
                    })
                }},
            ]
        );
    }

    render() {
        return (
            <View style={{flex:1,display:'flex',alignItems: 'center',flex:1,backgroundColor:'#ffffff'}}>
                <StatusBar barStyle="light-content" />
                <ScrollView style={{flex:1, padding:(15/zoomW)}}>
                    <View style={styles.replay}>
                        <Image source={{uri:this.state.content.postUserAvatarUrl}} style={styles.avatar} resizeMode="cover" />
                        <View style = {styles.nameBox}>
                            <View style ={{display:'flex',flexDirection:'row',alignItems:'center'}}>
                                <Text style={{fontSize:16,color:'#576b95'}}>{this.state.content.postUserName}</Text>
                                {this.state.content.isThreadOwner && <View style={styles.landlord}>
                                    <Text style={{color:'#808080',fontSize:10}}>楼主</Text>
                                </View>}
                            </View>
                        </View>
                    </View>
                    <View style={styles.contentBox}>
                        <Text style={{fontSize:18,color:'#000'}} >{this.state.content.postContent}</Text>
                        <View style = {{flexDirection:'row',marginTop:6/zoomH}}>
                            <Text style = {{fontSize:12,color:'#999'}}>{this.props.navigation.state.params.index}楼</Text>
                            <Text style = {{fontSize:12,color:'#999',marginLeft:10/zoomW}}>{dateChange(Number(this.state.content.postTime))}</Text>
                        </View>
                    </View>
                    <View style = {{display:'flex'}}>
                        {this.state.datas && this.state.datas.map((v, i) => this.itemView(v, i))}
                    </View>
                </ScrollView>
                <View style={styles.bottomInput}>
                    {/*<TextInput multiline={true} style={styles.replayInput} placeholder={this.state.placeholder} underlineColorAndroid="transparent" onChangeText={(value) => {this.changeText(value)}} />*/}
                </View>
                {/*更多*/}
                <Modal animationType={'none'} visible={this.state.showSelect} transparent={true} 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.deleteComment()}>
                                    <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>
        );
    }


    itemView = (item,index) =>{
        return (
            <View key={index} style={{marginTop:20/zoomH}}>
                <Text style={{fontSize:18,color:'#000'}} >{item.content}</Text>
                <View style = {{flexDirection:'row'}}>
                    <Text style = {{fontSize:12,color:'#999'}}>{item.creatTime}</Text>
                    <Text style = {{fontSize:12,color:'#999',marginLeft:20/zoomW}}>回复</Text>
                </View>
            </View>
        )
    }
}



const styles = StyleSheet.create({
    leftIcon:{
        width:(50/zoomW),
        height:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    backIcon:{
        width:(10/zoomW),
        height:(18/zoomH),
        marginLeft:(10/zoomW)
    },
    closeIcon:{
        width:(18/zoomW),
        height:(18/zoomH)
    },
    replay:{
        display:'flex',
        flexDirection:'row',
        alignItems: 'center',
    },
    landlord:{
        width:(30/zoomW),
        height:(15/zoomH),
        borderWidth:1,
        borderColor:'#808080',
        borderStyle:'solid',
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        marginLeft:(5/zoomW),
        borderRadius:2
    },
    replayContent:{
        paddingLeft:(62/zoomW),
        paddingRight:(16/zoomW)
    },
    reMark:{
        backgroundColor:'#f4f4f4',
        padding:(10/zoomW)
    },
    bottomInput:{
        width:'100%',
        height:(44/zoomH),
        borderTopWidth:1,
        borderTopColor:'#ddd',
        borderStyle:'solid',
        backgroundColor:'#fff',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        display:'flex',
        flexDirection:'row'
    },
    replayInput:{
        width:(200/zoomW),
    },

    content:{
        paddingLeft:(25/zoomW),
        paddingRight:(25/zoomW),
        paddingBottom:(15/zoomH)
    },
    author:{
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        marginBottom:(25/zoomH),
        marginLeft:-(10/zoomW)
    },
    avatar:{
        width:(36/zoomW),
        height:(36/zoomW),
        marginRight:(10/zoomW),
        borderRadius:2
    },
    nameBox:{
        width:(295/zoomW),
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between'
    },
    rightTop:{
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
    },
    rightIcon:{
        height:'100%',
        width:(34/zoomW),
        display:'flex',
        justifyContent:'center',
    },
    moreIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    contentBox:{
        paddingTop:15/zoomH,
        paddingBottom:15/zoomH,
        borderBottomWidth:1,
        borderBottomColor:'#eee',
        borderStyle:'solid'
    },
    modalBg:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,.5)',
        display:'flex',
        justifyContent:'flex-end'
    },
    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'
    }
});