customer / shanghai-railway-rnapp

import React, {Component} from "react";
import {
    DeviceEventEmitter,
    FlatList,
    NoDoublePress,
    Image,
    StyleSheet,
    ActivityIndicator,
    Text,
    TouchableOpacity,
    View,
    NativeModules,
    InteractionManager,
    Platform,
    Alert
} from "react-native";
import {zoomH, zoomW,height,width} from "../../utils/getSize";
import {dateToMsgTime, isIphoneX,getHomeColor, xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";
import RichText from "../../widget/RichText";
import CommentInput from "../detail/CommentInput"
const vIcon = require('../../img/v.png');
const prise = require('../../img/prise.png');
const prised = require('../../img/prised.png');
const emj = require('../../img/bq_q.png');
const pageSize = 20;

const defaultIcon = require("../../img/defaultIcon.png");


export default class AtlasComment extends Component {
    constructor(props) {
        super(props);
        this.state = {
            commentList:[],
            loading:false,
            pageNum:1,
            allData:0,
            loadMore:false,
            isShowCommentInput:false // 是否显示CommentInput输入框组件
        };
    }

    static navigationOptions = ({ navigation, screenProps }) => ({
        headerTitle: "评论列表",
        headerLeft: (
            <TouchableOpacity activeOpacity={1} style={{flexDirection:'row',height:'100%',width:'100%'}}
                              onPress={() =>{
                                  DeviceEventEmitter.emit("closeCommentInputIos");}}>
                <View style={{ width: 375 / 2 / zoomW, height: '100%', flexDirection: 'row' }}>
                    <TouchableOpacity
                        style={{
                            flexDirection: "column",
                            justifyContent: "center",
                            paddingRight: 15,
                            paddingLeft: 10
                        }}
                        onPress={() => {
                            DeviceEventEmitter.emit("closeCommentInputIos");
                            navigation.goBack();
                        }}>
                        <Image
                            source={require("../../img/loadBack.png")}
                            resizeMode="contain"
                        />
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
        ),
        headerRight: (
            <TouchableOpacity activeOpacity={1} style={{flexDirection:'row',height:'100%',width:'100%'}}
                              onPress={() =>  {
                                  DeviceEventEmitter.emit("closeCommentInputIos");}}>
                <View style={{ width: 375 / 2 / zoomW, height: '100%', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }}>
                    <TouchableOpacity
                        style={{
                            flexDirection: "column",
                            justifyContent: "center",
                            paddingRight: 15,
                            paddingLeft: 10
                        }}
                        onPress={() => {
                            DeviceEventEmitter.emit("closeCommentInputIos");}}
                    >
                        <Image
                            style={{ width: 20 / zoomW, height: 20 / zoomW }}
                            resizeMode="contain"
                        />
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
        )
    });

    componentDidMount() {
        let _this = this;
        //设置头部
        this.props.navigation.setParams({
        });

        //重新获取信息
        this.reGetThreadDetailInfo = DeviceEventEmitter.addListener('refreshAtlasComment',function(){
            _this.setState({
                data: [],
                commentList:[],
                loadMore:false,
            })
            _this.getList();
        });

        this.refreshReplyList = DeviceEventEmitter.addListener('atlasComment',function(){
            _this.setState({
                commentList:[],
                allData:0,
                loadMore:false,
            },function () {
                _this.getList();
            })
        });

        // 关闭CommentInput输入框组件的通知
        this.closeCommentInputIos = DeviceEventEmitter.addListener('closeCommentInputIos',function(){
            console.log("closeCommentInputIos");
            _this.setState({
                isShowCommentInput:false,
            })
        });
    }

    componentWillUnmount() {
        if (this.reGetThreadDetailInfo != null) {
            this.reGetThreadDetailInfo.remove();
        }
        if (this.refreshReplyList) {
            this.refreshReplyList.remove();
        }
        if (this.closeCommentInputIos != null) {
            this.closeCommentInputIos.remove();
        }
    }

    componentWillMount() {
        this.getList();
    }

    getList() {
        // 没有网, return
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        // 定义参数
        let data = this.props.navigation.state.params.mainData;
        let length =  this.state.commentList.length;

        if (length % pageSize == 0 && !this.state.loadMore) {
            let params = {
                threadId:data.id,//帖子id
                isActive:true,
                isComment:true,
                pageNumber:length/pageSize+1,
                pageSize : pageSize,
            };
            this.setState({
                loadMore: true,
                loading:true,
            });
            // 调用接口
            AppService.queryCommentAndReply(params).then((data) => {
                this.setState({
                    loadMore: false,
                    loading:false,
                });
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    if (length + data.result.length > data.totalCount) {
                        return;
                    }
                    this.setState({
                        commentList:this.state.commentList.concat(data.result),
                        allData:data.totalCount,
                    })
                }
            }).catch((error) => {
                xnToast(error)

            })
        }


    }

    toComment=(data)=> {
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            this.setState({
                loading:false,
            });
            return;
        }
        let mainData = this.props.navigation.state.params.mainData;

        let params = {
            forumId:mainData.forumId,//社区id
            boardId:mainData.boardId,//板块id
            threadId:mainData.id,//帖子Id
            floor:1,//楼层，评论的楼层为1，回复的楼层为父级楼层+1
            userId:global.userId,//评论/回复者ID
            userName:global.userName,//评论/回复者的名字
            content: data.content,//评论/回复内容
            richContent:data.richContent,//评论/回复富文本内容
            attachmentList:data.attachmentList,//附件集合
            topicHistoryList: data.tList,//引用的话题列表
            userList: data.aList,//引用的话题列表
            forward: data.isForward,//是否同时转发
        };
        console.log(params);

        AppService.creatCommentOrReply(params).then((data) => {

            if (data.message) {
                xnToast(data.message);
                this.setState({
                    loading:false,
                });
                return;
            }
            if (data.errors.length > 0) {
                this.setState({
                    loading:false,
                });
                xnToast(data.errors[0].message);
            } else {
                xnToast("已评论");
                // 发送通知
                DeviceEventEmitter.emit("refComment");
                DeviceEventEmitter.emit("refreshCommentNum");
                DeviceEventEmitter.emit("reGetThreadDetailInfo");
                this.setState({
                    commentList:[],
                    loadMore:false,
                }, () => {
                    this.getList();
                });
                if(this.refs.CommentInput != undefined){
                    InteractionManager.runAfterInteractions(() => {
                        this.refs.CommentInput.reset();
                    });
                }
            }
        }).catch((error) => {
            xnToast(error)
        })

    };




    toCommentReply (id){
        let _this = this;
        _this.props.navigation.navigate("CommentReply",{id:id,hideForward:true,from:'atlas'})
    }

    //跳到个人中心页面
    toPersonal = (id) => {
        let _this = this;

        if (id == global.userId){
            //自己
            _this.props.navigation.navigate("MyPage",{id:id});
            return;
        }
        _this.props.navigation.navigate('PersonalHomePage',{'userId':id});
    }

    //点赞
    _starClick (isLike,item){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        if(this.state.loading){
            //正在操作
            return;
        }
        let mainData = this.props.navigation.state.params.mainData;
        let _this = this;
        _this.setState({
            loading:true,
        });
        //点赞
        if (isLike){

            let params = {
                forumId:mainData.forumId,//社区id
                boardId:mainData.boardId,//版块ID
                targetType: 1,//点赞类型: 点赞对象的类型 0：帖子点赞 1：评论点 2：回复点赞 3:转发点赞
                targetId:item.id,//点赞对象ID
                likeUserId:global.userId,//点赞用户ID
                likeUserName: global.userName,//点赞用户名字
            };
            console.log(params);

            AppService.like(params).then((data) => {
                console.log(data);
                if (data.message) {
                    _this.setState({
                        loading:false,
                    });
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    _this.setState({
                        loading:false,
                    });
                    xnToast(data.errors[0].message);
                } else {
                    xnToast('点赞成功');
                    _this.setState({
                        loading:false,
                    });
                    _this.state.commentList = [];
                    _this.getList();

                    // //通知点赞列表刷新
                    // DeviceEventEmitter.emit('refreshPriseList');
                    // DeviceEventEmitter.emit('refreshHomeList');
                }
            }).catch((error) => {
                _this.setState({
                    loading:false,
                });
                xnToast(error)
            })
        }else {//取消点赞
            let params = {
                id: item.threadLike.id//点赞id
            };
            console.log(params);

            AppService.cancelLike(params).then((data) => {
                console.log(data);
                if (data.message) {
                    _this.setState({
                        loading:false,
                    });
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    _this.setState({
                        loading:false,
                    });
                    xnToast(data.errors[0].message);
                } else {
                    xnToast('已取消点赞');
                    _this.setState({
                        loading:false,
                    });
                    _this.state.commentList = [];
                    _this.getList();
                    // //通知点赞列表刷新
                    // DeviceEventEmitter.emit('refreshPriseList');
                    // DeviceEventEmitter.emit('refreshHomeList');
                }
            }).catch((error) => {
                _this.setState({
                    loading:false,
                });
                xnToast(error)
            })
        }
    };

    //删除评论
    deleteComment(item){
        let _this = this;
        Alert.alert(
            '注意',
            "是否继续删除当前评论及其回复",
            [
                {text: '取消', onPress: () => console.log('OK Pressed!')},
                {text: '确定', onPress: () => {
                        if (!global.isConnected){
                            xnToast('暂无网络连接，请稍后重试！');
                            return;
                        }
                        let params = {
                            id:item.id,
                            sourceFrom:'APP'
                        };
                        console.log(params);
                        AppService.deleteCommentAndReplyById(params).then((data) => {
                            console.log(data);
                            if (data.message) {
                                xnToast(data.message);
                                return;
                            }
                            if (data.errors.length > 0) {
                                xnToast(data.errors[0].message);
                            } else {
                                xnToast('删除成功');
                                // 发送通知
                                DeviceEventEmitter.emit("refComment");
                                DeviceEventEmitter.emit("refreshCommentNum");
                                DeviceEventEmitter.emit("reGetThreadDetailInfo");
                                // todo 通知列表刷新（列表刷新难点，分页的时候怎么刷？）
                                this.setState({
                                    commentList:[],
                                    loadMore:false,
                                },function () {
                                    _this.getList();
                                })
                            }
                        }).catch((error) => {
                            xnToast(error)
                        })
                    }}
            ]
        );
    }

    //渲染item
    keyExtractor = (item,index) => index;
    renderItem({item,index}){
        return (
            <TouchableOpacity style={styles.itemBackground} activeOpacity={1} onPress = {()=>{this.toCommentReply(item.id)}}>
                <TouchableOpacity style={styles.commonAvatar} onPress = {()=>{this.toPersonal(item.userExtend.id)}}>
                    <Image  style={styles.commonAvatar}
                            source={!!item.userExtend && !!item.userExtend.avatar?{uri: item.userExtend.avatar +'?x-oss-process=image/resize,w_100'} :defaultIcon}
                            resizeMode="cover" />
                    {!!item.userExtend && !!item.userExtend.isAuthented &&<Image  style={styles.commonAvatarV} source={vIcon} resizeMode="cover" />}
                </TouchableOpacity>
                <View style = {{marginLeft:8/zoomW,flex:1}} >
                    <View style = {{flex:1,flexDirection:'row',justifyContent:'space-between'}}>
                        <Text style = {styles.userNameBlue}>{item.userName}</Text>
                        <TouchableOpacity style = {{flexDirection:'row',alignItems:'center'}}
                                          activeOpacity={1}
                                          onPress = {() =>{this._starClick(!!item.threadLike && item.threadLike.isActive?false:true,item)}}>
                            <Image style={{width:14/zoomH,height:14/zoomH}} source={!!item.threadLike && item.threadLike.isActive? prised:prise} resizeMode="cover"  ></Image>
                            {!! item.threadCommentReplyStatistics && item.threadCommentReplyStatistics.likeNum > 0
                            && <Text style = {!!item.threadLike && item.threadLike.isActive?styles.textPrised:styles.textPrise}>{item.threadCommentReplyStatistics.likeNum}</Text>}

                        </TouchableOpacity>
                    </View>
                    {!!item.userExtend && !!item.userExtend.identity && <Text style = {styles.userIdentity}>{!!item.userExtend && !!item.userExtend.identity?item.userExtend.identity:''}</Text>}
                    <View style = {{marginTop:8/zoomH}}>
                        <RichText
                            item={item.richContent}
                            nav={this.props.navigation}
                            clearNumberOfLine  ={true}
                        />
                    </View>

                    {!! item.attachmentList && item.attachmentList.length>0 &&
                    <TouchableOpacity style={{width:'55%',height:100,marginTop:2/zoomH,justifyContent:'center'}} activeOpacity={1}
                                      onPress = {()=>{ NativeModules.system.showPhotoWithUrl(item.attachmentList[0].filePath)}}>
                        <Image style={{width:'55%',height:100,marginTop:10/zoomH,justifyContent:'center'}}
                               source={{uri:item.attachmentList[0].filePath+'?x-oss-process=image/resize,w_300' }}></Image>
                    </TouchableOpacity>
                    }
                    <View style = {{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center',marginTop:8/zoomH}}>
                        <View style = {{flexDirection:'row',alignItems:'center'}}>
                            <Text style = {styles.time}>{dateToMsgTime(item.creationTime)} </Text>
                            <View style = {{backgroundColor:'rgba(0,0,0,0.45)',height:2,width:2,marginLeft:3,marginRight:5}}></View>
                            {(item.threadCommentReplyStatistics.replyNum||'')!=''?
                                <View style = {styles.reply}>
                                    <Text style = {styles.time}>{(item.threadCommentReplyStatistics.replyNum||'') + '回复'}</Text>
                                </View> :
                                <Text style = {styles.time}>回复</Text>}
                        </View>

                        {item.userId == global.userId &&
                        <TouchableOpacity onPress={() =>  this.deleteComment(item)}>
                            <Text style = {styles.time}>删除</Text>
                        </TouchableOpacity>}

                    </View>


                </View>
            </TouchableOpacity>
        );
    }
    //写评论
    commentClick (){
        if (Platform.OS == 'ios'){
            this.setState({
                isShowCommentInput:true
            });
        }
        InteractionManager.runAfterInteractions(() => {
            this.refs.CommentInput.showInputLayout();
        });

    };
    render() {
        let _this = this;
        return (
            <View style={{flex:1,display: "flex",alignItems: "center",justifyContent:"flex-end"}}>

                <View style = {{flex:1,backgroundColor:'#fff',width:'100%'}}>
                    <FlatList
                        style = {{flex:1,backgroundColor:'#fff',width:'100%'}}
                        refreshing={false}
                        keyExtractor={this.keyExtractor}
                        data={this.state.commentList}
                        renderItem={this.renderItem.bind(this)}
                        onEndReachedThreshold={0.01}
                        onEndReached={() => {
                            _this.getList();

                        }}
                        showsVerticalScrollIndicator={false}
                        onRefresh={() => {
                            this.setState(
                                {
                                    data: [],
                                    commentList:[],
                                    loadMore:false,
                                },
                                function() {
                                    _this.getList();
                                }
                            );
                        }}

                    />
                    {/*局部loading*/}
                    { this.state.loading && (
                        <View style={styles.loadingBox}>
                            <ActivityIndicator size="large" color="#fff" />
                            <Text
                                style={{ fontSize: 16, color: "#fff", marginTop: 6 / zoomH }}
                            >
                                加载中...
                            </Text>
                        </View>
                    )}


                </View>



                {!this.state.isShowCommentInput && <View>
                    <View style = {styles.inputBg} >
                        <TouchableOpacity style = {styles.greyRadiusBg}  onPress = {()=>{this.commentClick()}}>
                            <Text style = {{fontSize:14,color:'gray',marginLeft:14/zoomW}}>写评论...</Text>
                            <Image style={{width:20/zoomW,height:20/zoomW,marginRight:8/zoomW}} source={emj} resizeMode="cover"  ></Image>
                        </TouchableOpacity>
                        {/*点赞*/}

                    </View>

                </View>}

                {Platform.OS == 'ios' && this.state.isShowCommentInput &&
                <CommentInput  ref = "CommentInput"
                               hideForward = {true}
                               uploadCallback = {(isLoading) =>{this.setState({loading:isLoading})}}
                               callback = { (data)=>{this.toComment(data)}}
                               nav = {this.props.navigation}
                               hasNavHeight = {true}
                />}
                {Platform.OS == 'android' &&
                <CommentInput  ref = "CommentInput"
                               hideForward = {true}
                               uploadCallback = {(isLoading) =>{this.setState({loading:isLoading})}}
                               callback = { (data)=>{this.toComment(data)}}
                               nav = {this.props.navigation}
                               hasNavHeight = {true}
                />}
            </View>
        );
    }
}
const styles = StyleSheet.create({
    greyRadiusBg:{
        flex:1,flexDirection:'row',height:32/zoomH,justifyContent:'space-between',alignItems:'center',borderRadius:19/zoomW,backgroundColor:'#eeeeee'
    },

    inputBg:{
        width:'100%',height:isIphoneX()?(44/zoomH+34):44/zoomH, flexDirection:'row',alignItems:'center',backgroundColor:'#fff',
        justifyContent:'space-between',paddingLeft:40/zoomW,paddingRight:40/zoomW,paddingBottom:isIphoneX()?34:0, borderColor: '#eee',
        borderWidth: StyleSheet.hairlineWidth,
    },
    tabWrap: {
        width: '100%',
        height: 44/zoomH,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent:'space-between',

    },
    itemTabWrapBg:{
        height:'100%',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    tabMenuActiveWord: {
        fontSize: 14,
        color: global.homeColor,
    },
    tabMenuWord: {
        fontSize: 14,
        color: 'rgba(0,0,0,0.45)',
    },
    tabBtn: {
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: 15,
        paddingRight: 15,
        marginRight: 5,
    },
    lineStyle: {
        width: 25,
        height: 2,
        position:'absolute',
        backgroundColor: global.homeColor,
        bottom: 0,
    },
    itemBackground:{
        width:'100%',
        flex:1,
        padding: 15/zoomH,
        flexDirection :'row',
    },
    commonAvatar:{
        width:36/zoomH,
        height:36/zoomH,
        borderRadius:18/zoomH
    },
    commonAvatarV:{
        width:10/zoomH,
        height:10/zoomH,
        position:'absolute',
        right:1/zoomW,
        bottom:1/zoomW
    },
    userNameBlue:{
        fontSize: 14,
        color:'#576B95',
    },
    userIdentity:{
        fontSize: 12,
        color:'#c3c3c3'
    },
    content:{
        fontSize: 16,
        color:'rgba(0,0,0,0.85)',
        marginTop:10/zoomH
    },
    time:{
        fontSize: 12,
        color:'rgba(0,0,0,0.45)',
    },
    reply:{
        alignItems:'center',
        justifyContent:'center',
        paddingLeft:10,
        paddingRight:10,
        paddingTop:1,
        paddingBottom:1,
        backgroundColor:'#F3F5F6',
        borderRadius:10,
    },
    loadingBg: {
        width: "100%",
        height: "100%",
        display: "flex",
        backgroundColor:'transparent',
        justifyContent: "center",
        alignItems: "center"
    },
    loadingBox: {
        width: 100 / zoomW,
        height: 120 / zoomH,
        position:'absolute',
        top:height/2-120/zoomH,
        left:width/2-50 / zoomW,
        backgroundColor: "rgba(0,0,0,.5)",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
    },
    textPrise:{
        fontSize: 13,
        color:'rgba(0,0,0,0.65)',
        marginLeft:5/zoomW
    },
    textPrised:{
        fontSize: 13,
        color:'#EF524C',
        marginLeft:5/zoomW
    }
});