customer / shanghai-railway-rnapp

/**
 * Created by xiniu on 2018/11/20.
 */
import React, {Component} from 'react';
import {
    ActivityIndicator,
    DeviceEventEmitter,
    Dimensions,
    findNodeHandle,
    Image,
    Keyboard,
    Modal,
    NetInfo,
    Platform,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View,
    FlatList,
    InteractionManager
} from 'react-native';
import Video from 'react-native-video';
import Orientation from 'react-native-orientation';
import Slider from 'react-native-slider';
import {observer} from 'mobx-react';
import {UIManager} from 'NativeModules';

import transferVideoDetailLogic from './transferVideoDetailLogic';
import {zoomH, zoomW,height,width} from '../../utils/getSize';
import CommentInput from '../detail/CommentInput';
import CommentMore from '../detail/CommentMore';
import CommentReward from '../detail/CommentReward';
import ItemHeaderInfo from "../component/ItemHeaderInfo";
import DetailTab from '../detail/DetailTab';
import { NoDoublePress, xnToast, getHeaderHeight, isIphoneX, getHeaderPadding,getHomeColor, dateToMsgTime } from '../../utils/utils';
import AppService from "../../service/AppService";
import RichText from "../../widget/RichText";

const defaultIcon = require('../../img/defaultIcon.png');
const vIcon = require('../../img/v.png');
const prise = require('../../img/dz.png');
const prised = require('../../img/prised.png');
const writeIcon = require('../../img/writeIcon.png');
const emj = require('../../img/emj.png');
const forwarding = require('../../img/zf.png');
const reward = require('../../img/reward.png');
const close = require('../../img/close.png');
const pageSize = 20;
let offSet = 0;
let isFirst = true;

const screenWidth = Dimensions.get('window').width;
const screenHeight = Platform.OS === 'ios' ? Dimensions.get('window').height : Dimensions.get('window').height - StatusBar.currentHeight;

function formatTime(second) {
    let i = 0, s = Math.round(second);
    if (s > 60) {
        i = parseInt(s / 60);
        s = parseInt(s % 60);
    }
    // 补零
    let zero = function (v) {
        return (v >> 0) < 10 ? "0" + v : v;
    };
    return [zero(i), zero(s)].join(":");
}

@observer
export default class TransferVideoDetail extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        header: null
    });

    logic = new transferVideoDetailLogic();

    constructor(props){
        super(props);
        this.reGetThreadDetailInfo = null;
        this.toCommentPosition = null;
        this._gestureHandlers = {
            onStartShouldSetResponder: () => false,
            // 对触摸进行响应
            onMoveShouldSetResponder: () => {
                Keyboard.dismiss();
                return false;
            },
        };
        this.state = {
            detailInfo :{},
            loading:false,
            showInput:false,//是否显示底部弹出框
            operatorLoading:false,//局部操作框
            toCommentPosition:false,
            currentTabIndex:1,
            commentList:[],//评论列表
            forwardingList:[],//转发列表
            RewardList:[],//打赏列表
            praiseList:[],//赞列表
            threadStatistics:'',//统计信息
            loadMore :false,
            showFooter:false,

            id: this.props.navigation.state.params.id || null,
            firstIn: false,
            videoWidth: 345 / zoomW,
            videoHeight: 213.5,
            showVideoControl: false, // 是否显示视频控制组件
            duration: 0,               // 视频的总时长
            isFullScreen: false,     // 当前是否全屏显示
            playFromBeginning: false, // 是否从头开始播放
            mobileConnect: false,
            isBuffer: false,
            attentionID: null,
            isShowCommentInput:false // 是否显示CommentInput输入框组件
        };
    };

    componentWillMount(){
        const _this = this;

        global.pauseTransferVideo = this.pauseVideo;
        global.recoverTransferVideo = this.recoverVideo;

        if (global.isConnected) {
            this.setState({
                firstIn: true
            });
            AppService.forumActionHistory({forumId:global.forumId,actionTargetId:_this.state.id,actionType:30,actionTargetType:0,actionTargetThreadId:_this.state.id}).then((data)=>{});

            const process1 = new Promise((resolve, reject) => {
                // 获取帖子详情
                AppService.getDetailById({ id: _this.state.id,sourceFrom:'APP' }).then((res) => {
                    resolve(res);
                    if (res.message) {
                        _this.setState({
                            firstIn: false
                        }, () => {
                            xnToast(res.message);
                        });
                        return;
                    }
                    if (!!res.errors === true && !!res.errors.length > 0) {
                        if (!!data.hasBeenDeleted){
                            xnToast("帖子信息不存在或已被删除");
                            this.props.navigation.goBack();
                            return
                        }
                        _this.setState({
                            firstIn: false
                        }, () => {
                            xnToast(res.errors[0].message);
                        });
                    } else {

                    }
                }).catch((error) => {
                    _this.setState({
                        firstIn: false
                    }, () => {
                        xnToast(error.message);
                    });
                })
            });
            const process2 = new Promise((resolve, reject) => {
                // 读帖子
                AppService.ThreadReadRequest({ id: _this.state.id }).then((res) => {
                    resolve(res);
                    if (res.message) {
                        _this.setState({
                            firstIn: false
                        }, () => {
                            xnToast(res.message);
                        });
                        return;
                    }
                    if (!!res.errors === true && !!res.errors.length > 0) {
                        _this.setState({
                            firstIn: false
                        }, () => {
                            xnToast(res.errors[0].message);
                        });
                    } else {
                        // 已读成功统一发送已读通知
                        DeviceEventEmitter.emit('readNoti',_this.state.id);
                    }
                }).catch((error) => {
                    _this.setState({
                        firstIn: false
                    }, () => {
                        xnToast(error.message);
                    });
                })
            });
            // 同时执行process1和process2和process3，并在它们都完成后执行then:
            Promise.all([process1, process2]).then(function (results) {
                console.log(results, '--------------');
                let videoUrl = '';
                let videoCover = '';
                let videoSize = 0;
                let attentionID = null;
                let threadExtend = results[0].threadExtend || {};
                let originThread = threadExtend.originThread || {};
                let attachmentList = originThread.attachmentList || [];
                let hasFollowed = false;
                if(!!attachmentList && attachmentList.length > 0) {
                    let attributes = JSON.parse(attachmentList[0].attributes || '{}');
                    videoUrl = !!attachmentList[0].filePath ? attachmentList[0].filePath : '';
                    videoCover = !!attributes.videoCover ? attributes.videoCover : '';
                    videoSize = !!attributes.videoSize ? attributes.videoSize : 0;
                }
                if(!!threadExtend.user && !!threadExtend.user.attention && !!threadExtend.user.attention.isActive) {
                    hasFollowed = true;
                    attentionID = threadExtend.user.attention.id || null;
                }
                threadExtend.videoUrl = videoUrl;
                threadExtend.videoCover = videoCover;
                threadExtend.videoSize = videoSize;
                threadExtend.hasFollowed = hasFollowed;
                _this.props.navigation.setParams({
                    headerInfo: threadExtend
                });
                _this.setState({
                    detailInfo: threadExtend,
                    attentionID: attentionID,
                    firstIn: false
                }, () => {
                    _this.getReplyList();
                    _this.getThreadStatic();
                    // 获取网络状态
                    NetInfo.fetch().done((reach) => {
                        if(reach.toLowerCase() === 'wifi') {
                            _this.setState({
                                isBuffer: true
                            });
                            _this.logic.switchPlay(true);
                            _this.logic.tempSwitchPlay(true);
                        } else {
                            _this.setState({
                                mobileConnect: true
                            });
                        }
                        console.log(reach);
                    });
                });
            });
        } else {
            xnToast('暂无网络连接，请稍后重试！')
        }
    }

    componentDidMount(){
        let _this = this;

        //重新获取详情信息
        this.reGetThreadDetailInfo = DeviceEventEmitter.addListener('reGetThreadDetailInfo',function(){
            console.log("reGetThreadDetailInfo");
            _this.getThreadDetailInfo();
        });

        this.toCommentPosition = DeviceEventEmitter.addListener('toCommentPosition',function(){
            console.log("toCommentPosition");
            _this.setState({
                toCommentPosition: true,
            });
        });

        //刷新回复列表
        this.refreshReplyList = DeviceEventEmitter.addListener('refreshReplyList',function(){
            _this.setState({
                commentList: [],
                loadMore: false,
            },function(){
                _this.getReplyList();
                _this.getThreadStatic();
            })
        });

        //刷新赞列表
        this.refreshPriseList = DeviceEventEmitter.addListener('refreshPriseList',function(){
            _this.setState({
                praiseList:[],
                loadMore :false,
            },function(){
                _this.getPriseList();
                _this.getThreadStatic();
            })
        });

        //刷新转发数
        this.refreshForward = DeviceEventEmitter.addListener('refreshForward',function(){
            _this.setState({
                forwardingList:[],
                loadMore :false,
            },function(){
                _this.getForwardList();
                _this.getThreadStatic();
            })
        });

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

    componentWillUnmount() {
        Orientation.lockToPortrait();

        global.pauseTransferVideo = null;
        global.recoverTransferVideo = null;

        if (this.reGetThreadDetailInfo !== null) {
            this.reGetThreadDetailInfo.remove();
        }
        if (this.toCommentPosition !== null) {
            this.toCommentPosition.remove();
        }

        isFirst = true;
        if(this.refreshReplyList){
            this.refreshReplyList.remove();
        }
        if(this.refreshPriseList){
            this.refreshPriseList.remove();
        }
        if(this.refreshForward){
            this.refreshForward.remove();
        }
        if (this.closeCommentInputIos != null) {
            this.closeCommentInputIos.remove();
        }
    }

    //点赞
    _commentStarClick (isLike,data){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }

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

            AppService.like(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('点赞成功');
                    _this.setState({
                        commentList:[],
                        loadMore :false,
                    },function () {
                        _this.getReplyList();

                    })
                }
            }).catch((error) => {
                xnToast(error)
            })
        }else {//取消点赞
            let params = {
                id: data.threadLike.id//点赞id
            };
            console.log(params);
            AppService.cancelLike(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('已取消点赞');
                    _this.setState({
                        commentList:[],
                        loadMore :false,
                    },function () {
                        _this.getReplyList();

                    })
                }
            }).catch((error) => {
                xnToast(error)
            })
        }
    };

    //删除评论
    deleteComment(item){

        let _this = this;

        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('删除成功');
                // todo 通知列表刷新（列表刷新难点，分页的时候怎么刷？）
                this.setState({
                    commentList:[],
                    loadMore :false,
                },function () {
                    _this.getReplyList();
                    _this.getThreadStatic();
                    DeviceEventEmitter.emit('refreshHomeList');
                })
            }
        }).catch((error) => {
            xnToast(error)
        })
    }

    onLayout = (event)=>{
        offSet = event.nativeEvent.layout.height;
    }

    onLayoutFlatList = (event)=>{
        let a = event.nativeEvent.layout.height;
        console.log('1111----',a,height);
    }

    //获取回复列表
    getReplyList(){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        let _this = this;
        let length = this.state.commentList.length;
        if (length % pageSize == 0 && !this.state.loadMore) {
            let data = this.state.detailInfo;
            let params = {
                tenantId:data.tenantId,//承租人ID
                forumId:data.forumId,//社区id
                boardId:data.boardId,//板块id
                threadId:data.id,//帖子id
                isActive:true,
                isComment:true,
                pageNumber:length/pageSize+1,
                pageSize : pageSize,
            };

            this.setState({
                loadMore: true,
            });
            AppService.queryCommentAndReply(params).then((data) => {
                console.log('5555',data);
                this.setState({
                    loadMore: false,
                },function () {
                    //todo 添加判断条件'
                    if(isFirst &&( _this.props.navigation.state.params.from == 'comment')){
                        if (data.result.length < pageSize){//只有一页的数据
                            this.setState({
                                showFooter:true,
                            });
                        }
                        this.refs.flatList.scrollToOffset({animated: true, offset: offSet});
                        isFirst = 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),
                    })
                }
            }).catch((error) => {
                xnToast(error)
            })
        }

    };

    //获取转发列表
    getForwardList(){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        let length =  this.state.forwardingList.length;
        if (length % pageSize == 0 && !this.state.loadMore) {
            let  data = this.state.detailInfo;
            let params = {
                tenantId:global.tenantId,//承租人ID
                forumId:data.forumId,//社区id
                boardId:data.boardId,//板块id
                threadId:data.id,//帖子id
                isActive:true,
                pageNumber:length/pageSize+1,
                pageSize : pageSize,
            };
            this.setState({
                loadMore: true,
            });

            AppService.queryForward(params).then((data) => {
                this.setState({
                    loadMore: 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({
                        forwardingList:this.state.forwardingList.concat(data.result),
                    })
                }
            }).catch((error) => {
                this.setState({
                    loadMore: false,
                });
                xnToast(error)
            })
        }

    };

    //获取打赏列表
    getRewardList(){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        };

        let length =  this.state.RewardList.length;
        if (length % pageSize == 0 && !this.state.loadMore) {
            let  data = this.state.detailInfo;
            let params = {
                tenantId:global.tenantId,//承租人ID
                forumId:data.forumId,//社区id
                boardId:data.boardId,//板块id
                threadId:data.id,//帖子id
                isActive:true,
            };

            this.setState({
                loadMore: true,
            });

            AppService.queryCommentAndReply(params).then((data) => {
                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({
                        RewardList:this.state.RewardList.concat(data.result),
                    })
                }
            }).catch((error) => {
                xnToast(error)
            })
        }

    };

    //获取赞列表
    getPriseList(){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        let length =  this.state.praiseList.length;
        if (length % pageSize == 0 && !this.state.loadMore) {
            let  data = this.state.detailInfo;
            let params = {
                tenantId:global.tenantId,//承租人ID
                forumId:data.forumId,//社区id
                boardId:data.boardId,//板块id
                threadId:data.id,//帖子id
                targetType: 0,//点赞类型0：帖子点赞 1：评论点赞 2：回复点赞  3:转发点赞
                targetId:data.id,//点赞对象ID
                likeUserId:data.userId,//点赞用户ID
                likeUserName:data.userName,//点赞用户名字
                isActive:true,
                pageNumber:length/pageSize+1,
                pageSize : pageSize,
            };

            this.setState({
                loadMore: true,
            });
            AppService.queryLike(params).then((data) => {
                this.setState({
                    loadMore: 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({
                        praiseList:this.state.praiseList.concat(data.result),
                    })
                }
            }).catch((error) => {
                this.setState({
                    loadMore: false,
                });
                xnToast(error)
            })
        }

    };

    //获取帖子统计信息
    getThreadStatic(){
        AppService.queryThreadStatistic({ id: this.state.detailInfo.id }).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                this.setState({
                    threadStatistics:data.threadStatistics,
                })
            }
        }).catch((error) => {
            xnToast(error);
        })
    }

    //列表数据源
    _data = (index) =>{
        let data ;
        if(index == 0 ){//转发
            data = this.state.forwardingList;
        }else if (index == 1){//评论
            data = this.state.commentList;
        }else if (index == 2){//打赏
//            data = this.state.RewardList;
        } else if (index == 3){//赞
            data = this.state.praiseList;
        }

        return data;
    }

    //无数据时的展示
    _emptyView(index){
        let  msg;
        if(index == 0 ){//转发
            msg = "暂无转发"
        }else if (index == 1){//评论
            msg = "暂无评论"
        }else if (index == 2){//打赏
//            msg = "暂无打赏"
        } else if (index == 3){//赞
            msg = "暂无赞"
        }
        return(
            !this.state.isFullScreen && <View style = {{width:'100%',paddingTop:60/zoomH,paddingBottom:60/zoomH,backgroundColor:'#fff',alignItems:'center'}}>
                <Text style = {{fontSize:14,color:'rgba(0,0,0,0.45)'}}> {msg}</Text>
            </View>

        );
    };

    //获取点赞、转发等tab栏上的显示的文字
    getTypeName(type){

        let data = this.state.detailInfo;

        let title = '';
        switch (type) {
            case 0:
                title = !!this.state.threadStatistics && this.state.threadStatistics.forwardNum >0?
                    '转发 '+this.state.threadStatistics.forwardNum:'转发';
                break;
            case 1:
                title = !!this.state.threadStatistics && this.state.threadStatistics.commentNum >0 ?
                    '评论 '+this.state.threadStatistics.commentNum:'评论';
                break;
            case 2:
//                title = !!data.threadStatistics && data.threadStatistics.rewardNum >0 ?
//                    '打赏 '+data.threadStatistics.rewardNum:'打赏';
                break;
            case 3:
                title = !!this.state.threadStatistics && this.state.threadStatistics.likeNum >0 ?
                    '赞 '+this.state.threadStatistics.likeNum:'赞';
                break;
            default:
                break;
        }

        return title;

    }

    //切换评论等tab栏
    changeTab(index) {
        let _this = this;
        this.setState({
            currentTabIndex:index,
            loadMore:false,
        },function () {
            switch (_this.state.currentTabIndex){
                case  0 :
                    _this.getForwardList();
                    break;
                case 1:
                    _this.getReplyList();
                    break;
                case 2:
                    // _this.getRewardList();
                    break;
                case 3:
                    _this.getPriseList();
                    break;
                default:
                    break;
            }
        });


    };

    //加载更多
    _loadMore(index){
        console.log('----_loadMore------');
        let _this = this;
        switch (index){
            case 0:
                _this.getForwardList();
                break;
            case 1:
                _this.getReplyList();
                break;
            case 2:
//                _this.getRewardList();
                break;
                _this.getPriseList();
            case 3:
                break;
            default:
                break;
        }
    }

    toCommentReply(id){
        NoDoublePress.onPress(() => {
            this.props.navigation.navigate("CommentReply", { id: id });
        })
    }

    //跳到个人中心页面
    toPersonal(id){
        NoDoublePress.onPress(() => {
            if (id == global.userId){
                //自己
                this.props.navigation.navigate("MyPage",{id:id});
                return;
            }
            this.props.navigation.navigate('PersonalHomePage',{'userId':id});
        })
    }

    //是否显示位置信息
    showLocation(){
        if (!!this.state.detailInfo.city && this.state.detailInfo.threadType == 0) {
            return true;
        }
        return false;
    }

    renderListHeader(){
        let _this = this;
        let detail = this.state.detailInfo;
        let originThread = detail.originThread || {};
        let rotateDeg = detail.threadVideoDirection || originThread.threadVideoDirection || 0;
        return(
            <View style = {{ flex: 1, backgroundColor: '#fff' }}>
                <View onLayout = {(event) => _this.onLayout(event)}>
                    {/*个人信息*/}
                    {!this.state.isFullScreen && <ItemHeaderInfo  itemList = {this.state.detailInfo} nav = {this.props.navigation}/>}
                    {/*转发*/}
                    {!!this.state.detailInfo.isForward && !this.state.isFullScreen &&
                    <View style={{ width: "100%", paddingLeft: 15 / zoomW,paddingRight:15/zoomW,marginTop:8/zoomH,marginBottom:8/zoomH }}>
                        <RichText
                            item={this.state.detailInfo.threadDetail.richContent}
                            nav={this.props.navigation}
                            clearNumberOfLine={true}
                        />
                    </View>}
                    {!this.state.isFullScreen &&
                    <View style={{ paddingLeft: 15 / zoomW, paddingRight: 15 / zoomW }}>
                        <TouchableOpacity style={styles.forwardingBg} onPress={() => NoDoublePress.onPress(() => this._detailClick())}>
                            {/*富文本*/}
                            <View style={styles.contentForwarding}>
                                <RichText
                                    item={this.getRichContent()}
                                    nav={this.props.navigation}
                                    clearNumberOfLine={true}
                                />
                            </View>
                        </TouchableOpacity>
                    </View>}
                    {/*视频*/}
                    <View style={[styles.centerWrap, { height: this.state.videoHeight }]}>
                        <View style={[styles.videoWrap, {
                            width: this.state.videoWidth,
                            height: this.state.videoHeight
                        }]}>
                            {!!detail.videoUrl && <View style={{ width: '100%', height: '100%' }}>
                                <Video
                                    ref={(ref) => this.videoPlayer = ref}
                                    source={{uri: detail.videoUrl}}
                                    rate={1.0}
                                    volume={1.0}
                                    muted={false}
                                    paused={!this.logic.isPlaying}
                                    resizeMode={'contain'}
                                    playWhenInactive={false}
                                    playInBackground={false}
                                    ignoreSilentSwitch={'ignore'}
                                    progressUpdateInterval={250.0}
                                    onLoadStart={this._onLoadStart}
                                    onLoad={this._onLoaded}
                                    onProgress={this._onProgressChanged}
                                    onSeek={this._onSeek}
                                    onEnd={this._onPlayEnd}
                                    onError={this._onPlayError}
                                    onBuffer={this._onBuffering}
                                    style={{width: '100%', height: '100%'}}
                                />
                                {
                                    this.state.isBuffer &&
                                    <View style={{
                                        position:'absolute',
                                        top: 0,
                                        left: 0,
                                        width: '100%',
                                        height: '100%'
                                    }}>
                                        {!!detail.videoCover && <Image style={{ width: '100%', height: '100%' }} resizeMode="contain" source={{ uri: detail.videoCover.indexOf("?x-oss-process=")!=-1? detail.videoCover :detail.videoCover + '?x-oss-process=image/resize,w_375/rotate,' + rotateDeg }} />}
                                        <View style={[styles.maskWrap, { backgroundColor: 'transparent' }]}>
                                            <ActivityIndicator size="large" color="#fff"/>
                                            <Text style={{ fontSize: 14, color: '#fff', marginTop: 8 }}>视频缓冲中…</Text>
                                        </View>
                                    </View>
                                }
                                <TouchableWithoutFeedback onPress={() => !this.state.isBuffer ? this.hideControl() : null}>
                                    <View
                                        style={{
                                            width: '100%',
                                            height: '100%',
                                            backgroundColor: this.logic.isPlaying ? 'transparent' : 'rgba(0, 0, 0, 0.2)',
                                            position: 'absolute',
                                            top: 0,
                                            left: 0,
                                            alignItems:'center',
                                            justifyContent:'center'
                                        }}>
                                        {this.state.showVideoControl && <TouchableWithoutFeedback onPress={() => this.controlPlay()}>
                                            <Image
                                                style={{ width: 50 / zoomW, height: 50 / zoomW }}
                                                source={this.logic.isPlaying ? require('../../img/zt.png') : require('../../img/bf.png')}
                                                resizeMode={'contain'}
                                            />
                                        </TouchableWithoutFeedback>}
                                    </View>
                                </TouchableWithoutFeedback>
                            </View>}
                            {!!detail.videoUrl && this.state.showVideoControl && <View style={styles.control}>
                                <TouchableOpacity style={{ width: 45 / zoomW, height: '100%', justifyContent: 'center', paddingLeft: 23 / zoomW }} onPress={() => this.controlPlay()}>
                                    <Image
                                        style={styles.playControl}
                                        source={this.logic.isPlaying ? require('../../img/icon_control_pause.png') : require('../../img/icon_control_play.png')}
                                        resizeMode={'contain'}
                                    />
                                </TouchableOpacity>
                                <Text style={styles.vTime}>{formatTime(this.logic.currentTime)}</Text>
                                <Slider
                                    style={{ flex: 1 }}
                                    minimumTrackTintColor={global.homeColor}
                                    maximumTrackTintColor={'rgba(255,255,255,0.3)'}
                                    thumbStyle={{
                                        backgroundColor: 'transparent',
                                        justifyContent: 'center'
                                    }}
                                    thumbImage={require('../../img/icon_control_slider.png')}
                                    value={this.logic.currentTime}
                                    minimumValue={0}
                                    maximumValue={Math.round(this.state.duration)}
                                    onValueChange={(currentTime) => { this.onSliderValueChanged(currentTime) }}
                                    onSlidingComplete={value => { console.log(value); this.videoPlayer.seek(value, '0') }}
                                />
                                <Text style={[styles.vTime, { marginLeft: 12.5 / zoomW, marginRight: 0 }]}>{formatTime(this.state.duration)}</Text>
                                <TouchableOpacity style={{ width: 45 / zoomW, height: '100%', justifyContent: 'center', paddingLeft: 7 / zoomW }} onPress={() => this.onControlShrinkPress()}>
                                    <Image
                                        style={styles.shrinkControl}
                                        source={this.state.isFullScreen ? require('../../img/icon_control_shrink_screen.png') : require('../../img/icon_control_full_screen.png')}
                                        resizeMode={'contain'}
                                    />
                                </TouchableOpacity>
                            </View>}
                            {this.state.mobileConnect && <View style={styles.maskWrap}>
                                <Text style={{ fontSize: 14, color: '#fff' }}>播放将消耗{ Math.ceil(detail.videoSize) || 0 }MB流量</Text>
                                <TouchableOpacity activeOpacity={0.8} style={styles.continueBtn} onPress={() => { this.setState({ mobileConnect: false, isBuffer: true }); this.logic.switchPlay(true); this.logic.tempSwitchPlay(true);}}>
                                    <Text style={{ fontSize: 14, color: '#fff' }}>继续播放</Text>
                                </TouchableOpacity>
                            </View>}
                        </View>
                    </View>
                    {/*阅读量*/}
                    {!this.state.isFullScreen && <Text style = {styles.reading}>{!!this.state.detailInfo.threadStatistics?(this.state.detailInfo.threadStatistics.readNum)+"  阅读":'0  阅读'}  </Text>}
                </View>

                {!this.state.isFullScreen && <View style = {{ backgroundColor: '#F3F5F6', height: 8 / zoomH }} ref={(c) => { this.dividerView = c }} />}

                {!this.state.isFullScreen && <View style={styles.tabWrap}>
                    <View style = {styles.itemTabWrapBg}>
                        <TouchableOpacity style={styles.tabBtn} onPress={() => this.changeTab(0)}>
                            <Text style={ this.state.currentTabIndex ==0 ?styles.tabMenuActiveWord :styles.tabMenuWord}>
                                {this.getTypeName(0)}
                            </Text>
                            {this.state.currentTabIndex == 0 && <View style={[styles.lineStyle,{backgroundColor: global.homeColor}]} />}
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.tabBtn} onPress={() => this.changeTab(1)}>
                            <Text style={this.state.currentTabIndex ==1 ?styles.tabMenuActiveWord :styles.tabMenuWord}>
                                {this.getTypeName(1)}
                            </Text>
                            { this.state.currentTabIndex == 1 &&<View style={[styles.lineStyle,{backgroundColor: global.homeColor}]} />}
                        </TouchableOpacity>
                    </View>
                    <View style = {styles.itemTabWrapBg}>
                        {/*
                         <TouchableOpacity style={styles.tabBtn} onPress={() => this.changeTab(2)}>
                         <Text style={this.state.currentTabIndex ==2 ?styles.tabMenuActiveWord :styles.tabMenuWord}>
                         {this.getTypeName(2)}
                         </Text>
                         {this.state.currentTabIndex == 2 && <View style={styles.lineStyle} />}
                         </TouchableOpacity>
                         */}
                        <TouchableOpacity style={styles.tabBtn} onPress={() => this.changeTab(3)}>
                            <Text style={this.state.currentTabIndex ==3 ?styles.tabMenuActiveWord :styles.tabMenuWord}>
                                {this.getTypeName(3)}
                            </Text>
                            {this.state.currentTabIndex == 3 && <View style={[styles.lineStyle,{backgroundColor: global.homeColor}]} />}
                        </TouchableOpacity>
                    </View>
                </View>}

                {!this.state.isFullScreen && <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: '#ddd' }} />}
            </View>
        )
    }

    //渲染item
    keyExtractor = (item,index) => index;
    renderItem({item,index}){
        switch (this.state.currentTabIndex){
            case 0://转发
                return (
                    !this.state.isFullScreen && <View style={styles.itemBackground} key={index}>
                        <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_500'} :defaultIcon}
                                    resizeMode="cover" />
                            {!!item.userExtend && !!item.userExtend.isAuthented &&<Image  style={styles.commonAvatarV} source={vIcon} resizeMode="cover" />}
                        </TouchableOpacity>
                        <View style = {{marginLeft:8/zoomW,flex:1,marginTop:2}}>
                            <Text style = {styles.userNameBlue}>{item.forwardUserName}</Text>
                            <View style = {{marginTop:8/zoomH}}>
                                <RichText
                                    item={!!item.threadDetail?item.threadDetail.richContent || '':''}
                                    nav={this.props.navigation}
                                    clearNumberOfLine  ={true}
                                />
                            </View>
                            <Text style = {[styles.time,{marginTop:8/zoomH}]}>{dateToMsgTime(item.creationTime)}</Text>
                        </View>
                    </View>
                );
                break;
            case 1://评论
                return (
                    !this.state.isFullScreen && <TouchableOpacity style={styles.itemBackground} activeOpacity={1} onPress = {()=>{this.toCommentReply(item.id)}} key={index}>
                        <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_500'} :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._commentStarClick(!!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 }}></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>
                );
                break;
            case 2://打赏
                return null;
//                (
//                    !this.state.isFullScreen && <View style={styles.itemBackground} key={index}>
//                        <TouchableOpacity style={styles.commonAvatar}   onPress = {()=>{this.toPersonal(item.userExtend.id)}}>
//                            <Image  style={styles.commonAvatar} source={pic} resizeMode="cover" />
//                            <Image  style={styles.commonAvatarV} source={vIcon} resizeMode="cover" />
//                        </TouchableOpacity>
//                        <View style = {{marginLeft:10/zoomW,marginRight:10/zoomW,flexDirection:'row',alignItems:'center',justifyContent:'space-between',flex:1}}>
//                            <View>
//                                <Text style = {styles.userNameBlue}>犀牛网络</Text>
//                                <Text style = {styles.userIdentity}>android开发</Text>
//                            </View>
//                            <Text style = {{fontSize:14,color:'#000000'}}> ￥1</Text>
//
//                        </View>
//                    </View>
//                );
                break;
            case 3://赞
                return (
                !this.state.isFullScreen && <View style={[styles.itemBackground,{alignItems:'center'}]} key={index}>
                        <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_500'} :defaultIcon} resizeMode="cover" />
                            {!!item.userExtend && !!item.userExtend.isAuthented &&<Image  style={styles.commonAvatarV} source={vIcon} resizeMode="cover" />}
                        </TouchableOpacity>
                        <View style = {{marginLeft:10/zoomW,marginRight:10/zoomW}}>
                            <Text style = {styles.userNameBlue}>{item.likeUserName}</Text>
                            {!!item.userExtend .agentName&& !!item.userExtend.agentName!='' &&<Text style = {styles.userIdentity}>{!!item.userExtend?item.userExtend.agentName:''}</Text> }
                        </View>
                    </View>);
                break;
            default:
                break;
        }
    }

    renderLoading(){
        return(
            <TouchableOpacity style={styles.loadingBg} onPress = {()=>{}}>
                <View style={styles.loadingBox}>
                    <ActivityIndicator size="large" color="#fff" />
                    <Text
                        style={{ fontSize: 16, color: "#fff", marginTop: 6 / zoomH }}
                    >
                        加载中...
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

    footerView(){
        let h = height;
        if (this.state.currentTabIndex ==0){//转发列表
            h = this.state.forwardingList.length < pageSize ? height:0;
        }
        if (this.state.currentTabIndex == 1){//评论
            h = this.state.commentList.length < pageSize ? height:0;
        }
        if (this.state.currentTabIndex == 3){//赞
            h = this.state.praiseList.length < pageSize ? height:0;
        }
        return(
            !this.state.isFullScreen && <View style = {{height:h,backgroundColor:'#fff',width:'100%'}}></View>
        )
    }

    // 跳转到个人中心
    goToPersonCenter() {
        if (this.state.detailInfo.threadUserId == global.userId) {
            //自己
            this.props.navigation.navigate('MyPage', { id: this.state.detailInfo.threadUserId });
            return;
        }
        this.props.navigation.navigate('PersonalHomePage', { userId: this.state.detailInfo.threadUserId });
    }

    // 关注、取消关注
    followClick() {
        const _this = this;
        if (global.isConnected){
            this.setState({
                loading: true
            });
            const data = JSON.parse(JSON.stringify(this.state.detailInfo));
            if(data.hasFollowed) {
                let params = {
                    id: this.state.attentionID
                };
                AppService.cancleAttention(params).then((data) => {
                    _this.setState({
                        loading: false
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        xnToast('取消关注');
                        _this.getThreadDetailInfo();
                        DeviceEventEmitter.emit('refreshHomeHistory');
                        DeviceEventEmitter.emit('refreshCollectList');
                        DeviceEventEmitter.emit('refreshAttention');
                        DeviceEventEmitter.emit('refreshHomeList');
                        DeviceEventEmitter.emit("refreshAllList");
                        DeviceEventEmitter.emit('reGetThreadDetailInfo');
                    }
                }).catch((error) => {
                    _this.setState({
                        loading: false
                    }, () => {
                        xnToast(error);
                    });
                })
            } else {
                const params = {
                    forumId: data.forumId,//社区id
                    targetType: 1,//关注对象类型,目前固定1：社区用户
                    targetUserId: data.threadUserId,//被关注者用户ID
                    targetUserName: data.threadUserName,//被关注者用户名称
                    attentionUserId: global.userId,//自己的id
                    attentionUserName: global.userName,//自己的名字
                };
                console.log(params);
                AppService.attention(params).then((data) => {
                    this.setState({
                        loading: false
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        xnToast('已关注');
                        _this.getThreadDetailInfo();
                        DeviceEventEmitter.emit('refreshHomeHistory');
                        DeviceEventEmitter.emit('refreshCollectList');
                        DeviceEventEmitter.emit('refreshAttention');
                        DeviceEventEmitter.emit('refreshHomeList');
                        DeviceEventEmitter.emit("refreshAllList");
                        DeviceEventEmitter.emit('reGetThreadDetailInfo');
                    }
                }).catch((error) => {
                    _this.setState({
                        loading: false
                    }, () => {
                        xnToast(error);
                    });
                })
            }
        } else {
            this.setState({
                loading: false
            });
            xnToast('暂无网络连接，请稍后重试！');
        }
    };

    //转发
    _forwardingClick = ()=>{
        let firstFileUrl = !!this.state.detailInfo.user.headFileUrl?this.state.detailInfo.user.headFileUrl :'';//用户头像
        let content = '';
        let placeHolderContent = '';
        let atList= [];
        if(!!this.state.detailInfo.originThread && this.state.detailInfo.originThread.threadDetail){//多次转发，有原贴内容
            firstFileUrl = this.state.detailInfo.originThread.threadDetail.firstFileUrl || firstFileUrl;
            content = this.state.detailInfo.originThread.threadUserName +" : "+this.state.detailInfo.originThread.threadDetail.content;
            placeHolderContent = '//@'+this.state.detailInfo.threadUserName+" : "+(this.state.detailInfo.threadDetail.content || '');
            let user = {
                id:this.state.detailInfo.threadUserId,
                name:this.state.detailInfo.threadUserName
            };
            atList.push(user);
            if (!!this.state.detailInfo.atHistoryList && this.state.detailInfo.atHistoryList.length >0 ){
                for(let i=0;i<this.state.detailInfo.atHistoryList.length;i++){
                    atList.push(this.state.detailInfo.atHistoryList[i]);
                }
            }
        }else {//原贴，没有转发过
            firstFileUrl = !!this.state.detailInfo.threadDetail && !!this.state.detailInfo.threadDetail.firstFileUrl ?
                this.state.detailInfo.threadDetail.firstFileUrl || firstFileUrl :firstFileUrl;//封面图，原贴的第一张图，如果没有，传用户头像
            content  =this.state.detailInfo.threadUserName +" : "+ this.state.detailInfo.threadDetail.content;
        }

        let data = {
            forumId: this.state.detailInfo.forumId,//社区id
            boardId: this.state.detailInfo.boardId,//版块ID,
            threadId :this.state.detailInfo.id,//帖子id
            firstFileUrl:firstFileUrl,
            atList:atList,//帖子@的人列表
            placeHolderContent:placeHolderContent,//转发的转发，别人转发的内容
            content:content,//帖子内容，需要自己拼接为 username：content 的格式
        };

        this.props.navigation.navigate('Forwarding',{from:'Detail',data:data});
    };

    //获取帖子详细信息
    getThreadDetailInfo(){
        let _this = this;
        if (global.isConnected) {
            this.setState({
                loading: true
            });
            AppService.getDetailById({ id: _this.state.id,sourceFrom:'APP' }).then((res) => {
                if (res.message) {
                    _this.setState({
                        loading: false
                    }, () => {
                        xnToast(res.message);
                    });
                    return;
                }
                if (!!res.errors === true && !!res.errors.length > 0) {
                    if (!!data.hasBeenDeleted){
                        xnToast("帖子信息不存在或已被删除");
                        _this.props.navigation.goBack();
                        return
                    }
                    _this.setState({
                        loading: false
                    }, () => {
                        xnToast(res.errors[0].message);
                    });
                } else {
                    let videoUrl = '';
                    let videoCover = '';
                    let videoSize = 0;
                    let attentionID = null;
                    let threadExtend = res.threadExtend || {};
                    let originThread = threadExtend.originThread || {};
                    let attachmentList = originThread.attachmentList || [];
                    let hasFollowed = false;
                    if(!!attachmentList && attachmentList.length > 0) {
                        let attributes = JSON.parse(attachmentList[0].attributes || '{}');
                        videoUrl = !!attachmentList[0].filePath ? attachmentList[0].filePath : '';
                        videoCover = !!attributes.videoCover ? attributes.videoCover : '';
                        videoSize = !!attributes.videoSize ? attributes.videoSize : 0;
                    }
                    if(!!threadExtend.user && !!threadExtend.user.attention && !!threadExtend.user.attention.isActive) {
                        hasFollowed = true;
                        attentionID = threadExtend.user.attention.id || null;
                    }
                    threadExtend.videoUrl = videoUrl;
                    threadExtend.videoCover = videoCover;
                    threadExtend.videoSize = videoSize;
                    threadExtend.hasFollowed = hasFollowed;
                    _this.props.navigation.setParams({
                        headerInfo: threadExtend
                    });
                    _this.setState({
                        detailInfo: threadExtend,
                        attentionID: attentionID,
                        loading: false
                    });
                }
            }).catch((error) => {
                _this.setState({
                    loading: false
                }, () => {
                    xnToast(error.message);
                });
            })
        } else {
            xnToast('暂无网络连接，请稍后重试！')
        }
    }

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

            let params = {
                forumId:data.forumId,//社区id
                boardId:data.boardId,//版块ID
                targetType: type,//点赞类型: 点赞对象的类型 0：帖子点赞 1：评论点 2：回复点赞 3:转发点赞
                targetId:data.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({
                        operatorLoading:false,
                    });
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast(data.errors[0].message);
                } else {
                    xnToast('点赞成功');
                    _this.setState({
                        operatorLoading:false,
                    });

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

            AppService.cancelLike(params).then((data) => {
                console.log(data);
                if (data.message) {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast(data.errors[0].message);
                } else {
                    xnToast('已取消点赞');
                    _this.setState({
                        operatorLoading:false,
                    });

                    _this.getThreadDetailInfo();
                    //通知点赞列表刷新
                    DeviceEventEmitter.emit('refreshPriseList');
                    DeviceEventEmitter.emit('refreshHomeList');
                }
            }).catch((error) => {
                _this.setState({
                    operatorLoading:false,
                });
                xnToast(error)
            })
        }
    };

    //更多
    showMoreModal(){
        this.refs['CommentMore'].openModal();
    }

    //赞赏
    showRewardModal(){
        this.refs['CommentReward'].openRewardModal();
    }

    //评论
    /**
     *  @param inputStr:输入法人内容
     *
     */
    toComment=(data)=> {
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            this.setState({
                operatorLoading:false,
            });
            return;
        }
        this.setState({
            operatorLoading:true,
        });

        let detailInfo = this.state.detailInfo;
        let forwardRichTxt = data.forwardRichContent ==''?'':data.forwardRichContent +'</div>';
        let isForward = data.isForward;

        let params = {
            forumId:detailInfo.forumId,//社区id
            boardId:detailInfo.boardId,//版块ID
            threadId:detailInfo.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,//是否同时转发
            forwardRichContent:forwardRichTxt,//同时转发富文本内容
            forwardContent:data.forwardContent,//同时转发内容
        };
        console.log(params);

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

            if (data.message) {
                xnToast(data.message);
                this.setState({
                    operatorLoading:false,
                });
                return;
            }
            if (data.errors.length > 0) {
                this.setState({
                    operatorLoading:false,
                });
                xnToast(data.errors[0].message);
            } else {
                xnToast("已评论");
                this.setState({
                    operatorLoading:false,
                });
                if(this.refs.CommentInput != undefined){
                    InteractionManager.runAfterInteractions(() => {
                        this.refs.CommentInput.reset();
                    });
                }
                //通知评论列表刷新
                if (isForward) {
                    DeviceEventEmitter.emit('refreshForward');
                    DeviceEventEmitter.emit('refreshList');
                }
                DeviceEventEmitter.emit('refreshReplyList');
                DeviceEventEmitter.emit('refreshHomeList');
                DeviceEventEmitter.emit('refreshForward');
            }
        }).catch((error) => {
            xnToast(error);
            this.setState({
                operatorLoading:false,
            });
        })
    };

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

    renderCommentInput(){
        return (
            <View>
                <View style={styles.inputBg}>
                    <TouchableOpacity style={styles.greyRadiusBg} onPress={() => this.commentClick()}>
                        <Text style = {{fontSize:14,color:'#000000',marginLeft:14/zoomW}}>写评论...</Text>
                        <Image style={{width:20/zoomW,height:20/zoomW,marginRight:8/zoomW}} source={emj} resizeMode="cover" />
                    </TouchableOpacity>
                    {/*点赞*/}
                    <TouchableOpacity onPress={() => NoDoublePress.onPress(() =>
                        this._starClick(!!this.state.detailInfo.threadLike && !!this.state.detailInfo.threadLike.isActive ? false : true, 0)
                    )}>
                        <Image style={styles.img} source={!!this.state.detailInfo.threadLike && !!this.state.detailInfo.threadLike.isActive ? prised : prise} resizeMode="cover" />
                    </TouchableOpacity>
                    {/*转发*/}
                    <TouchableOpacity onPress={() => NoDoublePress.onPress(() => this._forwardingClick())}>
                        <Image style={styles.img} source={forwarding} resizeMode="cover" />
                    </TouchableOpacity>
                    {/*打赏
                     <TouchableOpacity onPress={() => this.showRewardModal()}>
                     <Image style={styles.img} source={reward} resizeMode="cover" />
                     </TouchableOpacity>*/}
                </View>

                {/*<CommentReward
                 ref = "CommentReward"
                 callback = {(money) =>{alert("打赏"+money)}}/>*/}
            </View>
        );
    }

    //获取显示的文本内容
    getRichContent(){
        let isForward = this.state.detailInfo.isForward ;
        if(isForward){
            let content = '';
            if(!!this.state.detailInfo.originThread
                && !!this.state.detailInfo.originThread.threadDetail && !!this.state.detailInfo.originThread.threadDetail.richContent){
                content   = '<div>' + '↵funew↵<a class="@" href= "id = '+this.state.detailInfo.originThread.threadUserId
                    + '" title = "@'+this.state.detailInfo.originThread.threadUserName+ '" />' + ' : '+this.state.detailInfo.originThread.threadDetail.richContent.replace('<div>','');
            }
            return content;
        }

        if(this.state.detailInfo.threadType == 4){//文章类型
            return this.state.detailInfo.title||'';
        }

        return !!this.state.detailInfo.threadDetail.richContent?this.state.detailInfo.threadDetail.richContent:'';
    }

    //详情
    _detailClick() {
        this.props.navigation.navigate("VideoDetail", { name: 'VideoDetail', id: this.state.detailInfo.originThread.id });
    };

    // 滚动
    scroll(event) {
        let Y = event.nativeEvent.contentOffset.y;
        if(Y > (!!this.state.detailInfo.isBoardTop ? 61 : 57)) {
            if(!this.logic.showHeaderInfo) {
                this.logic.switchHeader(true);
            }
        } else {
            if(this.logic.showHeaderInfo) {
                this.logic.switchHeader(false);
            }
        }
    }

    render(){
        let detail = this.state.detailInfo;
        return(
            <View style={styles.background} onLayout={this._onLayout} {...this._gestureHandlers}>
                <StatusBar
                    backgroundColor={'#B0B1B1'}
                    networkActivityIndicatorVisible
                />
                <Modal
                    animationType="none"
                    transparent
                    visible={this.state.firstIn}
                    onRequestClose={() => {}}
                >
                    <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>
                </Modal>
                <Modal
                    animationType="none"
                    transparent
                    visible={this.state.loading}
                    onRequestClose={() => {}}
                >
                    <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>
                </Modal>
                {!this.state.firstIn && !this.state.isFullScreen && <View style={{ width: '100%', height: getHeaderPadding(), backgroundColor: '#fff' }} />}
                {!this.state.firstIn && !this.state.isFullScreen && <View style={styles.headerWrap}>
                    <View style={{ width: 375 / 2 / zoomW, height: '100%', flexDirection: 'row' }}>
                        <TouchableOpacity style={{ height: '100%', justifyContent: 'center', paddingLeft: 15 / zoomW, paddingRight: 15 / zoomW }} onPress={() => this.props.navigation.goBack()}>
                            <Image style={{ width: 18 / zoomW, height: 18 }} source={require('../../img/loadBack.png')} resizeMode="contain"/>
                        </TouchableOpacity>
                        {this.logic.showHeaderInfo && <View style={styles.topInfoWrap}>
                            <TouchableOpacity style={styles.avatar} onPress={() => NoDoublePress.onPress(() => this.goToPersonCenter())}>
                                <Image style={styles.avatar} source={!!detail.threadUserHeadFileUrl ? { uri: detail.threadUserHeadFileUrl + '?x-oss-process=image/resize,w_500' } : require('../../img/defaultIcon.png')} resizeMode="cover" />
                                {!!detail.user && !!detail.user.isAuthented && <Image style={styles.avatarV} source={require('../../img/v.png')} resizeMode="cover" />}
                            </TouchableOpacity>
                            <View style={{ flex: 1, marginLeft: 8 / zoomW }}>
                                <Text style={{ fontSize: 14, color: 'rgba(0,0,0,0.85)' }} numberOfLines={1}>{detail.threadUserName ? detail.threadUserName : ''}</Text>
                                <Text style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }} numberOfLines={1}>{(!!detail.user && !!detail.user.beAttentionNum) ? detail.user.beAttentionNum : 0}粉丝</Text>
                            </View>
                        </View>}
                    </View>
                    <Text style={{ fontSize: 18, color: '#000', position: 'absolute' }}>{this.logic.showHeaderInfo ? '' : ''}</Text>
                    <View style={{ width: 375 / 2 / zoomW, height: '100%', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }}>
                        {this.logic.showHeaderInfo && !!detail.user && detail.user.id != global.userId &&
                        <TouchableOpacity activeOpacity={0.8} style={detail.hasFollowed ? styles.hasFollow : [styles.notFollow,{backgroundColor:global.homeColor}]} onPress={() => NoDoublePress.onPress(() => this.followClick())}>
                            <Text style = {{ fontSize: 14, color: detail.hasFollowed ? 'rgba(0,0,0,0.45)' : '#fff' }}>{detail.hasFollowed ? '已关注' : '关注'}</Text>
                        </TouchableOpacity>
                        }
                        <TouchableOpacity style={{ height: '100%', justifyContent: 'center', paddingLeft: 15 / zoomW, paddingRight: 15 / zoomW }} onPress={() => NoDoublePress.onPress(() => this.showMoreModal())}>
                            <Image style={{ width: 21 / zoomW, height: 4 }} source={require('../../img/more.png')}  resizeMode="contain"/>
                        </TouchableOpacity>
                    </View>
                </View>}

                {/*/!*转发、评论、赞赏、赞tab栏*!/*/}
                {!this.state.firstIn && <View style = {{ flex: 1 }}>
                    <FlatList
                        style={{ flex: 1 }}
                        ref = 'flatList'
                        alwaysBounceVertical={false}
                        bounces={false}
                        onScroll={this.scroll.bind(this)}
                        onLayout = {(event)=>{this.onLayoutFlatList(event)}}
                        refreshing={false}
                        onEndReachedThreshold={0.01}
                        onEndReached={() => this._loadMore(this.state.currentTabIndex)}
                        keyExtractor={this.keyExtractor}
                        data={this._data(this.state.currentTabIndex)}
                        ListHeaderComponent = {this.renderListHeader()}
                        ListFooterComponent = {this.footerView()}
                        ListEmptyComponent = {this._emptyView(this.state.currentTabIndex)}
                        renderItem={this.renderItem.bind(this)}/>

                    {/*更多加载*/}
                    {this.state.loadMore && this.renderLoading()}
                </View>}

                {/*/!*评论输入框*!/*/}
                {!this.state.firstIn && !this.state.isFullScreen && !this.state.isShowCommentInput
                && this.renderCommentInput()}

                {/*更多操作*/}
                <CommentMore
                    ref='CommentMore'
                    detailInfo = {this.state.detailInfo}
                    collectClick = {()=>{}}
                    deleteClick = {()=>{this.props.navigation.goBack();}}
                    forum={global.forum}
                />

                {/*局部loading*/}
                {this.state.operatorLoading && (
                    <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>
                )}

                {Platform.OS == 'ios' && !this.state.loading && this.state.isShowCommentInput && <CommentInput
                    ref = "CommentInput"
                    boardId = {this.state.detailInfo.boardId}
                    callback = { (data)=>{this.toComment(data)}}
                    uploadCallback = {(isLoading) =>{this.setState({operatorLoading:isLoading})}}
                    nav = {this.props.navigation}
                    hasNavHeight = {false}
                />}
                {Platform.OS == 'android' &&<CommentInput
                    ref = "CommentInput"
                    boardId = {this.state.detailInfo.boardId}
                    callback = { (data)=>{this.toComment(data)}}
                    uploadCallback = {(isLoading) =>{this.setState({operatorLoading:isLoading})}}
                    nav = {this.props.navigation}
                    hasNavHeight = {false}
                />}
            </View>
        );
    }

    /// -------Video组件回调事件-------

    _onLoadStart = () => {
        console.log('视频开始加载');
    };

    _onBuffering = () => {
        console.log('视频缓冲中...')
    };

    _onLoaded = (data) => {
        console.log('视频加载完成');
        this.setState({
            duration: data.duration,
            // isBuffer: false,
        });
    };

    _onProgressChanged = (data) => {
        console.log('视频进度更新');
        if(this.state.isBuffer && this.logic.currentTime != 0) {
            this.setState({
                isBuffer: false,
            });
        }
        if (this.logic.isPlaying) {
            this.logic.moveSlider(data.currentTime);
        }
    };

    _onSeek = () => {
        this.logic.switchPlay(true);
        this.logic.tempSwitchPlay(true);
    }

    _onPlayEnd = () => {
        console.log('视频播放结束');
        this.logic.moveSlider(0);
        this.logic.switchPlay(false);
        this.logic.tempSwitchPlay(false);
        this.setState({
            playFromBeginning: true,
            showVideoControl: true
        });
    };

    _onPlayError = () => {
        console.log('视频播放失败');
    };

    ///-------控件点击事件-------

    /// 控制播放器工具栏的显示和隐藏
    hideControl() {
        if (this.state.showVideoControl) {
            this.setState({
                showVideoControl: false,
            })
        } else {
            this.setState({
                showVideoControl: true,
            }, () => {    // 2秒后自动隐藏工具栏
                setTimeout(() => {
                    if(this.logic.isPlaying) {
                        this.setState({
                            showVideoControl: false
                        });
                    }
                }, Platform.OS === 'ios' ? 5000 : 3000);
            })
        }
    }

    // 点击了播放器或工具栏上的播放按钮
    controlPlay() {
        if(!this.logic.isPlaying) {
            setTimeout(() => {
                if(this.logic.isPlaying) {
                    this.setState({
                        showVideoControl: false
                    });
                }
            }, Platform.OS === 'ios' ? 5000 : 3000);
        }
        this.logic.switchPlay(!this.logic.isPlaying);
        this.logic.tempSwitchPlay(!this.logic.tempIsPlaying);
        if (this.state.playFromBeginning) {
            this.videoPlayer.seek(0, '0');
            this.setState({
                playFromBeginning: false,
            })
        }
    }

    /// 点击了工具栏上的全屏按钮
    onControlShrinkPress() {
        if (this.state.isFullScreen) {
            if (Platform.OS === 'ios') {
                Orientation.lockToPortrait();
                Orientation.lockToPortrait();
            } else {
                Orientation.lockToPortrait();
            }
        } else {
            if (Platform.OS === 'ios') {
                Orientation.lockToPortrait();
                Orientation.lockToLandscape();
            } else {
                Orientation.lockToLandscape();
            }
        }
    }

    // 暂停视频
    pauseVideo = () => {
        this.logic.switchPlay(false);
        // if (this.state.playFromBeginning) {
        //     this.videoPlayer.seek(0, '0');
        //     this.setState({
        //         playFromBeginning: false,
        //     })
        // }
    }

    // 返回恢复视频状态
    recoverVideo = () => {
        this.logic.switchPlay(this.logic.tempIsPlaying);
        // if (this.state.playFromBeginning) {
        //     this.videoPlayer.seek(0, '0');
        //     this.setState({
        //         playFromBeginning: false,
        //     })
        // }
    }

    /// 进度条值改变
    onSliderValueChanged(currentTime) {
        if (this.logic.isPlaying) {
            this.logic.switchPlay(false);
            this.logic.tempSwitchPlay(false);
        }
        this.logic.moveSlider(currentTime);
    }

    /// 屏幕旋转时宽高会发生变化，可以在onLayout的方法中做处理，比监听屏幕旋转更加及时获取宽高变化
    _onLayout = (event) => {
        //获取根View的宽高
        let {width, height} = event.nativeEvent.layout;
        console.log('通过onLayout得到的宽度：' + width);
        console.log('通过onLayout得到的高度：' + height);

        // 一般设备横屏下都是宽大于高，这里可以用这个来判断横竖屏
        let isLandscape = (width > height);
        if (isLandscape){
            this.setState({
                videoWidth: width,
                videoHeight: height,
                isFullScreen: true,
            })
        } else {
            this.setState({
                videoWidth: 345 / zoomW,
                videoHeight: 213.5,
                isFullScreen: false,
            })
        }
    };
}

const styles = StyleSheet.create({
    background:{
        flex: 1,
        backgroundColor: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent:'flex-end'
    },
    headerWrap: {
        width: '100%',
        height: 44,
        backgroundColor: '#fff',
        borderBottomColor: '#ddd',
        borderBottomWidth: StyleSheet.hairlineWidth,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    reading:{
        fontSize:12,
        color:'rgba(0,0,0,0.45)',
        marginLeft:15/zoomW,
        marginTop:10/zoomH,
        marginBottom:10/zoomH
    },
    inputBg:{
        width:'100%',
        height:isIphoneX()?(44/zoomH+34):44/zoomH,
        backgroundColor:'#fff',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        paddingLeft:20/zoomW,
        paddingRight:20/zoomW,
        paddingBottom:isIphoneX()?34:0,
        borderColor: '#ddd',
        borderWidth: StyleSheet.hairlineWidth,
    },
    greyRadiusBg:{
        flex:1,
        flexDirection:'row',
        height:32/zoomH,
        justifyContent:'space-between',
        alignItems:'center',
        borderRadius:19/zoomW,
        backgroundColor:'#eeeeee'
    },
    img:{
        width:20/zoomW,
        height:20/zoomW,
        marginLeft:25/zoomW
    },
    loadingBg: {
        position: "absolute",
        top: 0,
        width: "100%",
        height: "100%",
        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"
    },
    forwardingBg: {
        paddingTop:14/zoomH,
        paddingBottom: 14/zoomH,
        borderWidth: 1,
        borderBottomWidth: 0,
        borderColor: "#eeeeee"
    },
    contentForwarding:{
        marginLeft:10/zoomW,
        marginRight:10/zoomW,
    },
    userNameBlack:{
        fontSize:14,
        color:"#000000"
    },
    centerWrap: {
        width: '100%',
        height: 213.5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    videoTimeWrap: {
        width: 40.5 / zoomW,
        height: 20,
        backgroundColor: 'rgba(0,0,0,0.45)',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        right: 15 / zoomW,
        bottom: 16
    },
    videoWrap: {
        width: 345 / zoomW,
        height: 213.5,
        backgroundColor: 'rgba(0,0,0,0.8)',
        justifyContent: 'center',
        alignItems: 'center'
    },
    playButton: {
        width: 50 / zoomW,
        height: 50 / zoomW,
    },
    playControl: {
        width: 15 / zoomW,
        height: 19,
    },
    shrinkControl: {
        width: 15 / zoomW,
        height: 15 / zoomW,
    },
    vTime: {
        fontSize: 12,
        color: '#fff',
        marginRight: 15 / zoomW
    },
    control: {
        width: '100%',
        height: 49,
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        position: 'absolute',
        bottom: 0,
        left: 0,
        flexDirection: 'row',
        alignItems:'center',
    },
    maskWrap: {
        width: '100%',
        height: '100%',
        backgroundColor: '#000',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        left: 0,
    },
    continueBtn: {
        width: 100 / zoomW,
        height: 28,
        borderRadius: 4,
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20
    },
    topInfoWrap: {
        flex: 1,
        height: '100%',
        flexDirection: 'row',
        alignItems: 'center',
    },
    avatar:{
        width: 32 / zoomW,
        height: 32 / zoomW,
        borderRadius: 16 / zoomW
    },
    avatarV:{
        width: 10 / zoomW,
        height: 10 / zoomW,
        position: 'absolute',
        right: 4 / zoomW,
        bottom: 2 / zoomW
    },
    hasFollow: {
        width: 60 / zoomW,
        height: 30,
        backgroundColor: '#E9E9E9',
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },
    notFollow: {
        width: 60 / zoomW,
        height: 30,

        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },

    tabWrap: {
        width: '100%',
        height: 32/zoomH,
        backgroundColor:'#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent:'space-between',
    },
    itemTabWrapBg:{
        height:'100%',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    tabMenuActiveWord: {
        fontSize: 14,
        color: '#000',
        fontWeight:'bold'
    },
    tabMenuWord: {
        fontSize: 14,
        color: 'rgba(0,0,0,0.45)',
    },
    tabBtn: {
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: 15/zoomW,
        paddingRight: 15/zoomW,
    },
    lineStyle: {
        width: 32,
        height: 3,
        borderRadius:2,
        position:'absolute',

        bottom: 0,
    },
    itemBackground:{
        width:'100%',
        flex:1,
        padding:15/zoomW,
        backgroundColor:'#fff',
        flexDirection :'row',
    },
    commonAvatar:{
        width:36/zoomW,
        height:36/zoomW,
        borderRadius:18/zoomW
    },
    commonAvatarV:{
        width:10/zoomW,
        height:10/zoomW,
        position:'absolute',
        right:1/zoomW,
        bottom:1/zoomW
    },
    userNameBlue:{
        marginTop:2,
        fontSize: 14,
        color:'#576B95',
    },
    userIdentity:{
        fontSize: 12,
        color:'#c3c3c3'
    },
    content:{
        fontSize: 16,
        color:'rgba(0,0,0,0.85)',
        marginTop:10/zoomH
    },
    textPrise:{
        fontSize: 13,
        color:'rgba(0,0,0,0.65)',
        marginLeft:5/zoomW
    },
    textPrised:{
        fontSize: 13,
        color:'#EF524C',
        marginLeft:5/zoomW
    },
    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,
    },
});