<!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="" />-->

    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2466260_gv0nlrcb4oc.css">
    <script src="/static/js/jquery-3.5.1.min.js?v=" +Math.random()></script>
    <script src="/static/js/common.js?v=" +Math.random()></script>
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css?v=" +Math.random()>
    <script src="/static/js/swiper-bundle.min.js?v=" +Math.random()></script>
    <script>
        document.write('<link href="/static/css/html5/live/live-alive.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');
        document.write('<link href="https://g.alicdn.com/de/prismplayer/2.11.0/skins/default/aliplayer-min.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');


    </script>
    <link href="/static/css/html5/common.css?v=" +Math.random() rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css?v=" +Math.random()>
    <script src="/static/js/swiper-bundle.min.js?v=" +Math.random()></script>
    <script src="/static/js/ucenter.js"></script>
    <!--    表情包-->
    <link rel="stylesheet" type="text/css" href="/static/css/sinaFaceAndEffech5.css" />

    <style>
        .load {
            /*display: none;*/
            background: #ccc;
            opacity: 0.9;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            text-align: center;
        }

        .load img {
            margin-top: 110px;
            animation: jumpBoxHandler 1.8s infinite;
        }

        @keyframes jumpBoxHandler { /* css事件 */
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, 30px); /* 可配置跳动方向 */
            }
            100% {
                transform: translate(0px, 0px);
            }
        }

        .load p {
            font-size: 22px;
            color: #3CBEA1;
            line-height: 100px;
            height: 100px;
        }
        #dplayer .dplayer-mobile-play{
            width: 70px !important;
            height: 70px !important;
            background-color: black !important;
            border-radius: 50%;
            padding: 10px;
        }
    </style>
    <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-loading"></div>
    <div th:include="html5/common::common-integral"></div>
    <div th:include="html5/common::common-conMusic"></div>
    <input type="hidden" id="liveId" th:value="${liveId}"/>
    <input type="hidden" id="fromMemCard" th:value="${fromMemCard}"/>

    <div class="liveContBox">
        <div class="top">
            <div v-if="(liveInfo.isPurchased==0 || (liveInfo.isRemind == 0 &&  liveInfo.liveBeginSySecond>0) || liveInfo.liveStatus==2) && liveInfo.liveStatus!=1 && liveInfo.liveStatus!=3"
                 class="mask"></div>
            <div v-if="liveInfo.isPurchased==0">
                <img onload="AutoResizeImage(750,422,this)" style="width: 100%;" :src="liveInfo.liveCoverImg"/>
            </div>
            <div v-if="liveInfo.liveStatus==0">
                <img onload="AutoResizeImage(750,422,this)" :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" id="liveNostarted">-->
            <!--            <div v-if="liveInfo.isPurchased==0 || bofangFlag==0">-->
            <!--                <img onload="AutoResizeImage(750,422,this)" style="width: 100%;" :src="liveInfo.liveCoverImg"/>-->
            <!--            </div>-->
            <!--            <div v-if="liveInfo.isPurchased==1" id="livePlay" style="width:100%; height:auto;"></div>-->
            <!--        </div>-->
            <div v-if="liveInfo.liveStatus==1" id="">
                <div v-if="liveInfo.isPurchased==1" id="livePlay" style="width:100%; height:auto;">
                    <div class="load">
                        <img src="/images/navlogo.png"/>
                        <p>专家正在赶来的路上...</p>
                    </div>
                </div>
            </div>

            <div v-if="liveInfo.liveStatus==2">
                <img onload="AutoResizeImage(750,422,this)" :src="liveInfo.liveCoverImg"/>
                <div class="bg"></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 onload="AutoResizeImage(750,422,this)" :src="liveInfo.liveCoverImg"/>
                </div>
                <!--            <div v-if="liveInfo.isPurchased==0 || bofangFlag==0">-->
                <!--                <img onload="AutoResizeImage(750,422,this)" :src="liveInfo.liveCoverImg"/>-->
                <!--            </div>-->

                <!--            <video v-if="liveInfo.liveStatus == 3 && liveInfo.isPurchased == 1" id="videoPlay" controls controlsList="nodownload"  x5-video-player-type="h5-page"-->
                <!--                   :src="liveInfo.backviewUrl" autoplay :poster="liveInfo.liveCoverImg"></video>-->

            </div>
            <div id="dplayer" style="height: 100%;width: 100%;display: none"></div>

            <!--        <div class="bofang"-->
            <!--             v-if="bofangFlag==0 && liveInfo.isPurchased==1 && liveInfo.liveStatus==1">-->
            <!--            <img @click="toPlay" src="http://files.qkyxzx.com/html5/bofang.png">-->
            <!--        </div>-->

            <div style="display: none" class="load-live-ing">
                <div class="load-live-ing-box">
                    <img class="load-live-ing-loading" src="http://files.qkyxzx.com/html5/loading.png" alt="">
                    <div class="load-live-ing-info">加载中</div>
                </div>
            </div>

            <!--        <div class="load">-->
            <!--            <img src="/images/navlogo.png"/>-->
            <!--            <p>专家正在赶来的路上...</p>-->
            <!--        </div>-->

        </div>
        <div class="make float" ref="make">
            <!--            <div class="total" v-if="liveInfo.liveStatus>0">{{liveInfo.purchasedMembers}}人学习</div>-->
            <div class="total" v-if="liveInfo.liveStatus == 0">{{liveInfo.remindMemberNum}}人已预约</div>
            <div class="total" v-if="liveInfo.liveStatus > 0">
                <span v-if="liveInfo.liveManTime>9999">{{(liveInfo.liveManTime / 10000).toFixed(2)}}万人次学习</span>
                <span v-else>{{liveInfo.liveManTime}}人次学习</span>
            </div>
            <div class="showCom" @click="showTast()">
                <!--            <img onload="AutoResizeImage(28,28,this)" src="http://files.qkyxzx.com/html5/com.png">/-->
                <i class="iconfont icon-diannao"></i>
            </div>
            <marquee v-if="liveInfo.scrollText" class="scrollText" scrollamount="5" direction="left">{{liveInfo.scrollText}}</marquee>
        </div>
<!--        <div class="liveTitle">{{liveInfo.liveTitle}}</div>-->
        <div class="swiper-container" v-if="liveInfo.sysRecommendDTOs.length>0">
            <div class="swiper-wrapper">
                <div v-for="(item,i) in liveInfo.sysRecommendDTOs" class="swiper-slide">
                    <img @click="gotoRcmd(item)" onload="AutoResizeImage(690,160,this)" :src="item.rcmdImgpath">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div :style="liveInfo.interactMonthlyImg && (showTabContentIndex == 2 || showTabContentIndex == 4) ? 'background:url('+liveInfo.interactMonthlyImg+') no-repeat;background-size: 100% 100%;' : 'background:#fff;'" v-bind:class="{tabDetail:true,payAndpart:!isVip&&(liveInfo.isPurchased==0 && liveInfo.liveStatus!=2 && liveInfo.isSell==0) || isVip}">
<!--        固定区域-->
        <div class="fixLiveBox">
            <!--    直播名称-->
            <div class="tab">
                <div v-for="(item,i) in cata" v-if="item.disable" @click="chooseTab(i,item)"
                     :class="{active : item.active == 1}" class="tab-item">{{item.name}}
                </div>
            </div>
        </div>
        <div class="content">
<!--            <div v-show="showTabContentIndex == 1 && liveInfo.liveContent==''" class="no-data">-->
<!--                <div class="noDataTxt">-->
<!--                    <img onload="AutoResizeImage(280,200,this)" src="https://files.qkyxzx.com/html5/null.png"/>-->
<!--                    <div class="info">暂无数据</div>-->
<!--                </div>-->
<!--            </div>-->
            <div v-show="showTabContentIndex == 1" class="detail">
                <p class="liveTitle">{{liveInfo.liveTitle}}</p>
                <div v-html="liveInfo.liveContent"></div>
            </div>
            <div v-show="showTabContentIndex == 2" class="list" id="contentList">
                <!--            <div class="footer-input">-->
                <!--                <input type="text" placeholder="发表自己的观点" v-model="content" maxlength="200"/>-->
                <!--                <button @click="addLiveComment()">发表</button>-->
                <!--            </div>-->
                <div class="faceBox">
                    <div class="newplboxFace">
                        <span class="face-icon">☺</span>
                    </div>
                    <div class="footer-input">
<!--                        <input type="text" class="textCont" placeholder="发表自己的观点">-->
                        <textarea placeholder="发表自己的观点" class="textCont" @input="scrollCont()"></textarea>
                        <button @click="addLiveComment()">发表</button>
                    </div>
                </div>

                <div class="comeIn">xxx来了</div>
                <div class="commentList">
                    <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">
                                <span class="hdName">{{item.memNickname}}</span>
                                <span class="hdTime">{{item.oprTime}}</span>
                            </div>
                            <div class="right-bottom" v-html="item.content"></div>
                        </div>
                    </div>
                </div>
                <div class="posterBtn">
                    <img src="/static/images/share.png" alt="">
                </div>
            </div>
            <div v-show="showTabContentIndex == 2 && yzt.length > 0" class="yzt" id="yzt">
                <div class="item float" v-for="(item,i) in yzt">
                </div>
            </div>
            <div v-show="showTabContentIndex == 3" class="showroom" id="showroom">
                <div v-html="liveInfo.showHall"></div>
            </div>
            <div v-show="showTabContentIndex == 4" class="rank" id="rank">
                <div v-if="rank.length == 0" class="no-data">
                    <div class="noDataTxt">
                        <img onload="AutoResizeImage(280,200,this)" src="https://files.qkyxzx.com/html5/null.png"/>
                        <div class="info">暂无数据</div>
                    </div>
                </div>
                <div v-if="rank.length > 0" class="rank-item float" v-for="(item,i) in rank">
                    <div v-if="i == 0" class="num one">1</div>
                    <div v-else-if="i == 1" class="num two">2</div>
                    <div v-else-if="i == 2" class="num three">3</div>
                    <div v-else class="num">{{i + 1}}</div>
                    <div class="header-img">
                        <img :src="item.memHeadimg" alt="">
                    </div>
                    <div class="user-name">{{item.memNickname}}</div>
                    <div class="mark">+{{item.count}}</div>
                </div>
                <div class="posterBtn">
                    <img src="/static/images/share.png" alt="">
                </div>
            </div>
            <div v-show="showTabContentIndex == 5" class="meetingBefore">
                <iframe :src="liveInfo.agoQuestionnaire" frameborder="0" width="100%" height="100%"></iframe>
            </div>
            <div v-show="showTabContentIndex == 6" class="meetingAfter">
                <iframe :src="liveInfo.cookQuestionnaire" frameborder="0" width="100%" height="100%"></iframe>
            </div>
        </div>
    </div>

    <!--=课程详情按钮-->
    <div v-if="isVip" class="footer">
        <button class="immediately" @click="addFreeBuyApi()">参会申请</button>
    </div>
    <div class="footer" v-if="!isVip&&(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="toast" id="gzfwh" style="display: none">
        <!--        <img class="wjs" src="http://files.qkyxzx.com/test/recommend/20220616/wjs-20220616005424.png" alt="">-->
        <div class="box">
            <div style="position: relative;">
                <p class="noitce">开启预约提醒</p>
                <div class="yy_code">
                    <img class="wjs" src="/images/dingyue2.jpg" alt="">
                </div>
                <p class="yy_tit">关注微信公众号</p>
                <p class="yy_tit">直播即将开始时将微信消息通知您</p>
                <img class="close" onclick="$('#gzfwh').hide();" src="http://files.qkyxzx.com/html5/close.png" alt="">

            </div>
        </div>

    </div>
    <!--后台推送二维码弹框-->
    <div class="toast" id="tuisongQrpath" style="display: none;">
        <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 v-if="toast" class="toast">
        <div class="toast-content">
            <div class="toast-info-title">电脑端观看</div>
            <div class="toast-info-content">
                <div>地址</div>
                <div>{{url + "&liveId=" + liveId}}</div>
            </div>
            <div class="toast-info-bottom">复制链接后电脑端浏览器打开即可观看</div>
            <button @click="copy()">点击复制</button>
            <img @click="closeToast()" class="toast-close" src="http://files.qkyxzx.com/html5/close.png"/>
        </div>
    </div>

    <!--不能预约-->
    <div class="tipsyuyue" id="tipsyuyue" style="display: none">
        还有{{endTime.minute}}分钟就要开始直播了，不能预约！
    </div>

<!--    审核中-->
    <div class="auditBox" style="display: none" v-show="isAudit">
        <div class="audit">
            <p class="auditClose" @click="closeAudit()"><img src="/images/guanbi2.png" alt=""></p>
            <p class="auditPic"><img src="/images/baoming.png" alt=""></p>
            <p class="auditTip">报名表审核中...</p>
        </div>
    </div>

    <!--生成海报-->
    <div id="capture">
        <div class="poster_html">
            <img class="poster_bj" src="/static/images/haibao/haibao1.jpg" alt="">
            <div class="poster_info_Box">
                <div class="poster_info">
                    <div class="poster_tx">
                        <img :src="shareData.wxHeadImg" alt="">
                    </div>
                    <div class="poster_name">
                        <p>{{shareData.wxName}}</p>
                        <p>邀请您一起来看直播</p>
                    </div>
                </div>
                <div class="poster_title">
                    {{shareData.liveTitle}}
                </div>
                <div class="poster_time">
                    <p>直播时间 {{shareData.liveBeginTime}}</p>
                    <p>来自全科界</p>
                </div>
                <div class="poster_code">
                    <img src="/static/images/dingyue.jpg" alt="">
                    <p>长按识别，立即观看</p>
                </div>
            </div>
        </div>
    </div>
    <div class="posterbox" style="display: none">
        <img class="hideImg" style="display: none" :src="shareData.wxHeadImg" alt="">
        <div class="poster_txt">
            <span>
                长按图片保存邀请卡
            </span>
        </div>
        <div class="poster_cont">
            <div class="poster_hbBox"></div>
            <img class="poster_close" src="/images/close.png" alt="">
        </div>
        <div class="poster_swiper">
            <ul>
                <li pic="/static/images/haibao/haibao1.jpg">
                    <img class="poster_itemImg" src="/static/images/haibao/haibao1_x.jpg" alt="">
                    <img class="choseImg" src="/static/images/haibao/select.png" alt="">
                </li>
                <li pic="/static/images/haibao/haibao2.jpg">
                    <img class="poster_itemImg" src="/static/images/haibao/haibao2_x.jpg" alt="">
                    <img class="choseImg" src="/static/images/haibao/select.png" alt="">
                </li>
                <li pic="/static/images/haibao/haibao3.jpg">
                    <img class="poster_itemImg" src="/static/images/haibao/haibao3_x.jpg" alt="">
                    <img class="choseImg" src="/static/images/haibao/select.png" alt="">
                </li>
                <li pic="/static/images/haibao/haibao4.jpg">
                    <img class="poster_itemImg" src="/static/images/haibao/haibao4_x.jpg" alt="">
                    <img class="choseImg" src="/static/images/haibao/select.png" alt="">
                </li>
                <li pic="/static/images/haibao/haibao5.jpg">
                    <img class="poster_itemImg" src="/static/images/haibao/haibao5_x.jpg" alt="">
                    <img class="choseImg" src="/static/images/haibao/select.png" alt="">
                </li>
                <li pic="/static/images/haibao/haibao6.jpg">
                    <img class="poster_itemImg" src="/static/images/haibao/haibao6_x.jpg" alt="">
                    <img class="choseImg" src="/static/images/haibao/select.png" alt="">
                </li>

            </ul>
        </div>
    </div>
    <canvas id="canvas" style="display: none"></canvas>
    <!--    <p id="bottomInfo">全科在线提供技术支持</p>-->
</div>
<footer>
    <div th:include="html5/common::common-footer"></div>
</footer>
<div  th:include="html5/common::common-firstlogin"></div>

</body>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>


<script th:inline="javascript">
    //<![CDATA[
    var fromlogin = [[${fromlogin}]];
    //]]>
</script>
<!--表情包-->
<script type="text/javascript" src="/static/js/sinaFaceAndEffech5.js"></script>
<script>
    $('.face-icon').SinaEmotion($('.textCont'));
</script>
<script type="text/javascript" src="/static/js/h5/common.js"></script>
<script type="text/javascript" src="/static/js/canvas/html2canvas.min.js"></script>
<script type="text/javascript" src="/static/js/canvas/canvas2image.js"></script>
<script type="text/javascript" src="/static/js/canvas/haibao.js"></script>
<script>
     document.write('<script src="/static/js/h5/live/live-alive.js?v=' + Math.random() + '"><\/script\>');
</script>
<script src="/static/js/jweixin-1.0.0.js"></script>
<script src="/static/js/wxshare.js?version=202222"></script>

<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.11.0/aliplayer-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/js/aliplayercomponents-1.0.9.min.js"></script>
</html>
