<template>
    <!--直播间组件1开始-->
    <oldVideo v-if="lylRealStatus==='3'"></oldVideo>
    <div class="live_show_room_pc_1" v-else>
        <div class="ltv-module ltv-module-top">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-9 col-md-8 col-sm-7 col-xs-12">
                        <div class="ltv-video-body">
                            <div class="ltv-video-title">
                                <span class="sp1">{{livedetail.lylName}}<span class="backlivedetail"><a href="javascript:history.go(-1)"> <<返回直播详情</a></span></span>
                                <div class="ltv-video-title-info">
                                    <span class="spp1">主播：{{livedetail.lylAnchorNickname}}</span>
                                    <!--<span class="spp2">特别推荐</span>-->
                                    <!--<span class="spp3">1126</span>-->
                                    <!--<span class="spp4">80</span>-->
                                </div>
                                <!--<span class="sp2">-->
                                    <!--<a href="" class="a1">举报</a>-->
                                    <!--<a href="" class="a2">分享</a>-->
                                <!--</span>-->
                            </div>
                            <div id="my_player" class="playvideo"></div>

                            <!--<video id="my-video" class="video-js" controls preload="auto" width="100%" height="100%"-->
                                   <!--data-setup="{}">-->
                                <!--<source src="mp4/video.mp4" type="video/mp4">-->
                                <!--&lt;!&ndash; <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">-->
                                <!--<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> &ndash;&gt;-->
                                <!--<p class="vjs-no-js"> To view this video please enable JavaScript, and consider-->
                                    <!--upgrading to a web browser that <a href="http://videojs.com/html5-video-support/"-->
                                                                       <!--target="_blank">supports HTML5 video</a></p>-->
                            <!--</video>-->
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-5 col-xs-12">
                        <div class="ltv-message-body">
                            <span class="sp1"><a href="javascript:;" class="ltv-notice-roll"><span>公告：{{livedetail.lylInfo}}</span></a></span>
                            <div class="ltv-message-hd">
                                <ul>
                                    <li :class="livetab==0?'on':''" @click="livetab=0">聊天</li>
                                    <li :class="livetab==1?'on':''" @click="livetab=1">问答</li>
                                    <li :class="livetab==2?'on':''" @click="livetab=2">成员({{talkUser.userCount}})</li>
                                </ul>
                            </div>
                            <div class="ltv-message-bd">
                                <div v-if="livetab==0" class="ltv-message-part"><!--聊天-->
                                    <div class="ltv-message-chart">
                                        <ul>
                                            <li class="clearfix" v-for="(item,index) of talk.callBack" :key="index">
                                                <p class="p-time">{{item.createTime}}</p>
                                                <span class="sp-header"><img src="../../theme-chalk/src/images/ltv-header.png" alt=""></span>
                                                <span class="sp-cont">
                                                    <p class="p-name">{{item.fromUserName}}</p>
                                                    <span class="sp-kuang">{{item.msg}}</span>
                                                </span>
                                            </li>
                                            <!--<p class="p-time">2020年5月8日 14:20</p>-->
                                            <!--<li class="clearfix">-->
                                                <!--<span class="sp-header"><img src="images/ltv-header.png" alt=""></span>-->
                                                <!--<span class="sp-cont">-->
                                              <!--<p class="p-name">芜湖网友/22753</p>-->
                                              <!--<span class="sp-kuang">Hello，我来啦</span>-->
                                          <!--</span>-->
                                            <!--</li>-->
                                        </ul>
                                    </div>
                                    <div class="ltv-message-input clearfix">
                                        <input type="text" v-model="talk.value" class="input1">
                                        <input type="button" value="发送" @click="subMit" class="input2">
                                    </div>
                                </div>
                                <div v-if="livetab==1" class="ltv-message-part"><!--问答-->
                                    <div class="ltv-message-chart">
                                        <div class="ltv-message-question" v-for="(item, index) in questionslist.data" :key="index"><!--1题-->
                                            <div class="ltv-ask-part clearfix"><!--问题-->
                                                <span class="ask-header">
                                                    <img src="../../theme-chalk/src/images/header.jpg" alt="">
                                                </span>
                                                <span class="ask-info">
                                                    <span class="ask-name">
                                                        <span class="ask-name-info">
                                                            <i class="i1">{{item.aswAskCustName}}</i>提问于<i>{{item.aswAskDate}}</i>
                                                        </span>
                                                        <span class="ask-btn"><a href="javascript:;" @click="aswclick(item.aswAskCustName,item.aswId)">回答</a></span>
                                                    </span>
                                                    <span class="ask-cont">{{item.aswContent}}</span>
                                                </span>
                                            </div>
                                            <div class="ltv-ask-part ltv-answer-part clearfix" v-if="item.anserList" v-for="(acsitem, acsindex) in item.anserList" :key="acsindex"><!--回答-->
                                                <span class="ask-header"><img src="../../theme-chalk/src/images/header2.png" alt=""></span>
                                                <span class="ask-info">
                                                    <span class="ask-name">
                                                        <span class="ask-name-info"><i class="i1">{{acsitem.aswdCustName}}</i>回答<i>{{acsitem.aswdDatetime}}</i></span>
                                                    </span>
                                                    <span class="ask-cont2">{{acsitem.aswdContent}}</span>
                                                </span>
                                            </div>
                                            <!--<span class="more-answer">-->
                                                <!--<a href="">更多回答(48)<i class="iconfont icon-gengduo-copy"></i></a>-->
                                            <!--</span>-->
                                        </div>
                                    </div>
                                    <div class="ltv-message-input clearfix" v-if="asworque==0">
                                        <input v-model="question" type="text" class="input1">
                                        <input type="button" value="提问" @click="subque()" class="input2">
                                    </div>
                                    <div class="ltv-message-input clearfix" v-if="asworque==1">
                                        <input v-model="questionasw" type="text" class="input1">
                                        <input type="button" value="回答" @click="subasw()" class="input2">
                                    </div>
                                </div>
                                <div v-if="livetab==2" class="ltv-message-part"><!--成员-->
                                    <div class="ltv-message-member">
                                        <ul class="clearfix">
                                            <li v-for="(item,index) in talkUser.getUser" :key="index">
                                                <img src="images/ltv-header.png" alt="">
                                                <span>{{item}}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<script type="text/javascript">-->
        <!--//获取视频高度-->
        <!--$(function(){-->
        <!--$(".video-js").css("height",678-$(".ltv-video-title").height());-->
        <!--});-->
        <!--//文字横向滚动-->
        <!--$(function(){-->
        <!--$(".ltv-notice-roll").textScroll();-->
        <!--});-->
        <!--//文字横向滚动-->
        <!--$.fn.textScroll=function(){-->
        <!--var p = $(this),  c = p.children(), speed=3000; //值越大速度越小-->
        <!--var cw = c.width(),pw=p.width();-->
        <!--var t = (cw / 100) * speed;-->
        <!--var f = null, t1 = 0;-->
        <!--function ani(tm) {-->
        <!--counttime();-->
        <!--c.animate({ left: -cw }, tm, "linear", function () {  c.css({ left: pw });  clearInterval(f);  t1 = 0;  t=((cw+pw)/100)*speed;  ani(t);-->
        <!--});-->
        <!--}-->
        <!--function counttime() {-->
        <!--f = setInterval(function () {-->
        <!--t1 += 10;  }, 10);-->
        <!--}-->
        <!--p.on({  mouseenter: function () {-->
        <!--c.stop(false, false);-->
        <!--clearInterval(f);-->
        <!--console.log(t1);-->
        <!--},  mouseleave: function () {-->
        <!--ani(t - t1);-->
        <!--console.log(t1);-->
        <!--}  });-->
        <!--ani(t);  }-->
        <!--jQuery(".ltv-message-body").slide({titCell:".ltv-message-hd ul li",mainCell:".ltv-message-bd",effect:"fade",trigger:"click"}); //聊天窗口tab-->
        <!--</script>-->
    </div>
    <!--直播间组件1结束-->
</template>

<script type="module">
    import formMixin from '../../../src/mixins/formMixin';
    import lenye_base from 'lenye_base';
    import 'xgplayer';
    import HlsJsPlayer from 'xgplayer-hls.js';
    import oldVideo from '../../live_old_room_pc_1'

    export default {
        name: 'ElLiveShowRoomPc1',
        mixins: [formMixin],
        model: {},
        components:{
            oldVideo
        },
        data() {
            return {
                livetab: 0,
                livedetail: '',
                liveadreess: '',
                isplay: false,
                lylId: '',
                //直播对象
                liveObj: {
                    //直播组件对象
                    livePlayer: {},
                    //    直播地址
                    liveAdress: '',
                    //    直播状态
                    liveStatus: '',
                    //    获取直播状态的函数
                    getLiveStatus: '',
                },
                // websoct对象
                websocket: "",
                // 聊天室的token
                chatToken: "",
                // 聊天室登录名称
                loginName: '',
                // 房间号
                roomId: "",
                // 聊天
                talk: {
                    value: "",
                    callBack: [],
                },
                //聊天室成员对象
                talkUser: {
                    //获取在线人数
                    userCount: 0,
                    //获取直播间用户
                    getUser: 0
                },
                questionslist:[],
                question:'',
                questionasw:'',
                questionaswid: '',
                asworque:0,
                liveImage:'',

                lylRealStatus:'3'
            };
        },
        mounted() {
            this.lylRealStatus = lenye_base.getUrlParam('lylRealStatus');
            console.log('站点数据', this.siteData);
            this.loginName = lenye_base.user_data.getuserData().custName;
            this.lylId = lenye_base.getUrlParam('id');//'0989d39edbfc468d8923192bc1aef6b1';
            if (this.lylRealStatus==='3'){

            } else {
                this.getlivedetail();
                this.getliveadreess();
            }

            this.isSign();
        },
        created() {
            this.loginName = lenye_base.user_data.getuserData().custName;
            this.chatLogin();


        },
        watch: {
            'livetab'(newvalue) {
                if (newvalue === 1) {
                    this.questions();
                } else if (newvalue === 2) {
                    this.getRoomInfo();
                };
            },
            'questionasw'(newvalue) {
                if (!newvalue) {
                    this.asworque = 0;
                }
            }
        },
        methods: {
            getlivedetail() {
                const that = this;
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.live.lylLivequeryById, lenye_base.base_data.getformatting({
                    lylId: this.lylId
                }), function(e) {
                    console.log('直播详情', e);
                    that.livedetail = e.data;
                    that.liveImage = e.data.lylPhoto;
                });
            },
            getliveadreess() {
                const that = this;
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.live.lylLivequeryStreamAddress, lenye_base.base_data.getformatting({
                    lylId: this.lylId
                }), function(e) {
                    console.log('直播地址', e);
                    that.liveadreess = e.data;
                    that.liveObj.livePlayer = that.playerInit(e.data.length && e.data[2].address);
                    that.liveObj.livePlayer.on('play', function () {
                        this.isplay = true;
                    }).on('pause', function () {
                        this.isplay = false;
                    });
                });
            },
            // 直播视频
            playerInit(url) {
                return new HlsJsPlayer({
                    id: "my_player",
                    autoplay: false,
                    hasVideo: true,
                    hasAudio: true,
                    cors: true,
                    height: '320',
                    fluid: true,
                    isLive: true,
                    playsinline: true,
                    flvOptionalConfig: {
                        enableWorker: true,
                    },
                    url: url,
                    poster: this.liveImage,
                    lang: "zh-cn",
                    videoInit: false,
                    "x5-video-player-fullscreen": "false",
                    "x5-video-orientation": "landscape",
                    "x5-video-player-type": "h5",
                });
            },
            //直播状态轮询
            getliveStatus() {
                this.liveObj.getLiveStatus = setInterval(() => {
                    const that = this;
                    this.getRoomUserCount();
                    lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.live.lylLivequeryById, lenye_base.base_data.getformatting({
                        lylId: this.lylId
                    }), function(e) {
                        console.log('直播详情', e);
                        that.liveObj.liveStatus = e.data.lylRealStatus;
                    });
                    if (that.liveObj.liveStatus === '2' || that.liveObj.liveStatus === '3') {
                        if (that.isplay) {
                            that.liveObj.livePlayer.pause();
                        }
                    } else if (that.liveObj.liveStatus === '1') {
                        if (that.isplay || that.autoplay) {
                            that.liveObj.livePlayer.play();
                        }
                    }
                }, 5000)
            },
            // 聊天室登录
            chatLogin() {
                const that = this;
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.chat.login, JSON.stringify({
                    userName: that.loginName,
                    passWord: '123456'
                }), function(e) {
                    if (e.code === 1) {
                        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.chat.register, JSON.stringify({
                            userName: that.loginName,
                            passWord: '123456'
                        }), function(e) {
                            if (e.code === 0) {
                                that.chatToken = e.data;
                                that.getRoomId();
                                that.getRoomUserCount();
                            }
                        });
                    } else if (e.code === 0) {
                        that.chatToken = e.data;
                        that.getRoomId();
                        that.getRoomUserCount();
                    }
                });
            },
            //tab切换时触发
            tabChoose(name, title) {
                if (title === '成员') {
                    this.getRoomInfo();
                }
            },
            // 房间号
            getRoomId() {
                var lylId = this.lylId;
                this.roomId = parseInt(lylId.replace(/[^\d]/g, "").slice(0, 5),10);
                if (this.roomId && this.chatToken) {
                    this.websocketObj();
                }
            },
            // 发表聊天消息
            subMit() {
                this.pushRoomdata(this.talk.value);
            },
            // 发送聊天
            async pushRoomdata(val) {
                if (this.chatToken) {
                    lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.chat.pushRoom, JSON.stringify({
                        roomId: this.roomId,
                        msg: val,
                        authToken: this.chatToken,
                        op: 3,
                    }), function(e) {
                        return e;
                    });
                }
            },
            //获取成员
            getRoomInfo() {
                if (this.chatToken) {
                    lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.chat.getRoomInfo, JSON.stringify({
                        roomId: this.roomId,
                        authToken: this.chatToken,
                    }), function(e) {
                        // return e;
                    });
                }
            },
            //获取在线用户数量
            getRoomUserCount() {
                setTimeout(function () {
                    if (this.chatToken) {
                        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.chat.count, JSON.stringify({
                            roomId: this.roomId,
                            authToken: this.chatToken,
                        }), function(e) {
                            // return e;
                        });
                    }
                },1000)
            },
            // 实例化websocket对象
            websocketObj() {
                var urlstr = lenye_base.base_data.getapiUrl();
                var url = "ws://"+urlstr.substring(6, urlstr.length)+"/ws";
                this.websocket = new WebSocket(url);
                this.websocket.onopen = this.websocketonopen;
                this.websocket.onmessage = this.websocketonmessage;
            },
            websocketonopen(e) {
                //连接建立之后执行send方法发送数据
                this.websocket.send(
                    JSON.stringify({roomId: this.roomId, authToken: this.chatToken})
                );
            },
            // 监听事件
            websocketonmessage(e) {
                var received_msg = JSON.parse(e.data);
                if (received_msg.op === 3) {
                    received_msg.loginName = this.loginName;
                    this.talk.callBack.push(received_msg);
                    this.messagesContainerTimer = setTimeout(() => {
                        this.$refs.maxScroll.scrollTop = this.$refs.maxScroll.scrollHeight;
                        // 清理定时器
                        clearTimeout(this.messagesContainerTimer);
                    }, 0);
                    this.talk.value = "";
                } else if (received_msg.op === 4) {
                    this.talkUser.userCount = received_msg.count;
                } else if (received_msg.op === 5) {
                    console.log('用户人数', received_msg);
                    this.talkUser.userCount = received_msg.count;
                    this.talkUser.getUser = received_msg.roomUserInfo;
                }
            },
            // 退出事件
            close() {
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.chat.logout, lenye_base.base_data.getformatting({
                    authToken: this.chatToken,
                }), function(e) {
                    console.log(e)
                    return false;
                });
            },
            // 问答列表
            questions() {
                const that = this;
                let aswIds = '';
                let listobj = [];
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.interact.qAaList, lenye_base.base_data.getformatting({
                    aswServiceType: 'live',
                    aswObjId: this.lylId,
                    rows:''
                }), function(e) {
                    for (let i = 0; i < e.data.length; i++) {
                        aswIds += e.data[i].aswId + ',';
                        listobj.push({
                            objId: e.data[i].aswId,
                            type: 'asw',
                        });
                        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.interact.answerList, lenye_base.base_data.getformatting({
                            aswId: e.data[i].aswId
                        }), function(res) {
                            e.data[i].anserList = res.data;
                        });
                        // lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.interact.addReadTimes, lenye_base.base_data.getformatting({
                        //     objId: e.data[i].aswId,
                        //     type: 'asw'
                        // }), function(res) {
                        //     e.data[i].anserList = res.data;
                        // });
                    }
                    setTimeout(function () {
                        that.questionslist = e;
                    },1000);
                    console.log(aswIds);
                });
            },
            subque() {
                const that = this;
                if (!this.question) {
                    that.$message({
                        showClose: true,
                        message: '提问内容不能为空！',
                        type: 'warning'
                    });
                    return false;
                }
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.interact.addQues, lenye_base.base_data.getformatting({
                    aswTitle: this.livedetail.lylName,
                    aswContent: this.question,
                    aswIsOpen: '1',
                    aswObjId: this.lylId,
                    aswServiceType: 'live',
                }), function(e) {
                    if (e.success === '1') {
                        that.$message({
                            showClose: true,
                            message: '已提问',
                            type: 'success'
                        });
                        that.question = '';
                        // 重新渲染一次列表
                        that.questions();
                    } else {
                        that.$message({
                            showClose: true,
                            message: e.message,
                            type: 'warning'
                        });
                    }
                });
            },
            //回答切换
            aswclick(name,sawid){
                this.asworque = 1;
                this.questionasw = '@' + name + ':';
                this.questionaswid = sawid;
            },
            subasw() {
                const that = this;
                if (!this.questionasw) {
                    that.$message({
                        showClose: true,
                        message: '内容不能为空！',
                        type: 'warning'
                    });
                    return false;
                }
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + lenye_base.api_url.interact.answerListAdd, lenye_base.base_data.getformatting({
                    aswId: this.questionaswid,
                    aswdContent: this.questionasw,
                }), function(e) {
                    if (e.success === '1') {
                        that.$message({
                            showClose: true,
                            message: '已回复',
                            type: 'success'
                        });
                        that.question = '';
                        that.questionasw = '';
                        that.asworque = 0;
                        // 重新渲染一次列表
                        that.questions();
                    } else {
                        that.$message({
                            showClose: true,
                            message: e.message,
                            type: 'warning'
                        });
                    }
                });
            },
            isSign() {
                const that = this;
                lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/learnyeai-live-service/api2/lylLive/queryUserLivePage.do', lenye_base.base_data.getformatting({
                    lylId: this.lylId,
                    custId:lenye_base.user_data.getuserData().custId
                }), function(e) {
                    if (e.success === '1'&& e.data.length<=0){
                        lenye_base.httpPost(lenye_base.base_data.getapiUrl() + '/orderform-service/api2/ordShoppingCart/signup.do', lenye_base.base_data.getformatting({
                            objId:that.lylId,
                            objType:5,
                            shoppingNum:1,
                            spcId:that.lylId,
                            custId:lenye_base.user_data.getuserData().custId,
                            siteId:lenye_base.user_data.getuserData().siteId
                        }), function(e) {
                            if (e.success === '1'){
                                that.$message({
                                    showClose: true,
                                    message: '加入直播！',
                                    type: 'success'
                                });
                            }
                        });
                    }
                });
            },
        }
    };
</script>
