<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>直播-详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.5, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="sharetitle" content=""/>
    <meta name="sharedesc" content="" />
    <meta name="sharepic" content="" />
<!--    <meta name="shareurl" :content="" />-->

    <script src="/js/jquery-3.5.1.min.js?v=" +Math.random()></script>
    <script src="/js/common.js?v="+Math.random()></script>
    <script>
        document.write('<link href="/css/html5/live/live-alive.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');
    </script>
    <script src="/js/ucenter.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?0305f34866fc4fe377f1bec6dc84d92f";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
    <div class="container">
        <div  th:include="html5/common::common-header"></div>
        <input type="hidden" id="liveId" th:value="${liveId}" />
        <div class="top">
            <div v-if="liveInfo.liveStatus==0">
                <img :src="liveInfo.liveCoverImg" />
                <div class="bg"></div>
                <div class="time" v-if="liveInfo.liveBeginSySecond>0">距离开始：<span v-if="endTime.day>0">{{endTime.day}}天</span>
                                                                            <span>{{endTime.hour}}小时</span>
                                                                            <span>{{endTime.minute}}分</span>
                                                                            <span>{{endTime.second}}秒</span>
                </div>
                <div class="all" v-if="liveInfo.isRemind == 0" @click="addRemind()">立即预约</div>
                <div class="all" v-if="liveInfo.isRemind == 1">{{liveInfo.remindMemberNum}}人已预约</div>
            </div>
            <div v-if="liveInfo.liveStatus==1">
                <div v-if="liveInfo.isPurchased==0" class="bg"><img :src="liveInfo.liveCoverImg" /></div>
                <div v-if="liveInfo.isPurchased==1" id="livePlay" style="width:100%; height:auto;"></div>
            </div>
            <div v-if="liveInfo.liveStatus==2">
                <div class="bg"><img :src="liveInfo.liveCoverImg" /></div>
                <div class="all" v-if="liveInfo.liveStatus==2">直播已结束</div>
            </div>
            <div v-if="liveInfo.liveStatus==3">
                <div v-if="liveInfo.isPurchased==0" class="bg"><img :src="liveInfo.liveCoverImg" /></div>
                <video v-if="liveInfo.isPurchased==1" id="videoPlay" controls :src="liveInfo.backviewUrl" autoplay="autoplay" :poster="liveInfo.liveCoverImg"></video>
            </div>
            
        </div>
        <div class="swiper-container" v-if="liveInfo.sysRecommendDTOs.length>0">
            <div class="swiper-wrapper">
                <div class="swiper-slide" @click="gotoRcmd(item)" v-for="(item,i) in liveInfo.sysRecommendDTOs"><img onload="AutoResizeImage(690,160,this)" :src="item.rcmdImgpath" /></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="tab">
            <div v-for="(item,i) in cata" @click="chooseTab(i)" :class="{active : item.active == 1}" class="tab-item">{{item.name}}</div>
        </div>
        <div class="content">
            <div v-if="cata[0].active == 1" class="detail" v-html="liveInfo.liveContent"></div>
            <div v-if="cata[1].active == 1" class="list" id="contentList">
                <div class="comeIn">xxx来了</div>
                <div class="item float" v-for="(item,i) in contentList">
                    <div class="left">
                        <img :src="item.memHeadimg" alt="">
                    </div>
                    <div class="right">
                        <div class="right-top">{{item.memNickname}}  {{item.oprTime}}</div>
                        <div class="right-bottom">{{item.content}}</div>
                    </div>
                </div>
            </div>
            <div v-if="cata[1].active == 1 && yzt.length > 0" class="yzt" id="yzt">
                <div class="item float" v-for="(item,i) in yzt">
                </div>
            </div>
        </div>
        <!--=课程详情按钮-->
        <div class="footer" v-if="liveInfo.isPurchased==0 && liveInfo.liveStatus!=2 && liveInfo.isSell==0">
            <button v-if="(liveInfo.price==0 &&liveInfo.pointFlag==0) || (liveInfo.price==0 && liveInfo.pointFlag==1 && liveInfo.point==0)" class="immediately" @click="addFreeBuyApi()">参会申请</button>
            <button v-else-if="liveInfo.pointFlag==1 && liveInfo.point>0" class="consume" @click="toPay()">消耗{{liveInfo.point}}积分 观看直播</button>
            <button v-else-if="liveInfo.price>0" class="consume" @click="toPay()">购买{{liveInfo.price}}元 观看直播</button>
        </div>
        <!--互动输入框-->
        <div class="footer-input" v-if="cata[1].active==1 && liveInfo.isPurchased==1">
            <input type="text" placeholder="发表自己的观点" v-model="content" />
            <button @click="addLiveComment()">发表</button>
        </div>
        <!--榜单按钮-->
        <div v-if="cata[1].active == 1" class="rank" onclick="liveRanking()"></div>
        <!--未关注服务号 弹框提醒-->
        <div class="toast" id="gzfwh">
            <img class="wjs" src="http://files.qkyxzx.com/html5/wjs.png" alt="">
            <img class="close" onclick="$('#gzfwh').hide();" src="http://files.qkyxzx.com/html5/close.png" alt="">
        </div>
        <!--后台推送二维码弹框-->
        <div class="toast" id="tuisongQrpath">
            <img class="wjs" src="http://files.qkyxzx.com/html5/wjs.png" alt="">
            <img class="close" onclick="$('#tuisongQrpath').hide();" src="http://files.qkyxzx.com/html5/close.png" alt="">
        </div>
        <!--预约信息收集弹框-->
        <div class="info-collect">
            <div class="info">
                <div class="info-title" style="font-size: 23px;font-weight: bold">本项目仅面向医疗卫生专业人士开展，请务必填写以下信息</div>
                <div class="info-item" v-for="(item,i) in liveInfo.questions">
                    <div class="info-item-title">{{item.quTitle}}</div>
                    <input type="text" v-model="item.answerContent">
                </div>
                <button @click="saveQuestionAnswer()" class="confirm">立即提交</button>
            </div>
        </div>
    </div>
    <!--返回顶部-->
    <div th:include="web/common::common-back-web"></div>
</body>
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js" charset="utf-8"></script>
<script>
    document.write('<script src="/js/h5/live/live-alive.js?v=' + Math.random() + '"><\/script\>');
</script>
<script src="/js/jweixin-1.0.0.js"></script>
<script src="/js/wxshare.js?version=202222"></script>
</html>