<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="全科界"/>
    <meta name="keywords" content="全科界,全科医生,健康教育,中华医学教育在线,基石计划,中医药,公共卫生,基层卫生"/>
    <meta name="description"
          content="全科界 · 智慧赋能平台是一个服务广大基层医疗机构，为基层医务人员持续赋能的综合性平台。 平台依托全科场景，倾心打造了以“医-教”为核心的赋能架构，通过远程教学培训、全科医生职业发展、远程医疗协作等子系统建设，结合优质的专家资源，高效精准地进行专业能力的输出，同时灵活丰富的培训教学方式，真正实现基层医务人员的“个性化”学，促进基层医务人员能力提升，落实国家分级诊疗政策，让社区群众便捷接触到优质医疗资源，增进民生福祉。"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>全科界-智慧赋能平台</title>
    <link rel="stylesheet" href="/static/css/web/live/page.css">
    <link rel="stylesheet" href="/static/css/web/live/live-prefecture.css">
    <link href="/static/web/js/layer.css" rel="stylesheet">
    <link href="/static/web/css/new.css" rel="stylesheet">
    <link href="/web/css/common.css" rel="stylesheet"/>
<!--    表情包-->
    <link rel="stylesheet" type="text/css" href="/static/css/sinaFaceAndEffec.css" />

    <script src="/static/web/js/jquery-3.5.1.min.js"></script>
    <script src="/static/web/js/layer.js"></script>
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css?v=" +Math.random()>
    <!--    <script type="text/javascript" src="/static/js/web/live/layIndex.js"></script>-->
    <script src="/static/js/swiper-bundle.min.js?v=" +Math.random()></script>
    <script src="/static/js/wxLogin.js?v=" +Math.random()></script>
    <script src="/static/js/md5.js?v=" +Math.random()></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>
    <script>
        //试试
        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>

    <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>
    <style>
        .load {
            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: 220px;
            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;
        }
         [v-cloak]{
             display: none;
         }
    </style>
</head>
<div class="index-box">
    <input type="hidden" id="liveId" th:value="${liveId}"/>
    <input type="hidden" id="fromMemCard" th:value="${fromMemCard}"/>

    <!--导航栏-->
    <div th:include="web/common::common-header-web"></div>
    <div th:include="web/common::common-conMusic"></div>

    <!--首页主体盒子-->
    <div v-cloak class="indexmainbox">


        <template>
            <div class="zhuanquxqbox">


                <div class="zqxqtopbox">
                    <div class="zhiboboxLeft">
                        <div class="zhukefengmian">

                            <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" class="bg"><img class="cover" :src="liveInfo.liveCoverImg"/>
                            </div>


                            <!--                    未开始-->
                            <div v-if="liveInfo.liveStatus==0">
                                <img class="cover" :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==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">
                                <div class="bg"><img class="cover" :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 class="cover"
                                                                                    :src="liveInfo.liveCoverImg"/>
                                </div>
                            </div>
                            <div id="dplayer" style="height: 100%;width: 100%; display: none"></div>
                        </div>

                        <!--title-->
                        <div class="zqxqtitlebox-live">
                        <div class="zqbotboxleft">
                            <div class="zqxqtitletop">{{liveInfo.liveTitle}}</div>
                            <div class="zqxqtiaojian">
                                <div class="lisoiocn" v-if="liveInfo.liveStatus==0"><em></em><span> {{liveInfo.remindMemberNum}}人已预约</span>
                                </div>
                                <div class="lisoiocn" v-if="liveInfo.liveStatus==1">
                                    <span v-if="liveInfo.liveManTime>9999"><em></em><span> {{(liveInfo.liveManTime / 10000).toFixed(2)}}万人次学习</span></span>
                                    <span v-else><em></em><span> {{liveInfo.liveManTime}}人次学习</span></span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="zqbotboxright">
                        <span :title="collect ? '已收藏，可在我的收藏中查看' : ''" class="collect-btn"
                              :class="collect ? 'collected' : ''" @click="collectFn()">
                                <img class="collectImg" :src="collectImgSrc"/>
                                {{collect ? '已收藏' : '收藏'}}
                            </span>
                        </div>
                        <div v-if="isVip" class="zqbotboxright">
                            <span @click="addFreeBuyApi()" class="ljpaybtn">参会申请</span>
                        </div>
                        <div v-else>
                            <div class="zqbotboxright"
                                 v-if="liveInfo.isPurchased==0 && liveInfo.isSell==0 && liveInfo.liveStatus!=2">
                            <span v-if="(liveInfo.price==0 &&liveInfo.pointFlag==0 && liveInfo.isPurchased == 0) || (liveInfo.price==0 &&liveInfo.pointFlag==1 && liveInfo.point==0 && liveInfo.isPurchased == 0)"
                                  @click="addFreeBuyApi()" class="ljpaybtn">参会申请</span>

                                <span v-if="(liveInfo.pointFlag==1 && liveInfo.point>0 && liveInfo.isPurchased == 0)"
                                      class="ljpaybtn" @click="toPay()">立即购买</span>
                                <span v-if="(liveInfo.pointFlag==1 && liveInfo.point>0 && liveInfo.isPurchased == 0)"
                                      class="nowprize">{{liveInfo.point}}积分</span>

                                <span v-if="(liveInfo.price>0 && liveInfo.pointFlag==0 && liveInfo.isPurchased == 0)"
                                      class="ljpaybtn" @click="toPay()">立即购买</span>
                                <span v-if="(liveInfo.price>0 && liveInfo.pointFlag==0 && liveInfo.isPurchased == 0)"
                                      class="nowprize">¥{{liveInfo.price}}</span>
                                <!--                                <span v-if="(liveInfo.price>0 && liveInfo.pointFlag==0&& liveInfo.isPurchased == 0) || (liveInfo.price>0 && liveInfo.isPurchased == 0 && liveInfo.pointFlag == 1)"-->
                                <!--                                      class="oldprize">原价¥{{liveInfo.price}}</span>-->
                                <div class="clear"></div>
                            </div>
                        </div>

                        <div class="clear"></div>
                    </div>
                    </div>
                    <div class="zhiboboxRight" id="contentList">
                        <div class="kechudong">
                            <div class="newplboxly">
                                留言区
                            </div>
                            <div class="newplboxfb faceBox" style="height: 30px;">
                                <div class="newplboxFace">
                                    <span class="face-icon">☺</span>
                                </div>
                                <div class="newplboxba">
                                    <textarea placeholder="我来说两句..." class="textCont" name="commtent_content" id="text"></textarea>
                                </div>
                                <div class="newplboxca">
                                    <div class="newpchuifubtn" @click="addLiveComment()">评论</div>
                                </div>
                            </div>
                            <div class="pinglun">
                                <div class="hdshowbox" v-if="contentList.length > 0 " v-for="(item,i) in contentList">
                                    <div class="hduserbox">
                                        <div class="hdshowpic"><img
                                                :src="item.memHeadimg">
                                        </div>
                                        <div class="hdshowname" :title="item.memNickname">{{item.memNickname}}</div>
                                        <div class="hdshowtime-live">{{item.oprTime}}</div>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="hdboxneir" v-html="item.content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both">

                    </div>
                </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(1200,160,this)" :src="item.rcmdImgpath">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>


                <div class="xqtablistbox kechengxqleftbox">
                    <div class="scrollText" v-if="liveInfo.scrollText">{{liveInfo.scrollText}}</div>
                    <div class="xqtitlebox">
                        <span v-for="(item,i) in cata" v-if="item.disable" @click="chooseTab(i,item)"
                             :class="{nowclcik : item.active == 1}" class="tab-item">{{item.name}}
                        </span>
                    </div>
                    <!--详情-->
                    <div v-if="showTabContentIndex == 1" class="xqtabbox" >
                        <div v-if="liveInfo.liveContent==''" style="text-align: center;">
                            <img style="margin-top: 60px;width: 200px;" src="https://files.qkyxzx.com/html5/null.png"/>
                            <p style="margin-top: 20px;font-size: 16px;">暂无数据</p>
                        </div>
                        <div v-if="liveInfo.liveContent!=''" class="detail" style="color: black;" v-html="liveInfo.liveContent"></div>
                    </div>
                    <div v-if="showTabContentIndex == 3" class="yzt" id="yzt" style=" width: 690px;color: black; padding: 30px;"
                         v-html="liveInfo.showHall">
                    </div>
                    <div v-if="showTabContentIndex == 4">
                        <div v-if="rankList.length == 0" style="text-align: center;">
                            <img style="margin-top: 60px;width: 200px;" src="https://files.qkyxzx.com/html5/null.png"/>
                            <p style="margin-top: 20px;font-size: 16px;">还没人分享呢，你可以成为第一人哦</p>
                        </div>

                        <ul v-if="rankList.length != 0" class="bangdan">
                            <li v-for="(item,i) in rankList">
                                <label>{{i+1}}</label>
                                <img :src="item.memHeadimg">
                                <span class="fxName">{{item.memNickname}}</span>
                                <span class="fxCount">+{{item.count}}</span>
                            </li>
                        </ul>
                    </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 class="in_main_rightbox kcxqrightbox">


                    <!--加入圈子-->
                    <div class="joinus">
                        <div class="tjtitle">加入圈子</div>
                        <div class="joinbox">

                            <div class="joinlistbox" v-for="(item,i) in queryQrCode">
                                <div class="qunnamne">{{item.name}}</div>
                                <div class="joinbtn">加入</div>
                                <div class="qewmbox">
                                    <div class="qewmpic"><img :src="item.qrImg"></div>
                                    <div class="qewmright">
                                        <span class="qunliaotitle">扫码加入群聊</span>
                                        <span class="qunliaotext">进群请备注一下您的姓名、城市、职称</span>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>

                    <!--广告位置-->
                    <div class="adboxright">
                        <img src="/static/img/adtest.jpeg">
                    </div>

                    <!--资讯推荐-->
                    <div class="zixunlistbox">
                        <div class="haveckgd">
                            <div class="tjtitle">资讯推荐</div>
                            <a class="lookmore" href="/view/index?from=web" target="_blank">
                                查看更多
                            </a>
                            <div class="clear"></div>
                        </div>
                        <div class="zxtjbox">

                            <div class="zxlisttext">
                                <a class="zxtjtextbox" v-for="(item,i) in consulting"
                                   :href="'/view/detail?from=web&artId=' + item.rcmdObjId" target="_blank">
                                    <span class="zxtjlistnu threelist">{{ i + 1 }}</span>
                                    <div class="zxtjlistbitle">
                                        <div class="zxtitle">{{item.rcmdTitle}}</div>
                                        <div class="zxdatabox">
                                            <span>{{item.author}}</span>
                                            <span>{{item.click}}阅读</span>
                                        </div>
                                    </div>
                                    <div class="clear"></div>
                                </a>
                            </div>
                        </div>
                    </div>


                    <!--广告位置-->
                    <div class="adboxright">
                        <img src="/static/img/adtest.jpeg">
                    </div>


                </div>
                <div class="clear"></div>


            </div>
        </template>
    </div>

    <!--购买后查看-->
    <div class="tipsgoumai" style="display: none">
        请购买后观看
    </div>

    <!--评论成功-->
    <div class="tipsgoumai" style="display: none">
        评论成功
    </div>

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


    <!--底部公共区域-->
    <div th:include="web/common::common-bottom-web"></div>


    <!--返回顶部-->
    <div th:include="web/common::common-back-web"></div>

</div>

<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/web/js/common.js"></script>
<script type="text/javascript" src="/static/js/ucenter.js"></script>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/checkysrz.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 type="text/javascript" src="/static/js/web/live/live-prefecture.js"></script>
<script src="/web/js/layer.js"></script>
<script src="/static/web/js/common.js?v=" +Math.random()></script>

<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/8.0.0-beta.3/hls.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.25.1/DPlayer.min.js"></script>

<!--表情包-->
<!--<script type="text/javascript" src="/static/js/mainFace.js"></script>-->
<script type="text/javascript" src="/static/js/sinaFaceAndEffec.js"></script>
<script>
    $('.face-icon').SinaEmotion($('.textCont'));
</script>
</html>


<div class="ma-live" style="display: none">
    <div class="box">
        <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>
    </div>
</div>


<!--直播报名需要采集的信息-->
<div class="caijbox" style="display: none">
    <div class="caijialert">
        <div class="tijiaoform">
            <span class="caijititle">信息采集</span>
            <input type="text" name="" placeholder="信息采集">
            <input type="text" name="" placeholder="信息采集">
            <input type="text" name="" placeholder="信息采集">
            <input type="text" name="" placeholder="信息采集">
        </div>
        <div class="tijiaobtn">信息提交</div>
        <span class="closebtn">关闭</span>
    </div>
</div>



<!--认证信息公共部分-->
<div th:include="web/common::common-authentication"></div>
<script type="text/javascript" src="/static/js/web/authentication.js"></script>




