customer / shanghai-railway-rnapp

import React, {Component} from "react";
import {
    Alert,
    Animated,
    AsyncStorage,
    DeviceEventEmitter,
    Image,
    KeyboardAvoidingView,
    NetInfo,
    PixelRatio,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View, WebView,
    Keyboard,
    Dimensions,
    Modal,
    NativeModules,
    StatusBar,
    InteractionManager,
    ActivityIndicator,
} from "react-native";
import PropTypes from 'prop-types';
import {height, width, zoomH,zoomW} from "../../utils/getSize";
import ClassInfo from "../component/ClassInfo";
import Comment from "../component/Comment";
import Sound from "../component/Sound";

import {Tab, Tab1} from "./Integral";
import {observer} from "mobx-react/native";
import {observable} from "mobx";

import {xnToast,isIphoneX,NoDoublePress} from "../../utils/utils";
import AppService from "../../service/AppService";
import CourseList from "../component/CourseList";
import moment from 'moment';
import * as Orientation from "react-native-orientation";
import CommentInput from '../detail/CommentInput';
import CommentMore from '../detail/CommentMore';
const  wchatMoment = require('../../img/wchatMoment.png');
const  wchat = require('../../img/wchat.png');

const backArrow = require('../../img/backWhite.png');

//评论
const pinglun = require('../../img/pinglunB.png');
//观看
const guankan = require('../../img/guankan.png');
//喜欢&不喜欢
const unlike = require('../../img/xihuan.png');
const like = require('../../img/xihuan-jihuo.png');
//详情分享
const xiangqingfenxiang = require("../../img/xiangqing-fenxiang.png");

const xqbg = require('../../img/xiangqing-bg.png');
//荷角标
const heIcon = require('../../img/xiangqing-jiaobiao-01.png');

const fenxiang = require('../../img/xiangqing-fenxiang-02.png');
//右箭头
const rightArrow = require("../../img/youjiantou.png");
const prise = require('../../img/dz.png');
const prised = require('../../img/prised.png');

const writeIcon = require('../../img/writeIcon.png');
const emj = require('../../img/bq_q.png');
const forwarding = require('../../img/zf.png');
const reward = require('../../img/reward.png');
const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;
const __IOS__ = Platform.OS == "ios";

    @observer
export default class ClassGrade extends Component {
    // static contextTypes = {
    //     navigator: PropTypes.object,
    // };

    static navigationOptions = ({navigation, screenProps}) => ({
        header: null
    });

    @observable
    hasBuy = false;       // 当前课程是否已购买  true-已购买 false-未购买
    @observable
    hasQuestion = false;  // 课次是否有习题
    @observable
    hasTest = false;      // 当前课程是进行过测试 true-已测试 false-未测试
    @observable
    testGrade = 0;        // 当前课程测试分数
    @observable
    playStatus = "START"; // 视频播放器的状态 START-初始未定义状态 LOADING-加载视频中 BUFFERING-缓冲中 PLAYING-播放中 PAUSE-暂停 SEEK-拖动中 OVER-播放结束
    @observable
    url = "";             // 当前播放视频的地址
    @observable
    isFree = false;       // 课程是否在后台设置为收费
    @observable
    hasTransaction = false  //用户是否进行过交易操作
    @observable
    playList = "";             // 当前播放视频的地址


    @observable
    isPlaying = false;     // 当前播放状态 true-播放中 false-已暂停 (音视频共用一个)
    @observable
    playTpye = '';     // 当前视频的播放类型 Video-视频 Audio-音频
    //视频播放状态
    @observable
    paused = true;
    @observable
    changing = false;

    @observable
    duration = 1;
    left = new Animated.Value(-7.5);
    @observable
    choosed = 0;  // 当前选择的标签页 0-课程音频 1-详情 2-评论
    @observable
    y = 0;
    @observable
    fixHeight=425;
    @observable
    commentContent="";
    parentId=null;
    @observable
    commentPlaceholder="优质的评论将会被显示";
    hasRecord=false;  // 是否已记录过播放
    constructor(props) {
        super(props);
        this.state = {
            isLike: false,   // 用户是否已点赞
            showCom: false,  // 是否显示评论
            showSubjectTip: true,  // 是否显示去答题的提示
            courseList: [],  // 相关课程列表
            lessonList: [],// 当前课程的课次列表
            commentList: [],// 当前课次的评论列表
            commentCount: 0, // 当前评论次数
            course: {       // 当前课程信息
                name: "课程",
                description: "",
            },
            courseDetail: "",  // 课程详情
            lesson: {        // 当前课次信息
                id: 0,
                viewCount: 0
            },
            isConnected:false,
            connectionInfo:'',
            height: __IOS__ ? isIphoneX()?SCREEN_HEIGHT-44:SCREEN_HEIGHT-20:SCREEN_HEIGHT,
            width: SCREEN_WIDTH,
            isFullScreen : false,
            showSetting:false,
            bottom: new Animated.Value(-(320 / zoomH)),
            isShowCommentInput:false ,// 是否显示CommentInput输入框组件
            operatorLoading:false,
            threadExtend:{},//帖子信息
            commentNum:0,//评论数
            threadLike :{
                isActive:false,
                id:''
            },//是否已经点赞
            data5:[],

        }

    }

    componentWillMount() {

        // 获取当前的课程信息
        this.loadData();
        AppService.forumActionHistory({forumId:global.forumId,actionTargetId:this.props.navigation.state.params.id,actionType:30,actionTargetType:0,actionTargetThreadId:this.props.navigation.state.params.id}).then((data)=>{});
    }

    // 页面加载完成后执行的方法
    componentDidMount() {
        this.setState({isFullScreen:false});
        if(__IOS__)
        {
            // Orientation.addOrientationListener(this._orientationDidChange);
        }
        this.keyboardWillHide = Keyboard.addListener('keyboardWillHide', (e) => this._keyboardWillHide(e));
        this.keyboardDidChangeFrame  =Keyboard.addListener('keyboardDidChangeFrame', (e) => this._keyboardDidChangeFrame(e));
        this.keyboardWillShow  = Keyboard.addListener('keyboardWillShow', (e) => this._keyboardWillShow(e));

        let that = this;
        // 监控回复评论的事件
        this.eventReplyCommentListener = DeviceEventEmitter.addListener('eventReplyComment',(data) => {
            that.commentPlaceholder = "回复 "+data.userName;
            that.parentId = data.id;
            that.setState({showCom: true});
        });

        // 监控音频播放的事件
        this.eventAudioPlayListener = DeviceEventEmitter.addListener('eventAudioPlay',() => {
            if (this.playTpye == 'Video'){
                this.pause();
            }
            this.isPlaying = true;
            this.playTpye = 'Audio';
        });

        // 监控音频播放完毕事件
        this.eventAudioPlayListener = DeviceEventEmitter.addListener('eventAudioPuased',() => {
            this.isPlaying = false;
            this.playTpye = 'Audio';
            global.sound = null;
            global.radio = null;
        });

        //重新获取详情信息
        this.reGetThreadDetailInfo = DeviceEventEmitter.addListener('reGetThreadDetailInfo',function(){
            that.loadData();
        });

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

        //先检测一次网络连接信息
        this.checkNetworkIsConected();
        //检测网络连接信息
        NetInfo.fetch().done((connectionInfo) => {
            this.setState({connectionInfo});
        });

        //监听网络变化事件
        NetInfo.addEventListener('change', this.handleConnectivityChange);

        //获取是否允许在WIFI下播放
        AsyncStorage.getItem("hideWIFI", (error, arrStr) => {
            if (arrStr === null) {
                console.log("history" + "没有对应的值");
            } else {
                this.setState({hideWIFI:arrStr});
            }
        });


    };

    componentWillUnmount()
    {
        //   if(__IOS__) Orientation.removeOrientationListener(this._orientationDidChange)

        this.keyboardWillHide.remove();
        this.keyboardDidChangeFrame.remove();
        this.keyboardWillShow.remove();
        this.closeCommentInputIos.remove();
        //监听网络变化事件
        NetInfo.removeEventListener('change', this.handleConnectivityChange);
        this.eventReplyCommentListener.remove();
        this.eventAudioPlayListener.remove();
        if (global.sound) {
            global.sound.pause();
        }

    };


    //设置播放视频
    play = (playList, currentTime) =>{
        var that = this;

        if (that.playTpye == 'Audio' && that.isPlaying){
            // 暂停音频播放
            global.sound.pause();
            DeviceEventEmitter.emit('audioPause');
            DeviceEventEmitter.emit('VideoPlay');
        }
        // 变更播放状态信息
        that.isPlaying = true;
        that.playTpye = 'Video';
        const message = {
            command: 'play', // string
            payload: {  // any
                currentTime: !!currentTime == true?currentTime:0,
                playList: playList,
            }
        }
        if(this.refs.webview != undefined){
            this.refs.webview.postMessage(JSON.stringify(message))
        }

        // 保存最近访问课程
        AsyncStorage.setItem("endView", JSON.stringify({id:this.props.navigation.state.params.id, lessonId : this.state.lesson.id}), function (errs) {
            if (errs) {
                console.warn('存储报错：' + errs);
            }
        });

        if(this.isPlaying && !this.hasRecord) {
            // let request = new ObjectStatisticsChangeRequest();
            // request.setObjectType("COURSE_LESSON");
            // request.setObjectId(this.state.lesson.id);
            // request.setViewCount(1);
            // request.setCollectCount(0);
            // post(request).then(data=>{
            //     that.hasRecord = true;
            //     }
            // );
            const params = {
                objectType:"COURSE_LESSON",
                objectId:this.state.lesson.id,
                viewCount:1,
                collectCount:0
            };

            AppService.objectStatisticsChange(params).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    that.hasRecord = true;
                }
            }).catch(error => {
                xnToast(error);
            });

        }
    };

    //设置暂停视频播放
    pause = () =>{
        const message = {
            command: 'pause', // string
            payload: {  // any
            }
        }
        if(this.refs.webview)
        {
            this.refs.webview.postMessage(JSON.stringify(message));
            this.isPlaying = false;
            this.paused = true;
        }

    }
    //设置待播放状态
    setSource=(playList, currentTime)=>{
        const message = {
            command: 'source', // string
            payload: {  // any
                currentTime: !!currentTime == true?currentTime:0,
                playList: playList,
            }
        };
        this.refs.webview.postMessage(JSON.stringify(message))
    };

    _keyboardWillShow(e)
    {

        this.keyboardSHow = true;
    }
    _keyboardWillHide(e)
    {
        this.keyboardSHow = false;

        this.setState({height:isIphoneX()?SCREEN_HEIGHT-44:SCREEN_HEIGHT - 20});

    }
    _keyboardDidChangeFrame(e)
    {
        if(this.keyboardSHow  == true)
        {

            this.setState({height:SCREEN_HEIGHT - e.endCoordinates.height});
        }

    }

    // web播放器加载完毕
    webOnloadend=()=>{
        let that = this;
        //获取课次视频信息
        AppService.getVideo({id:this.state.lesson.videoId}).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                AsyncStorage.getItem(this.state.lesson.id,(error,result)=>{
                    let time ='0';
                    if (result){
                        time = result;
                    }
                    // 在播放音频时不自动播放视频
                    if(that.playTpye == 'Audio' && that.isPlaying){
                        that.setSource(data.video.playList, Number(time));
                    }else {
                        that.judgeNetWorkToPlayOrPause(data.video.playList, Number(time))
                    }
                });
            }
        }).catch(error => {
            xnToast(error);
        });




        // let request = {};
        // request.id = this.state.lesson.videoId;
        // request.method = 'education.video.get';
        // post(request).then(data => {
        //     if (!!data.errors === true && !!data.errors.length > 0) {
        //         xnToast(data.errors[0].message);
        //     } else {
        //         AsyncStorage.getItem(this.state.lesson.id,(error,result)=>{
        //             let time ='0';
        //             if (result){
        //                 time = result;
        //             }
        //             // 在播放音频时不自动播放视频
        //             if(that.playTpye == 'Audio' && that.isPlaying){
        //                 that.setSource(data.video.playList, Number(time));
        //             }else {
        //                 that.judgeNetWorkToPlayOrPause(data.video.playList, Number(time))
        //             }
        //         });
        //
        //     }
        // });

    }

    _orientationDidChange = (orientation) => {
        console.warn('LANDSCAPE')
        if (orientation === 'LANDSCAPE')
        {
            const message = {
                command: 'fullscreen',
                payload: {
                    fullScreen:true
                }
            };
            this.refs.webview.postMessage(JSON.stringify(message));
            // ios横屏的时候高度是占据了屏幕全部高度，不需要扣减20
            this.setState({isFullScreen:true, height:__IOS__ ? SCREEN_WIDTH - 0:SCREEN_WIDTH });
        }
        else
        {
            const message = {
                command: 'fullscreen',
                payload: {
                    fullScreen:false
                }
            }
            this.refs.webview.postMessage(JSON.stringify(message));
            // 从横屏切换回竖屏同样要考虑iphoneX的高度
            this.setState({isFullScreen:false, height:__IOS__ ? (isIphoneX()?SCREEN_HEIGHT-44:SCREEN_HEIGHT - 20):SCREEN_HEIGHT});
        }
    };

    // 判断当前网络是否支持播放
    judgeNetWorkToPlayOrPause = (playList, currentTime)=> {
        //判断当前网络状态
        if(!this.state.isConnected){
            xnToast("网络未连接,请先连接网络");
            return;
        }
        //如果不是wifi环境并且不允许在非WIFI下播放
        if(this.state.connectionInfo.toLocaleLowerCase() != "wifi" && this.state.hideWIFI != 'true'){
            Alert.alert(
                '注意',
                "当前处于非WIFI环境,是否继续播放",
                [
                    {text: '取消', onPress: () => console.log('OK Pressed!')},
                    {text: '确定', onPress: () => {this.play(playList, currentTime)}}
                ]
            )
        }else{
            this.play(playList, currentTime);
        }

    };

    audioPause=()=>{
        this.isPlaying = false;
    };

    // 初始加载课程数据
    loadData() {
        let that = this;
        //获取课次视频信息
        AppService.getCourseView({id:this.props.navigation.state.params.id}).then((data) => {
            console.log(this.props.navigation.state.params.id,data);
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                //帖子信息
                let isLike = data.threadExtend !=undefined && data.threadExtend.threadLike !=undefined ?data.threadExtend.threadLike.isActive || false :false;
                let likeId = isLike?data.threadExtend.threadLike.id:0;
                that.setState({
                    threadExtend: data.threadExtend || "",
                    commentNum :data.threadExtend !=undefined && data.threadExtend.threadStatistics != undefined ?
                        data.threadExtend.threadStatistics.commentNum :0 ,
                    threadLike:{
                        isActive:isLike,
                        id:likeId
                    },
                    data5:data.course.type === 'VIDEO'?[{name: '详情', key: 0}]:[{name: '课程音频', key: 0},
                        {name: '详情', key: 1}]
                });
                // 课程信息
                that.setState({course: data.course});
                // 课程介绍
                that.setState({courseDetail: data.detail});
                // 相关课程列表
                that.setState({courseList: data.relateCourseList});
                if (data.courseLessons == undefined || data.courseLessons.length == 0){
                    return;
                }
                // 获取当前课次的信息
                let lesson = data.courseLessons[0];

                that.hasTransaction = data.hasTransaction;
                that.isFree = data.course.isFree;

                for (let i = 0; i < data.courseLessons.length; i++) {
                    // 所有音频初始都处于暂停状态
                    data.courseLessons[i].paused = true;
                    data.courseLessons[i].index = i + 1;
                    if (data.courseLessons[i].id == that.props.navigation.state.params.lessonId) {
                        lesson = data.courseLessons[i];
                    }
                }

                that.loadLesson(lesson);
                that.setState({lessonList: data.courseLessons});
                if (global.sound && global.radio && !global.radio.paused) {
                    this.playTpye = 'Audio';
                    this.isPlaying = true;
                }

                // 是否已收藏
                that.setState({isLike: data.hasCollection});
                that.setState({likeId: data.collectionId});

                // 获取课程简介栏的高度
                setTimeout(function () {
                    if(that.refs.dynamicView) {
                        that.refs.dynamicView.measure((x, y, width, height, pageX, pageY) => {
                            that.fixHeight = 375 + height;
                        })
                    }
                });

                // 记录课程访问记录
                AppService.createUserHistory({actionType:"VIEW",objectType:"COURSE",objectId:data.course.id,objectName:data.course.name,objectImage:data.course.pictureUrl,time:moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}).then((data)=>{

                }).catch(error => {
                    console.log(error);
                });

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

    }
    // 加载课次的信息
    loadLesson(lesson) {
        if (!lesson) {
            return;
        }
        let that = this;

        if (that.isFree){
            that.hasBuy = true;
        }else if (that.hasTransaction){
            that.hasBuy = true;
        }else if (lesson.isFree){
            that.hasBuy = true;
        }else {
            that.hasBuy = false;
            that.paused = true;
        }

        that.hasQuestion = lesson.hasQuestion;
        that.hasRecord = false;
        that.changing = true;
        if (that.timeout) {
            clearTimeout(that.timeout);
        }

        that.setState({lesson: lesson});
        that.setState({commentList: []});

        if(that.playTpye != ''){

            AppService.getVideo({id:lesson.videoId}).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    AsyncStorage.getItem(lesson.id,(error,result)=>{
                        let time ='0';
                        if (result){
                            time = result;
                        }
                        if (that.hasBuy){
                            that.judgeNetWorkToPlayOrPause(data.video.playList, Number(time))
                        }
                    });
                }
            }).catch(error => {
                xnToast(error);
            });


        }

        // 判断当前用户是否完成了课次的测评
        AppService.findTestingResult({objectType:"LESSON",objectId:lesson.id,userId:global.userId}).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                if (data.result && data.result.length > 0) {
                    that.hasTest = true;
                    that.testGrade = data.result[0].point;
                } else {
                    that.hasTest = false;
                }
            }
        }).catch(error => {
            xnToast(error);
        });


        // 加载课次的评论列表
        //this.loadCommentList(lesson.id);
    }

    // 顶部视频播放视图
    renderVideo = () => {
        // 如果课程未进行购买
        if (!this.hasBuy) {
            return (
                <View>
                    <Image
                        source={xqbg}
                        style={{width: width, height: 200}}
                        resizeMode='cover'>

                        <View style={{flex: 1}}>
                            <View style = {{width:'100%',flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                                <TouchableOpacity style={[styles.topBack, {width: 40,height: Platform.OS === 'ios' ? 40 : 40}]}>
                                    <TouchableOpacity style={styles.backBorder} onPress={() => this.props.navigation.goBack()}>
                                        <Image
                                            source={backArrow}
                                            resizeMode="contain"
                                            style={styles.backIcon}
                                        />
                                    </TouchableOpacity>
                                </TouchableOpacity>
                                <View style = {{backgroundColor:'#fff'}}></View>
                                <TouchableOpacity style={[styles.topBack, {width: 40,height: Platform.OS === 'ios' ? 40 : 40,marginRight:15}]}>
                                    <TouchableOpacity style={[styles.backBorder]} onPress={() => this.showMoreModal()}>
                                        <Image
                                            source={require('../../img/more_w.png')}
                                            resizeMode="contain"
                                            style={styles.backIcon}
                                        />
                                    </TouchableOpacity>
                                </TouchableOpacity>

                            </View>

                            <View style={styles.other}>
                                <Text style={{fontSize: 14, color: '#ffffff', backgroundColor: 'transparent'}}>本课程为付费课程</Text>
                                <TouchableOpacity style={[styles.redBtn, {width: 100, height: 30, marginTop: 25}]} onPress={()=>NoDoublePress.onPress(()=>this.toBuy())}>
                                    <Text style={[styles.font3, {fontSize: 12}]}>立即购买</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </Image>
                </View>
            )
        }
        // 如果课程已购买，直接播放课程
        // http://medical-video-dev.oss-cn-hangzhou.aliyuncs.com/test.html?111 这个是dev测试用的
        // xxxxx 这个是生产环境用的
        // http://heren-cdn.oss-cn-hangzhou.aliyuncs.com/rn/videoplugin/test.html?222 这个是原小荷作文的配置
        // 以上htl都需要在对应的oss上进行部署(有个dist文件夹需要整体赋值过去，都是js方法)
        return (
            <View>
                <View  style={[this.state.isFullScreen? styles.videoFullScreen:styles.video, {backgroundColor: 'black'}]}  >
                    <WebView ref='webview' source={{uri:'http://medical-video-dev.oss-cn-hangzhou.aliyuncs.com/test.html?111' }} allowsInlineMediaPlayback ={true} mediaPlaybackRequiresUserAction = {false} onLoadEnd={this.webOnloadend}  onMessage={this.handleMessage} />
                </View>

                <View style={[styles.topBack, {position: 'absolute', top: 0, left: 0}]}>
                    <TouchableOpacity style={[styles.backBorder, {}]} onPress={() => this.props.navigation.goBack()}>
                        <Image
                            source={backArrow}
                            resizeMode="contain"
                            style={styles.backIcon}
                        />
                    </TouchableOpacity>
                </View>

                <View style={[styles.topBack, {position: 'absolute', top: 0, right: 0,paddingRight:15}]}>
                    <TouchableOpacity style={[styles.backBorder]} onPress={() => this.showMoreModal()}>
                        <Image
                            source={require('../../img/more_w.png')}
                            resizeMode="contain"
                            style={styles.backIcon}
                        />
                    </TouchableOpacity>
                </View>

            </View>
        )
    };
    // web播放器发送的回调
    handleMessage = (event) => {
        var that = this;
        const message = JSON.parse(event.nativeEvent.data)
        if (message.command === 'fullscreen') {
            Orientation.getOrientation(function (error,orientation) {
                if (orientation == 'LANDSCAPE')
                {
                    Orientation.lockToPortrait();
                }
                else {
                    Orientation.lockToLandscapeLeft();
                }
                setTimeout(function()
                {

                    Orientation.getOrientation(function (error,orientation) {
                        console.warn(orientation);
                        if (orientation === 'LANDSCAPE')
                        {
                            const message = {
                                command: 'fullscreen',
                                payload: {
                                    fullScreen:true
                                }
                            }
                            that.refs.webview.postMessage(JSON.stringify(message));
                            that.setState({isFullScreen:true, height:__IOS__ ? SCREEN_WIDTH - 20:SCREEN_WIDTH - 20});
                        }
                        else
                        {
                            const message = {
                                command: 'fullscreen',
                                payload: {
                                    fullScreen:false
                                }
                            }
                            that.refs.webview.postMessage(JSON.stringify(message));
                            that.setState({isFullScreen:false, height:__IOS__ ? (SCREEN_HEIGHT-(isIphoneX()? 44:20)):SCREEN_HEIGHT - 20});
                            // qianjun:从横屏恢复需要将scrollView往上拉一下否则顶部会有个灰边
                            that.refs.sc.scrollTo(0, 0, false);
                        }
                    })
                }, 500);

            })
        }else if(message.command === 'play'){
            this.isPlaying = true;
            this.playTpye = 'Video';
            DeviceEventEmitter.emit('VideoPlay');
            if (global.sound){
                global.sound.pause();
                DeviceEventEmitter.emit('audioPause');
            }

        }else if(message.command === 'pause'){
            if (this.playTpye == 'Video'){
                this.isPlaying = false;
            }
        }
        else if(message.command === 'currentTime'){

            AsyncStorage.setItem(this.state.lesson.id, String(message.payload.currentTime)?String(message.payload.currentTime):'0',(error)=>{
                console.log(message.payload.currentTime);
            });
        }
        if (message.command === 'ended')
        {
            AsyncStorage.removeItem(this.state.lesson.id);
            this.isPlaying = false;
            this.playTpye = 'Video';
        }
    }

    // 加载课次的评论列表数据
    loadCommentList(lessonId) {
        let that = this;
        // 加载当前课次的评论列表
        const prams={
            businessType:"LESSON",
            businessId:lessonId,
        };
        AppService.getCommentByBusinessId(prams).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                // 检查评论列表中的点赞情况
                let ids = [];
                for (let i = 0; i < data.result.length; i++) {
                    data.result[i].isLike = false;
                    ids.push(data.result[i].id);
                }
                AppService.findCommentLikeRequest({ids:ids}).then((data1) => {
                    if (data1.message) {
                        xnToast(data1.message);
                        return;
                    }
                    if (data1.errors.length > 0) {
                        xnToast(data1.errors[0].message);
                    } else {
                        for (let i = 0; i < data.result.length; i++) {
                            for (let j = 0; j < data1.result.length; j++) {
                                if (data.result[i].id === data1.result[j].postId) {
                                    data.result[i].isLike = true;
                                    break;
                                }
                            }
                        }
                    }
                    that.setState({commentList: data1.result});
                    that.setState({commentCount: data1.totalCount});
                })

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

    }


    //检测网络是否连接
    checkNetworkIsConected = () => {
        NetInfo.isConnected.fetch().done((isConnected) => {
            this.setState({isConnected:isConnected});
        });
    };

    //处理网络变化的情况
    handleConnectivityChange = (networkType) => {
        this.setState({connectionInfo: networkType});
        this.checkNetworkIsConected();
    };

    // 课次列表中的一个课次
    renderClass = (lesson, index) => {
        return (
            <TouchableOpacity style={styles.selectBlock} key={index} onPress={() => this.loadLesson(lesson)}>
                {lesson.id !== this.state.lesson.id && <Text style={styles.font7}>{String(lesson.index)}</Text>}
                {lesson.id === this.state.lesson.id && <Text style={styles.font7Select}>{String(lesson.index)}</Text>}
                {!lesson.isFree && <Image source={heIcon} style={styles.icon7} resizeMode="contain"/>}
            </TouchableOpacity>
        )
    };

    // 视频统计信息页面
    info = () => {
        return (
            <View style={[styles.info, {width}]}>
                <View style={styles.leftCon}>
                    {/*<TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}} onPress={() => this.scroll()}>*/}
                    {/*<Image*/}
                    {/*source={pinglun}*/}
                    {/*resizeMode="contain"*/}
                    {/*style={styles.icon5}*/}
                    {/*/>*/}

                    {/*<Text style={styles.font1}>{this.state.commentCount}</Text>*/}
                    {/*</TouchableOpacity>*/}
                    <Image
                        source={guankan}
                        resizeMode="contain"
                        style={styles.icon5}
                    />
                    <Text style={styles.font1}>{this.state.lesson.viewCount}次观看</Text>
                </View>
                {/*<View style={styles.rightCon}>*/}
                {/*<TouchableOpacity style={styles.btnCon1} onPress={() => this.clickLike()}>*/}
                {/*<Image*/}
                {/*source={!this.state.isLike ? unlike : like}*/}
                {/*resizeMode="contain"*/}
                {/*style={[styles.icon6, {marginRight: 4}]}*/}
                {/*/>*/}
                {/*<Text style={styles.font1}>喜欢</Text>*/}
                {/*</TouchableOpacity>*/}
                {/*<View style={styles.separator}>*/}
                {/*</View>*/}
                {/*<TouchableOpacity style={styles.btnCon} onPress={this.toShare}>*/}
                {/*<Image*/}
                {/*source={xiangqingfenxiang}*/}
                {/*resizeMode="contain"*/}
                {/*style={styles.icon6}*/}
                {/*/>*/}
                {/*<Text style={styles.font1}>分享</Text>*/}
                {/*</TouchableOpacity>*/}
                {/*</View>*/}
            </View>
        )
    };
    // 标题&简介&课次
    contentDock = (lessonList) => {
        return (
            <View style={styles.contentDock}>
                <View ref="dynamicView" style={styles.artCon}>
                    <View style={styles.leftArtCon}>
                        <Text style={styles.titleCon}>{this.state.course.name}</Text>
                        <Text style={styles.infoCon}>简介:{this.state.course.description}</Text>
                    </View>
                    {this.typeGet()}
                </View>
                <View style={styles.classCon}>
                    <View style={styles.classAll}>
                        <Text style={styles.font6}>选课次</Text>
                        <View style={styles.classAllRight}>
                            <Text>{this.state.lessonList.length}课次全</Text>
                            <Image
                                source={rightArrow}
                                resizeMode="contain"
                                style={styles.rightArrow}
                            />
                        </View>
                    </View>
                    <ScrollView
                        showsHorizontalScrollIndicator={false}
                        horizontal={true}
                    >
                        <View>
                            <View style={styles.classSelect}>
                                {
                                    lessonList.map((v, i) => this.renderClass(v, i))
                                }
                            </View>
                        </View>
                    </ScrollView>
                </View>
            </View>
        )
    };
    typeGet = () => {
        if (this.hasBuy) {
            if (this.hasTest) {
                return (
                    <TouchableOpacity style={styles.rightArtCon} onPress={this.toResultAll}>
                        <Text style={styles.grade}>{this.testGrade}<Text style={styles.gradeinfo}>分</Text></Text>
                    </TouchableOpacity>
                )
            } else if(this.hasQuestion){
                return (
                    <TouchableOpacity style={styles.rightArtConBuy1} onPress={this.toSubject}>
                        <View style={styles.redBtn}>
                            <Text style={styles.font3}>去答题</Text>
                        </View>
                    </TouchableOpacity>
                );
            }
        } else {
            return (
                <View style={styles.rightArtConBuy}>
                    <TouchableOpacity style={styles.redBtn} onPress={()=>NoDoublePress.onPress(()=>this.toBuy())}>
                        <Text style={styles.font3}>立即购买</Text>
                    </TouchableOpacity>
                    <View style={styles.priceCon}>
                        <View style={{flexDirection: 'row', alignItems: 'center', marginRight: 5}}>
                            <Text style={styles.font44} includeFontPadding={false}>¥</Text>
                            <Text style={styles.font4} includeFontPadding={false}>{this.state.course.salePrice}</Text>
                        </View>
                        {
                            this.state.course.listPrice !== this.state.course.salePrice &&
                            <Text style={styles.font5} includeFontPadding={false}>¥{this.state.course.listPrice}</Text>
                        }
                    </View>
                </View>
            );
        }
    };

    //悬浮按钮
    renderButton = () => {
        if (this.hasQuestion && this.hasBuy) {
            if (this.hasTest) {
                return (
                    <View style={styles.suspensionBtn2}>
                        <TouchableOpacity style={styles.suspensionBtn}
                                          onPress={()=>NoDoublePress.onPress(()=>this.toResultAll())}>
                            <Text style={styles.font14}>查看答题详情</Text>
                        </TouchableOpacity>
                        <Image resizemode={'contain'} style={styles.suspensionBtnIcon1}
                               source={require('../../img/jiaotou-xiangxia.png')}/>
                    </View>
                )
            } else {
                return (
                    <View style={styles.suspensionBtn1}>
                        {this.state.showSubjectTip &&
                        <TouchableOpacity onPress={() => this.setState({showSubjectTip: false})}>
                            <View style={styles.suspensionBtn}>
                                <Text style={styles.font14}>答题可获得相应的积分</Text>
                            </View>
                        </TouchableOpacity>}
                        {this.state.showSubjectTip &&
                        <Image resizemode={'contain'} style={styles.suspensionBtnIcon}
                               source={require('../../img/jiaotou-xiangxia.png')}/>}
                    </View>
                );
            }
        } else {
            return (<View/>);
        }
    };

    // 跳转至全屏页面
    toFullScreen = () => {

        this.pause();
        // this.context.navigator.push({
        //   location: '/video/fullscreen',
        //   passProps: {
        //     uri: this.url
        //   }
        // })
    };
    // 跳转至分享页面
    toShare = () => {


        this.openModal();
        console.warn('toShare');
        // mobShare('河马课堂', this.state.course.name, 'page=course&id=' + this.state.course.id, this.state.course.pictureUrl);
    };
    // 跳转至购买页面
    toBuy = () => {
        this.props.navigation.navigate("PayResult",{course:this.state.course,lessonCount:this.state.lessonList.length,buy:() => this.hasBuy = true})
        // this.context.navigator.push({
        //     location: "/pay/payresult",
        //     passProps: {
        //         buy: () => this.hasBuy = true,
        //         course: this.state.course,
        //         lessonCount:this.state.lessonList.length
        //     }
        // });
    };
    // 跳转至答题页面
    toSubject = () => {
        this.props.navigation.navigate("Exercises",{objectType:"COURSE_LESSON",objectId:this.state.lesson.id,testTitle:this.state.course.name,setScore:(score) => {this.testGrade = score},do:() => this.hasTest = true});

    };
    // 跳转至答题解析页面
    toResultAll = () => {

        this.props.navigation.navigate("Exercises",{type: 'allLoad',objectType:"COURSE_LESSON",objectId: this.state.lesson.id,do:() => this.hasTest = true});

    };
    // 点击写评论
    makeCom = () => {
        this.commentPlaceholder="优质的评论将会被显示";
        this.setState({
            showCom: !this.state.showCom
        })
    };
    // 取消书写评论
    makeCancel = () => {
        // this.commentPlaceholder="优质的评论将会被显示";
        this.commentContent = ''
        this.setState({
            showCom: !this.state.showCom
        })
    };

    // 提交评论
    makeComment = () => {
        let that = this;
        // 提交评论
        const parms = {
            businessType:"LESSON",
            businessId:this.state.lesson.id,
            userId:global.userId,
            content:this.commentContent,
            parentId:this.parentId?this.parentId:undefined,
            anonymous:false
        };

        AppService.createCommentRecord(parms).then((data) => {
            if (data.message) {
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                that.setState({showCom: false});
                that.commentContent = "";
                xnToast("评论发布成功，审核通过后将显示在列表中");

                // 重新加载评论列表
                that.loadCommentList(this.state.lesson.id);
            }
        }).catch(error => {
            xnToast(error);
        });


        // let createRequest = new CommentRecordCreateRequest();
        // createRequest.setBusinessType("LESSON");
        // createRequest.setBusinessId(this.state.lesson.id);
        // if(this.parentId) {
        //     createRequest.setParentId(this.parentId);
        // }
        // createRequest.setAnonymous(false);
        // createRequest.setUserId(global.cache.passport.userId);
        // createRequest.setContent(this.commentContent);
        // post(createRequest).then(data => {
        //     if (!!data.errors === true && !!data.errors.length > 0) {
        //         xnToast(data.errors[0].message);
        //     } else {
        //         that.setState({showCom: false});
        //         that.commentContent = "";
        //         xnToast("评论发布成功，审核通过后将显示在列表中");
        //
        //         // 重新加载评论列表
        //         that.loadCommentList(this.state.lesson.id);
        //     }
        // });

        this.setState({
            showCom: !this.state.showCom
        });
        this.parentId = null;
    };
    //滚动到评论页
    scroll = () => {
        this.choosed = 2;
        setTimeout(() => this.refs.sc.scrollTo(this.fixHeight, 0, true), 500)
    };
    // 点赞或取消点赞
    clickLike = () => {
        let that = this;
        if (that.state.isLike) {
            // 取消点赞
            AppService.deleteUserCollection({id:this.state.likeId}).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    that.setState({isLike: false});
                }
            }).catch(error => {
                xnToast(error);
            });

            // 取消点赞
            // let cancelRequest = new UserCollectionDeleteRequest();
            // cancelRequest.setId(this.state.likeId);
            // post(cancelRequest).then(data => {
            //     if (!!data.errors === true && !!data.errors.length > 0) {
            //         xnToast(data.errors[0].message);
            //     } else {
            //         that.setState({isLike: false});
            //     }
            // })
        } else {
            // 点赞
            AppService.createUserCollection({objectType:"COURSE",objectId:this.props.navigation.state.params.id,objectName:this.state.course.name,objectImage:this.state.course.pictureUrl}).then((data) => {
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    that.setState({isLike: true});
                    that.setState({likeId: data.id});
                }
            }).catch(error => {
                xnToast(error);
            });


            // let likeRequest = new UserCollectionCreateRequest();
            // likeRequest.setObjectType("COURSE");
            // likeRequest.setObjectId(this.props.id);
            // likeRequest.setObjectName(this.state.course.name);
            // likeRequest.setObjectImage(this.state.course.pictureUrl);
            // post(likeRequest).then(data => {
            //     if (!!data.errors === true && !!data.errors.length > 0) {
            //         xnToast(data.errors[0].message);
            //     } else {
            //         that.setState({isLike: true});
            //         that.setState({likeId: data.id});
            //     }
            // })
        }
    };
    onScroll = (v) => {
        if (__ANDROID__) {
            const {contentOffset} = v.nativeEvent;
            const {x, y} = contentOffset;
            this.y = y
        }
    };

    /*模态框取消操作*/
    closeModal() {
        this.setState({
            showSetting: false,
            bottom: new Animated.Value(-(320 / zoomH))
        },function(){
            StatusBar.setBackgroundColor(global.homeColor);});

    };


    //打开更多弹窗
    openModal = () =>{
        this.setState({
            showSetting: true
        },function () {
            StatusBar.setBackgroundColor("rgba(0,0,0,0.50)");

        });
        Animated.timing(
            this.state.bottom,
            {toValue: (0 / zoomH)}
        ).start();
    };

    wchatShare(){
        var wxOriginalID = '';
        if(global.appTarget == 'fangPartner'){
            // 芳聊小程序的原始ID
            wxOriginalID = 'gh_38cacc3e0a30';
        }
        // 这是测试App 300029承租人下的芳聊社区，用于debug芳聊测试环境的小程序
        if(global.appTarget == 'xntalkTest' || global.appTarget == 'fang'){
            wxOriginalID = 'gh_e1c3c68d4919';
        }
        let path = '';//小程序的地址 path
        var temp = '';
        var webUrl = 'https://sns.xiniunet.com/wechatpage/dist/index.html#/center';

        webUrl = webUrl + '?path='+path;

        let thumbUrl = "";
        if ( !! this.state.course.pictureUrl ){
            thumbUrl  = this.state.course.pictureUrl;
        }
        // 默认图片
        if(thumbUrl.length == 0){
            thumbUrl = 'https://cdn.xiniunet.com/img/sns/fang/wxshare_defaultImg.jpg';
        }
        let title = this.state.course.name;
        let description = this.state.courseDetail?this.state.courseDetail:title;

        NativeModules.system.wchatShare(path,webUrl,title,description ,thumbUrl,wxOriginalID);
    }

    wchatCircleShare(){
        var wxOriginalID = '';
        if(global.appTarget == 'fangPartner'){
            // 芳聊小程序的原始ID
            wxOriginalID = 'gh_38cacc3e0a30';
        }
        // 这是测试App 300029承租人下的芳聊社区，用于debug芳聊测试环境的小程序
        if(global.appTarget == 'xntalkTest' || global.appTarget == 'fang'){
            wxOriginalID = 'gh_e1c3c68d4919';
        }
        let path = '';//小程序的地址 path
        var webUrl = 'https://sns.xiniunet.com/wechatpage/dist/index.html#/center'

        webUrl = webUrl + '?path='+path;
        // console.log(webUrl);

        let thumbUrl = "";
        if ( !! this.state.course.pictureUrl ){
            thumbUrl  = this.state.course.pictureUrl;
        }
        // 默认图片
        if(thumbUrl.length == 0){
            thumbUrl = 'https://cdn.xiniunet.com/img/sns/fang/wxshare_defaultImg.jpg';
        }

        let title = this.state.course.name;
        let description = this.state.courseDetail?this.state.courseDetail:title;
        NativeModules.system.wchatCircleShare(webUrl,title,description ,thumbUrl,wxOriginalID);
    }


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


        let forwardData = {
            forumId: data.forumId,//社区id
            boardId: data.boardId,//版块ID,
            threadId :data.id,//帖子id
            firstFileUrl:firstFileUrl,
            atList:atList,//帖子@的人列表
            placeHolderContent:placeHolderContent,//转发的转发，别人转发的内容
            content:content,//帖子内容，需要自己拼接为 username：content 的格式
        }
        this.props.navigation.navigate('Forwarding',{from:'Detail',data:forwardData,title:'123',isVideo:this.props.isVideo})


    };


    //点赞
    _starClick (isLike,type){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        if(this.state.operatorLoading){
            //正在操作
            return;
        }
        let data = this.state.threadExtend;
        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,
                        threadLike:{
                            isActive:true,
                            id:data.id,
                        }
                    });
                }
            }).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 {
                    _this.setState({
                        operatorLoading:false,
                        threadLike:{
                            isActive:false,
                            id:data.id,
                        }
                    });
                    xnToast('已取消点赞');


                }
            }).catch((error) => {
                _this.setState({
                    operatorLoading:false,
                });
                xnToast(error)
            })
        }


    };

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

    //写评论
    commentClick (){
        if (Platform.OS == 'ios'){
            this.setState({
                isShowCommentInput:true
            });
        }
        InteractionManager.runAfterInteractions(() => {
            this.refs.CommentInput.showInputLayout();
        });
    };
    //评论
    toComment=(data)=> {
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            this.setState({
                operatorLoading:false,
            });
            return;
        }
        Keyboard.dismiss();
        this.setState({
            operatorLoading:true,
        });

        let forwardRichTxt = data.forwardRichContent==''?'':data.forwardRichContent +'</div>';
        let params = {
            forumId:this.state.threadExtend.forumId,//社区id
            boardId:this.state.threadExtend.boardId,//版块ID
            threadId:this.props.navigation.state.params.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('PINGLUN',params);

        let _this = this;
        AppService.creatCommentOrReply(params).then((result) => {

            if (result.message) {
                xnToast(result.message);
                this.setState({
                    operatorLoading:false,
                });
                return;
            }
            if (result.errors.length > 0) {
                this.setState({
                    operatorLoading:false,
                });
                xnToast(result.errors[0].message);
            } else {
                xnToast("已评论");
                let num = this.state.commentNum;
                this.setState({
                    operatorLoading:false,
                    commentNum : num+1,
                });
                if(this.refs.CommentInput != undefined){
                    InteractionManager.runAfterInteractions(() => {
                        this.refs.CommentInput.reset();
                    });
                }
            }
        }).catch((error) => {
            xnToast(error);
            this.setState({
                operatorLoading:false,
            });
        })
    };


    //去评论列表页面
    toCommentList(){
        this.props.navigation.navigate("AtlasComment", {
            mainData:{
                id:this.props.navigation.state.params.id,
                forumId:this.state.threadExtend.forumId,
                boardId:this.state.threadExtend.boardId
            }
        });
    }
    renderCommentInput(){
        return (
            <View style = {styles.inputBg}  >
                <TouchableOpacity style = {styles.greyRadiusBg}  onPress = {()=>{NoDoublePress.onPress(()=>this.commentClick())}}>
                    <Text style = {{fontSize:14,color:'rgba(0,0,0,0.25)',marginLeft:14/zoomW}}>写评论...</Text>
                    <Image style={{width:20/zoomW,height:20/zoomW,marginRight:8/zoomW}} source={emj} resizeMode="cover"  ></Image>
                </TouchableOpacity>
                {/*评论*/}
                <TouchableOpacity  onPress = {() =>{NoDoublePress.onPress(()=>{
                    this.toCommentList();
                })}} >
                    <Image style={[styles.img,{marginRight:10}]} source={require('../../img/pingLun.png')} resizeMode="contain"  ></Image>
                    {this.state.commentNum >0 &&
                    <View style={{backgroundColor:'#F4302A', height:10/zoomW,width:17/zoomW,borderRadius:5/zoomW,position:'absolute',right:2,top:0, justifyContent:'center',alignItems:'center'}}>
                        <Text style={{fontSize:6,color:'white'}}> { this.state.commentNum} </Text>
                    </View>
                    }
                </TouchableOpacity>
                {/*点赞*/}
                <TouchableOpacity onPress = {() =>{NoDoublePress.onPress(()=>{
                    this._starClick(this.state.threadLike.isActive?false:true,0)
                })}} >
                    <Image style={styles.img} source={this.state.threadLike.isActive? prised:prise} resizeMode="contain"  ></Image>
                </TouchableOpacity>
                {/*转发*/}
                {/*<TouchableOpacity  onPress = {()=>{NoDoublePress.onPress(()=>{*/}
                {/*this._forwardingClick()*/}
                {/*})}}>*/}
                {/*<Image style={styles.img} source={forwarding} resizeMode="cover"  ></Image>*/}
                {/*</TouchableOpacity>*/}
            </View>
        );
    }

    render() {
        // Tab栏配置
        // const data5 = [
        //     {name: '课程音频', key: 0},
        //     {name: '详情', key: 1},
        // ];

        return (

            <View style={[styles.container,{flex:1, height:__IOS__ ? this.state.height : SCREEN_HEIGHT - 20},
                {marginTop:this.state.isFullScreen?0:((__IOS__ ? isIphoneX()? 44:20 : 0))}]} >
                {/* 视频播放 */}
                {this.renderVideo()}

                <ScrollView
                    showsVerticalScrollIndicator={false}
                    ref="sc"
                    stickyHeaderIndices={[2]}
                    onScroll={this.onScroll}
                    style={{zIndex:this.state.isFullScreen? -1:0}}
                >
                    <View>
                        {this.info()}
                        {this.contentDock(this.state.lessonList)}
                        {this.renderButton()}
                    </View>

                    {/*相关课程*/}
                    <CourseList data={this.state.courseList} nav={this.props.navigation}/>

                    <Tab data={this.state.data5} choosed={this.choosed} change={v => this.choosed = v} style={{width: width}}/>

                    {this.state.course.type === 'VIDEO' && this.choosed === 0 && <ClassInfo html={this.state.courseDetail}/>}
                    {this.state.course.type != 'VIDEO' && this.choosed === 0 && <Sound ref="sound" musicData={this.state.lessonList}
                                                  hasBuy={this.hasBuy} toBuy={this.toBuy} hasTransaction={this.hasTransaction} isFree={this.isFree} playType={this.playTpye} playState={this.isPlaying} audioPause={this.audioPause}/>}
                    {this.state.course.type != 'VIDEO' && this.choosed === 1 && <ClassInfo html={this.state.courseDetail}/>}
                    {this.choosed === 2 && <Comment data={this.state.commentList}/>}

                </ScrollView>

                {(__ANDROID__ && this.y > this.fixHeight) && <Tab1 data={this.state.data5} choosed={this.choosed} change={v => this.choosed = v}
                                                                   style={{position: 'absolute', top: 200, left: 0, width}}/>}
                {/*评论输入框*/}
                {!this.state.isShowCommentInput && !this.state.isFullScreen&& this.renderCommentInput()}
                {Platform.OS == 'ios' && this.state.isShowCommentInput && <CommentInput  ref = "CommentInput"
                                                                                               hideForward = {true}
                                                                                               boardId = {this.state.threadExtend.boardId}
                                                                                               callback = { (data)=>{this.toComment(data)}}
                                                                                               uploadCallback = {(isLoading) =>{this.setState({operatorLoading:isLoading})}}
                                                                                               nav = {this.props.navigation}
                                                                                               hasNavHeight = {true}
                />}
                {Platform.OS == 'android' &&<CommentInput  ref = "CommentInput"
                                                           hideForward = {true}
                                                           boardId = {this.state.threadExtend.boardId}
                                                           callback = { (data)=>{this.toComment(data)}}
                                                           uploadCallback = {(isLoading) =>{this.setState({operatorLoading:isLoading})}}
                                                           nav = {this.props.navigation}
                                                           hasNavHeight = {true}
                />}
                {/*更多操作*/}
                <CommentMore
                    ref='CommentMore'
                    detailInfo = {this.state.threadExtend}
                    collectClick = {()=>{}}
                    deleteClick = {()=>{this.props.navigation.goBack();}}
                    forum={global.forum}
                />
                {this.state.operatorLoading && (
                    <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>
                )}
                {/*{*/}
                {/*this.state.showCom ?*/}
                {/*<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={-30}>*/}
                {/*<View style={styles.contentX}>*/}
                {/*<TextInput*/}
                {/*style={styles.inputCom}*/}

                {/*multiline={true}*/}
                {/*placeholder={this.commentPlaceholder}*/}
                {/*underlineColorAndroid="transparent"*/}
                {/*autoFocus={true}*/}
                {/*onChangeText={(text) => this.commentContent = text}*/}
                {/*maxLength={200}*/}
                {/*/>*/}
                {/*<View style={styles.btnGroup}>*/}
                {/*<View style={styles.leftBtn}>*/}
                {/*<TouchableOpacity onPress={() => this.clickLike()}>*/}
                {/*<Image*/}
                {/*source={!this.state.isLike ? unlike : like}*/}
                {/*resizeMode="contain"*/}
                {/*style={styles.icon}*/}
                {/*/>*/}
                {/*</TouchableOpacity>*/}
                {/*<TouchableOpacity onPress={() => this.toShare()}>*/}
                {/*<Image*/}
                {/*source={fenxiang}*/}
                {/*resizeMode="contain"*/}
                {/*style={styles.icon}*/}
                {/*/>*/}
                {/*</TouchableOpacity>*/}
                {/*</View>*/}
                {/*<View style={styles.rightView}>*/}
                {/*<TouchableOpacity style={styles.cancelBtn}*/}
                {/*onPress={this.makeCancel}>*/}
                {/*<Text style={styles.cancelText}>取消</Text>*/}
                {/*</TouchableOpacity>*/}
                {/*<TouchableOpacity style={this.commentContent.length === 0?styles.rightBtn:styles.rightPublishBtn}*/}
                {/*onPress={this.makeComment}>*/}
                {/*<Text style={styles.text}>发布</Text>*/}
                {/*</TouchableOpacity>*/}
                {/*</View>*/}
                {/*</View>*/}
                {/*</View>*/}
                {/*</KeyboardAvoidingView>*/}
                {/*:*/}
                {/*<View style={[styles.commemtBar, {zIndex:this.state.isFullScreen? -1:0}]}>*/}
                {/*<TouchableOpacity*/}
                {/*style={[styles.commentInput, {width: width - 120}]}*/}
                {/*placeholder="写评论..."*/}
                {/*onPress={this.makeCom}*/}
                {/*>*/}
                {/*<Text style={styles.font16}>写评论</Text>*/}
                {/*</TouchableOpacity>*/}
                {/*<TouchableOpacity onPress={() => this.clickLike()}>*/}
                {/*<Image*/}
                {/*source={!this.state.isLike ? unlike : like}*/}
                {/*resizeMode="contain"*/}
                {/*style={styles.icon9}*/}
                {/*/>*/}
                {/*</TouchableOpacity>*/}
                {/*<TouchableOpacity onPress={this.toShare}>*/}
                {/*<Image*/}
                {/*source={fenxiang}*/}
                {/*resizeMode="contain"*/}
                {/*style={styles.icon9}*/}
                {/*/>*/}
                {/*</TouchableOpacity>*/}
                {/*</View>*/}
                {/*}*/}

                <Modal animationType={'none'} visible={this.state.showSetting} transparent={true}
                       onRequestClose={() => this.closeModal()}>
                    <TouchableOpacity activeOpacity={1} style={styles.modalBg} onPress={() => this.closeModal()}>
                        <Animated.View style={{
                            width: '100%',
                            position: 'absolute',
                            bottom: this.state.bottom
                        }}>
                            <View style={{flex:1,flexDirection:'row', backgroundColor: '#eee', borderRadius :4,paddingTop:5,paddingBottom:5,marginLeft:12,marginRight:12}}>

                                <TouchableOpacity style = {{width:width/5,alignItems:'center'}}
                                                  onPress = {()=>{
                                                      this.closeModal();
                                                      this.wchatShare();
                                                  }}>
                                    <Image style = {styles.image} source={wchat} />
                                    <Text style = {styles.textStyle}> 微信</Text>
                                </TouchableOpacity>

                                <TouchableOpacity style = {{width:width/5,alignItems:'center'}}
                                                  onPress = {()=>{
                                                      this.closeModal();
                                                      this.wchatCircleShare();
                                                  }}>
                                    <Image style = {styles.image} source={wchatMoment}/>
                                    <Text style = {styles.textStyle}> 朋友圈</Text>
                                </TouchableOpacity>

                            </View>
                            <View style={{flex:1, backgroundColor: '#eee',margin:12, borderRadius :4}}>
                                <TouchableOpacity activeOpacity={0.8}
                                                  style={[styles.settingItem, {borderBottomWidth: 0}]}
                                                  onPress={()=> {
                                                      this.closeModal()
                                                  }}>
                                    <Text style={{fontSize: 18, color: '#000'}}>取消</Text>
                                </TouchableOpacity>
                            </View>
                        </Animated.View>
                    </TouchableOpacity>
                </Modal>

            </View>


        )
    }
}



const styles = StyleSheet.create({
    container: {
        backgroundColor: '#eff0f1',
        // 需要考虑横屏的情况，在render中动态判断
        //marginTop: __IOS__ ? isIphoneX()? width>=812?20:44:20 : 0
    },
    font16: {
        fontSize: 14,
        color: "#999999"
    },
    font14: {
        fontSize: 10,
        color: '#ffffff',
        backgroundColor: 'transparent'
    },
    suspensionBtn: {
        width: 120,
        height: 25,
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderRadius: 20,
        alignItems: 'center',
        justifyContent: 'center'
    },
    suspensionBtn1: {
        position: 'absolute',
        top: 40,
        right: 15,
    },
    suspensionBtn2: {
        position: 'absolute',
        top: 48,
        right: 15,
    },
    suspensionBtnIcon1: {
        height: 3,
        width: 6,
        marginLeft: 93,
    },
    suspensionBtnIcon: {
        height: 3,
        width: 6,
        marginLeft: 80,
    },
    video: {
        height:__IOS__ ? SCREEN_WIDTH * 0.46667 : 200,
        width:  SCREEN_WIDTH,
        position:'relative',
        zIndex:-1
    },
    videoFullScreen:{
        // ios横屏高度为100，无需扣减
        height: __IOS__ ? (SCREEN_WIDTH)  :SCREEN_WIDTH - 20,
        width:  __IOS__?SCREEN_HEIGHT:SCREEN_HEIGHT,
        position:'absolute',
        zIndex:99
    },
    titleBarNext: {
        height: 50,
        alignItems: 'center',
        flexDirection: 'row'
    },
    topBack: {
        height: Platform.OS === 'ios' ? 70 : 50,
        paddingTop: Platform.OS === 'ios' ? 20 : 10,
        paddingLeft: 15,

    },
    backIcon: {
        width: 25,
        height: 25,
    },
    backBorder: {
        width: 30,
        height: 30,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 30,

    },
    other: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: 30,
    },

    zanting: {
        width: 50,
        height: 50,
        paddingLeft: 20,
        justifyContent: 'center',
    },
    iconZanting: {
        width: 14,
        height: 14
    },
    middleProgress: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    allScreen: {
        width: 60,
        height: 50,
        paddingLeft: 30,
        justifyContent: 'center'
    },
    leftCon: {
        flexDirection: 'row',
        flex: 1,
        alignItems: 'center'
    },
    font1: {
        fontSize: 10,
        color: "#333"
    },
    info: {
        height: 50,
        alignItems: 'center',
        flexDirection: 'row',
        backgroundColor: 'white'
    },
    icon5: {
        marginLeft: 15,
        marginRight: 5
    },
    rightCon: {
        flexDirection: "row",
        width: 120,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center'
    },
    icon6: {
        width: 16,
        height: 16,
        marginBottom: 5
    },
    separator: {
        height: 30,
        width: 1,
        backgroundColor: '#999999'
    },
    btnCon: {
        marginLeft: 15,
        marginRight: 15,
        alignItems: 'center',
        justifyContent: 'center'
    },
    btnCon1: {
        marginLeft: 15,
        marginRight: 15,
        alignItems: 'flex-end',
        justifyContent: 'center',
        width: 40,
    },
    contentDock: {
        flex: 1,
        width,
        marginTop: 10,
        backgroundColor: 'white'
    },
    artCon: {
        borderBottomWidth: 1,
        borderColor: '#dddddd',
        flexDirection: 'row',
        paddingRight: 15,
    },
    leftArtCon: {
        flex: 1,
        justifyContent: 'center',
        paddingLeft: 15,
        paddingRight:15
    },
    rightArtCon: {
        height: 78,
        justifyContent: 'center',
        flexDirection: 'row',
        paddingTop: 15,
    },
    redBtn: {
        width: 80,
        height: 25,
        borderRadius: 30,
        backgroundColor: '#e52d43',
        alignItems: 'center',
        justifyContent: 'center'
    },
    font3: {
        fontSize: 12,
        color: "white"
    },
    font44: {
        fontSize: 10,
        color: '#e52d43'
    },
    font4: {
        fontSize: 14,
        color: '#e52d43',
    },
    font5: {
        fontSize: 10,
        color: "#999",
        textDecorationLine: 'line-through',
    },
    priceCon: {
        flexDirection: 'row',
        height: 20,
        alignItems: 'flex-end',
        marginTop: 6,
    },
    titleCon: {
        fontSize: 20,
        marginTop:15,
        marginBottom: 5,
        fontWeight: 'bold',
        color: 'black'
    },
    infoCon: {
        fontSize: 12,
        marginTop: 5,
        marginBottom:15,
        color: "#999",
    },
    classCon: {
        flex: 1,
        paddingLeft: 15
    },
    font6: {
        fontSize: 16,
        color: "#333"
    },
    classSelect: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom:15,

    },
    selectBlock: {
        width: 60,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: "#dddddd",
        backgroundColor: 'rgb(249,250,251)',
        marginRight: 10
    },
    font7: {
        fontSize: 16,
        color: "#333"
    },
    font7Select: {
        fontSize: 16,
        color: "#F00"
    },
    icon7: {
        position: 'absolute',
        right: 0,
        top: 0
    },
    classAll: {
        flexDirection: 'row',
        height: 50,
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingRight: 15
    },
    rightArrow: {
        width: 16,
        height: 16,
        marginLeft: 5
    },
    classAllRight: {
        flexDirection: 'row'
    },
    classSub: {
        marginTop: 10,
        width,
        backgroundColor: 'white',
        paddingLeft: 15
    },
    imgView: {
        width: 115,
        marginRight: 15
    },
    font8: {
        fontSize: 14,
        fontWeight: 'bold',
        color: "#333",
        marginTop: 10,
        marginBottom: 15
    },
    content: {
        backgroundColor: 'white',
        marginTop: 10,

    },

    tab: {
        height: 40,
        borderWidth: 1 / PixelRatio.get(),
        borderColor: '#dddddd',

    },
    commemtBar: {
        height: 50,
        width,
        backgroundColor: 'rgb(248,249,251)',
        alignItems: 'center',
        flexDirection: 'row',
        paddingLeft: 15
    },
    commentInput: {
        height: 30,
        marginBottom: 10,
        borderRadius: 15,
        padding: 0,
        borderWidth: 1 / PixelRatio.get(),
        borderColor: '#dddddd',
        backgroundColor: 'white',
        paddingLeft: 15,
        marginTop: 10,
        justifyContent: 'center'
    },
    icon9: {
        width: 20,
        height: 20,
        marginLeft: 25,
    },
    grade: {
        fontSize: 28,
        color: "#e52d43"
    },
    gradeinfo: {
        fontSize: 14,
        color: "#e52d43",
        marginBottom: 4,
    },
    touchView: {
        height: 15,
        width: 15,
        borderRadius: 7.5,
        backgroundColor: 'white',
        position: 'absolute',
        top: -6,
    },
    rightArtConBuy: {
        height: 80,
        alignItems: 'center',
        justifyContent: 'center'
    },
    rightArtConBuy1: {
        height: 80,
        paddingTop: 15,
        alignItems: 'center',
    },
    contentX: {
        width: width,
        height: 183,
        backgroundColor: 'rgb(239,240,241)',
        overflow: 'hidden',
    },
    inputCom: {
        width: width - 30,
        borderWidth: 1,
        borderColor: '#dddddd',
        height: 119,
        marginLeft: 15,
        marginRight: 15,
        backgroundColor: 'white',
        borderRadius: 5,
        marginTop: 15,
        paddingLeft: 15,
        fontSize: 18,
        textAlignVertical: 'top'
    },
    btnGroup: {
        height: 50,
        flexDirection: 'row',
        marginLeft: 15,
        marginRight: 15,
        width: width - 30,
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    leftBtn: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    rightView: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        width: 24,
        height: 24,
        marginRight: 30
    },
    cancelBtn: {
        width: 50,
        height: 28,
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 5
    },
    rightBtn: {
        width: 50,
        height: 28,
        backgroundColor: '#c9c9ca',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        marginRight: 10
    },
    rightPublishBtn: {
        width: 50,
        height: 28,
        backgroundColor: '#e52d43',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        marginRight: 10
    },
    text: {
        fontSize: 14,
        color: "#fff"
    },
    cancelText:{
        fontSize: 14,
        color: "#c9c9ca"
    },
    modalBg: {
        width: width,
        height: height,
        backgroundColor: 'rgba(0,0,0,.5)',
        display: 'flex',
        alignItems: 'center'
    },

    image:{
        width:38,
        height:38,
        marginBottom:5
    },
    textStyle : {
        fontSize:10,
        color:'rgba(0,0,0,0.65)'
    },


    settingItem: {
        width: '100%',
        height: (50 / zoomH),
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputBg:{
        width:'100%',
        height:isIphoneX()?(44/zoomH+34):44/zoomH,
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:'#ffffff',
        justifyContent:'space-between',
        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:'#F3F5F6'
    },
    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"
    },
});


// 播放或暂停
// playOrPause = ()=>{
//     let that = this;
//
//     // 如果由暂停转为播放，暂停音频的播放
//     if(this.paused && global.cache.sound) {
//         global.cache.sound.pause();
//
//         if(global.cache.radio) {
//             // 如果当前显示的不是课程音频页
//             global.cache.radio.paused = true;
//         } else {
//             // 如果当前显示的是课程音频页
//             this.refs.sound.radio.paused = true;
//         }
//     }
//
//     // 更新播放状态
//     this.paused = !this.paused;
//     global.cache.videoPaused = this.paused;
//
//     // 保存最近访问课程
//     AsyncStorage.setItem("endView", JSON.stringify({id:this.props.id, lessonId : this.state.lesson.id}), function (errs) {
//         if (errs) {
//             console.warn('存储报错：' + errs);
//         }
//     });
//
//     // 记录课次浏览记录
//     if(!this.paused && !this.hasRecord) {
//         let request = new ObjectStatisticsChangeRequest();
//         request.setObjectType("COURSE_LESSON");
//         request.setObjectId(this.state.lesson.id);
//         request.setViewCount(1);
//         request.setCollectCount(0);
//
//
//         post(request).then(data=>{
//                 that.hasRecord = true;
//                 //   console.warn(JSON.stringify(data));
//             }
//         );
//     }
// };