<!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="/static/js/jquery-3.5.1.min.js?v=" +Math.random()></script>
    <script src="/static/js/common.js?v=" +Math.random()></script>
    <script>
        document.write('<link href="/static/css/web/course/course-details.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');
    </script>
    <link rel="stylesheet" href="/web/css/common.css">

    <script src="/static/js/ucenter.js?v=" + Math.random()></script>
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="/static/css/web/course/page.css">
    <link rel="stylesheet" href="/static/css/web/course/course-details.css?v=" + Math.random()>
    <!--    <link rel="stylesheet" href="/static/css/html5/course/course-details.css?v=" + Math.random()>-->
    <script src="/static/js/swiper-bundle.min.js"></script>
    <link href="/static/web/js/layer.css" rel="stylesheet">
    <link href="/static/web/css/new.css" rel="stylesheet">
    <script src="/static/web/js/jquery-3.5.1.min.js"></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" src="/static/js/checkysrz.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="index-box">
    <!--导航栏-->
    <div th:include="web/common::common-header-web"></div>
    <div th:include="web/common::common-conMusic"></div>
    <div class="container indexmainbox">
        <input type="hidden" th:value="${id}" id="id" class="id">
        <input type="hidden" th:value="${ memToken}" id="memToken" class="memToken">

        <div class="page-loading" v-if="!pageLoaded">
            <div></div>
            <div></div>
        </div>

        <template v-else>
            <!--            <div class="common">-->
            <!--                <textarea placeholder="请输入内容" class="common-input" v-model="content"></textarea>-->
            <!--                <div class="confirm" @click="confirm()">确定</div>-->
            <!--                <div @click="commonClose()">取消</div>-->
            <!--            </div>-->

            <div class="page-container">
                <!-- banner区域 -->
                <div class="banner-container">
                    <div class="video-item " style="width: 675px; height: 380px; border-radius: 6px">

                        <div id="dplayer" style="height: 100%;width: 100%;display: none"></div>
                        <!--                        <video v-if="tqCourseCourse.qkjVodinfo" ref="movie" @timeupdate="updateTime($event)"-->
                        <!--                               @play="videoPlay()"-->
                        <!--                               @pause="videoPause()" id="video" controls :src="tqCourseCourse.qkjVodinfo.originalUrl"-->
                        <!--                               autoplay="autoplay" :poster="'http://files.qkyxzx.com/'+tqCourseCourse.coverImg"-->
                        <!--                               @ended="videoEnded()"></video>-->
                        <img style="width: 100%;height: 100%" v-if="!tqCourseCourse.qkjVodinfo"
                             :src="'http://files.qkyxzx.com/'+tqCourseCourse.coverImg">
                        <!--                        <div v-if="!tqCourseCourse.qkjVodinfo" class="bofang">-->
                        <!--                            <img src="http://files.qkyxzx.com/html5/bofang.png">-->
                        <!--                        </div>-->
                    </div>

                    <div class="rightcss">
                        <div class="title">{{info.title}}</div>
                        <div class="description">
                            <div class="description-item">
                                <i></i>
                                <span v-if="info.studyNumTOW>9999">{{(info.studyNumTOW / 10000).toFixed(2)}}万人次学习</span>
                                <span v-else>{{info.studyNumTOW||0}}人次学习</span>
                            </div>
                            <div class="description-item">
                                <i></i>
                                <span>共{{info.totalClassHours}}讲</span>
                            </div>
                        </div>

                        <div class="price-container" v-if="info.price != 0">
                            <p class="price-wrap">
                                <span>￥</span>{{info.price}}
                            </p>

                        </div>

                        <div class="price-container" v-if="info.price == 0 &&info.pointFlag==1">
                            <p class="price-wrap">
                                {{info.point}}<span>积分</span>
                            </p>
                        </div>
                        <button v-if="isVip"
                                class="buy-btn" @click="addFreeBuyApi">免费领取
                        </button>
                        <div v-else>
                            <button v-if="(info.isBuy == 0 && info.isSell == 0) && ((info.price==0 &&info.pointFlag==0) || (info.price==0 && info.pointFlag==1 && info.point==0))"
                                    class="buy-btn" @click="addFreeBuyApi">免费领取
                            </button>
                            <button v-else-if="(info.isBuy == 0 && info.isSell == 0) && (info.pointFlag==1 && info.point > 0) "
                                    class="buy-btn" @click="toPay">立即购买
                            </button>
                            <button v-else-if="(info.isBuy == 0 && info.isSell == 0) && (info.price>0)" class="buy-btn"
                                    @click="toPay">立即购买
                            </button>
                            <button :title="collect ? '已收藏，可在我的收藏中查看' : ''" type="button" class="collect-btn"
                                    :class="collect ? 'collected' : ''" @click="collectFn()">
                                <img class="collectImg" :src="collectImgSrc"/>
                                {{collect ? '已收藏' : '收藏'}}
                            </button>
                        </div>

                        <!--                        <button @click="share" class="buy-btn">分享</button>-->
                    </div>
                </div>
                <!--广告位-->
                <div class="swiper-container" v-if="ad.length > 0">
                    <div class="swiper-wrapper">
                        <div v-for="(item,i) in ad" class="swiper-slide">
                            <img @click="gotoAdHtml(item.rcmdUrl)" onload="AutoResizeImage(1200,160,this)" :src="item.rcmdImgpath">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="main-container">
                    <div class="main-left">
                        <!-- Tab -->
                        <div class="tab-container">
                            <div tabId="1" v-for="(item,i) in cata" :class="{active : item.id == activeId}"
                                 @click="chooseTab(i)"
                                 class="tab-item">{{item.name}}
                            </div>


                        </div>
                        <transition-group name="fade" tag="div">
                            <!-- Tab Content ====== 目录 ======= -->
                            <div class="tab-content" v-show="transLoaded && activeId === 1" key="tab-dir">
                                <div class="course-card" v-if="list[0]" v-for="(item,i) in list"
                                     @click="findTqCourseCourseInfo(item,i)" :class="{'play-active': playIndex === i}">
                                    <div class="course-card-cover-wrap">
                                        <img src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
                                             :src="'http://files.qkyxzx.com/'+item.coverImg" :alt="item.title">
                                        <div class="course-card-cover-mask" v-if="playIndex !== i"></div>
                                    </div>
                                    <div class="course-card-info">
                                        <p class="course-card-title">{{ item.title }}</p>
                                        <div class="course-card-desc">
                                            {{
                                            item.author ? `${item.author} · ` : ''
                                            }}
                                            {{
                                            item.professional ? `${item.professional} ·` : ''
                                            }}
                                            {{ formatDuring(item.vodLength) }}
                                        </div>
                                    </div>
                                </div>
                                <p class="no-content-tips" v-else style="color: #666">暂无目录</p>
                            </div>

                            <!-- Tab Content ====== 详情 ======= -->
                            <div class="tab-content" v-show="transLoaded && activeId === 2"
                                 v-html="info.details ? info.details : `<p style='color: #666'>暂无内容介绍。</p>`"
                                 key="tab-details"></div>
                            <!-- Tab Content ====== 互动 ======= -->
                            <div class="kechudong" v-show="transLoaded && activeId === 3" key="3">
                                <div class="newplboxba">
                                    <textarea placeholder="我来说两句..." name="commtent_content" id="comment"></textarea>
                                </div>

                                <div class="newplboxca">
                                    <div class="newpchuifubtn" @click="addLiveComment()">评论</div>
                                </div>
                                <div class="pinglun">
                                    <div class="hdshowbox" v-if="comments.length > 0 " v-for="(item,i) in comments">
                                        <div class="hduserbox">
                                            <div class="hdshowpic"><img
                                                    :src="item.commentMemHear">
                                            </div>
                                            <div class="hdshowname">{{item.commentMemName}}</div>
                                            <div class="hdshowtime-live">{{item.oprTime |date}}</div>
                                            <div class="clear"></div>
                                        </div>
                                        <div class="hdboxneir">{{item.content}}</div>
                                    </div>
                                </div>

                            </div>
                        </transition-group>
                    </div>
                    <!-- 右侧：加入圈子、广告、咨询推荐 -->
                    <div class="right-content-container">
                        <div class="in_main_rightbox" style="margin: 20px">
                            <!--加入圈子-->
                            <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/web/img/adtest.jpeg">
                            </div>

                            <!--资讯推荐-->
                            <div class="zixunlistbox">
                                <div class="haveckgd">
                                    <div class="tjtitle">资讯推荐</div>
                                    <a href="/view/index?from=web" target="_blank" class="lookmore">查看更多</a>
                                    <div class="clear"></div>
                                </div>
                                <div class="zxtjbox" v-if="consulting.length > 0">
                                    <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>
                    </div>
                </div>

            </div>
        </template><!---->
    </div>
    <!--底部公共区域-->
    <div th:include="web/common::common-bottom-web"></div>
    <!--返回顶部-->
    <div th:include="web/common::common-back-web"></div>
</div>
</body>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },

    })
</script>
<script 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 src="/static/web/js/layer.js"></script>
<script src="/static/web/js/common.js?v=" +Math.random()></script>
<script>
    document.write('<script src="/static/js/web/course/course-detail.js?v=' + Math.random() + '"><\/script\>');
</script>
<script src="/static/js/jweixin-1.0.0.js"></script>
<script src="/static/js/wxshare.js?version=20220630"></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>

</html>


<!--<div class="layerform" id="smrz" style="display: none">-->
<!--    <div class="layertitle">实名认证</div>-->
<!--    <p class="redtxt">注:应国家相关法律要求,请认真填写信息,同时方便我们给您邮寄学习资料</p>-->
<!--    <form class="writeform">-->

<!--        <div>-->
<!--            <label>真实姓名：</label><span><input id="userName" placeholder="请输入真实姓名" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>性别：</label><span><span class="magic-radiobox"><input id="r1" class="magic-radio"-->
<!--                                                                        name="sex"-->
<!--                                                                        type="radio" value="1">-->
<!--            <label for="r1">男</label>&nbsp;&nbsp;&nbsp;-->
<!--            <input id="r2" checked class="magic-radio" name="sex" type="radio" value="2">-->
<!--            <label for="r2">女</label> </span></span></div>-->

<!--        <div>-->
<!--            <label>证件号码：</label><span><input id="card" placeholder="请输入证件号码" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>从业经验：</label><span><select id="experience">-->
<!--            <option value="-1">请选择</option>-->
<!--									<option value="1">1-3年</option>-->
<!--									<option value="2">3-5年</option>-->
<!--									<option value="3">3-5年</option>-->
<!--									<option value="4">3-5年</option>-->
<!--									<option value="5">3-5年</option>-->
<!--        </select></span></div>-->

<!--        <div>-->
<!--            <label>单位名称：</label><span><input id="unitName" placeholder="请输入" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>科室名称：</label><span><input id="department" placeholder="请输入" type="text"/></span></div>-->
<!--        <div>-->
<!--            <label>单位详细地址：</label><span><input id="address" placeholder="请输入单位详细地址" type="text"/></span></div>-->


<!--        <div>-->
<!--            <label></label><span>-->
<!--            <button class="ysrzbtn" name="Abutton1" id="submitInfo" type="button">提交信息-->
<!--            </button></span></div>-->
<!--    </form>-->
<!--</div>-->

<!--预约直播后提示用户关注服务号会给推送消息-->
<!--<div class="layerform" id="ysrz" style="display: none">-->
<!--    <div class="layertitle">医师信息</div>-->
<!--    <form class="writeform">-->
<!--        <div><label><i>*</i>职称1：</label><span>-->
<!--            <select id="professional" name="Select1"> </select>-->
<!--        </span></div>-->
<!--        <div><label><i>*</i>职称2：</label><span>-->
<!--            <select id="professionalTwo" name="Select1">-->
<!--                <option value=''>请选择</option>-->
<!--            </select>-->
<!--        </span></div>-->
<!--        <div><label><i>*</i>职务：</label><span>-->
<!--            <select id="post" name="Select1"></select>-->
<!--        </span></div>-->
<!--        <div><label><i>*</i>执业编码：</label><span>-->
<!--            <input id="businessLicense" name="Text1" type="text" placeholder="请输入医师执业资格证书编码"/>-->
<!--        </span></div>-->
<!--        <div><label></label><span>-->
<!--            <button name="Abutton1" type="button" id="submitInformation"-->
<!--                    class="ysrzbtn">提交信息</button>-->
<!--        </span></div>-->

<!--    </form>-->
<!--</div>-->

<!--预约直播后提示用户关注服务号会给推送消息-->
<!--<div class="layerform" id="wjdc" style="display: none">-->
<!--    <div class="layertitle">问卷调查</div>-->
<!--    <form class="writeform" id="writeform">-->

<!--    </form>-->
<!--</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 class="" id="wd" style="display: none">
    <div class="layertitle">问答</div>
    <form class="writeform">
        <div style="display: block"><label style="width: 230px"><i>*</i>您是否学会本课程，为什么？</label>
            <span style="display:block;">
                <label for="sfxh"></label><textarea id="sfxh" name="Text1" placeholder="请输入答案"></textarea>
            </span>
        </div>
        <div style="text-align: center">
            <button type="button" id="submitWd" class="ysrzbtn">提交</button>
        </div>
    </form>
</div>
<!--课程播放结束后需要有自评-->
<div id="ziping" style="display: none">
    <div class="layertitle">提示</div>
    <form class="writeform">
        <div style="display: block"><label style="width: 230px">学完本课程后，提交自评</label>
        </div>
        <button type="button" id="zipingBtn" class="ysrzbtn">确定</button>
    </form>
</div>
<!--定向课程提取码-->
<div id="takeCode" style="display: none">
    <div class="layertitle">提示</div>
    <form class="writeform">
        <div style="display: block">
            <label><i>*</i>提取码：</label>
            <span><label for="tqm"></label><input id="tqm" name="Text1" placeholder="请输入提取码"/></span>
        </div>
        <button type="button" id="takeCodeBtn" class="ysrzbtn">确定</button>
    </form>
</div>
<!--购买后观看-->
<div id="buyBox" style="display: none">
    <div class="layertitle">提示</div>
    <div class="buyCont">

    </div>
</div>


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