<!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 type="text/javascript" src="/static/js/h5/common.js"></script>
    <script src="/static/js/common.js?v=" +Math.random()></script>
    <script>
        document.write('<link href="/static/css/html5/course/course-details.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"/>
    <script src="/static/js/ucenter.js?v=" +Math.random()></script>
    <link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
    <script src="/static/js/swiper-bundle.min.js"></script>
    <link href="/static/web/js/layer.css" rel="stylesheet">
    <script src="/static/web/js/layer.js"></script>
    <style>
        #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-header"></div>-->
    <div th:include="html5/common::common-loading"></div>
    <div th:include="html5/common::common-integral"></div>
    <div th:include="html5/common::common-conMusic"></div>
    <div  th:include="html5/common::common-firstlogin"></div>

    <input type="hidden" th:value="${id}" id="id" class="id">
    <input type="hidden" th:value="${memToken}" id="memToken" class="memToken">
<!--    <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="video-item">
        <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 controlsList="nodownload"-->
        <!--               :src="tqCourseCourse.qkjVodinfo.originalUrl" autoplay-->
        <!--               :poster="'http://files.qkyxzx.com/'+tqCourseCourse.coverImg"-->
        <!--               @ended="videoEnded" x5-video-player-type="h5-page"></video>-->
        <img onload="AutoResizeImage(750,422,this)" style="width: 100%;height: 100%" v-if="!tqCourseCourse.qkjVodinfo&&countNum==-1"
             :src="'http://files.qkyxzx.com/'+tqCourseCourse.coverImg">
    </div>
    <div class="make float">
        <div v-if="info.studyNumTOW>9999" class="total">{{info.totalClassHours}}讲 · {{(info.studyNumTOW / 10000).toFixed(2)}}万人次学习</div>
        <div v-else class="total">{{info.totalClassHours}}讲 · {{info.studyNumTOW}}人次学习</div>
        <div class="showCom" @click="showTast()"><img onload="AutoResizeImage(28,28,this)"
                                                      src="http://files.qkyxzx.com/html5/com.png"></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(690,160,this)" :src="item.rcmdImgpath">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="courseTitle">{{info.title}}</div>
    <div class="tab">
        <div v-for="(item,i) in cata" v-if="item.disable" @click="chooseTab(i)" :class="{active : item.active == 1}"
             class="tab-item">{{item.name}}
        </div>
    </div>
    <div v-if="cata[0].active == 1" id="catalogue" class="catalogue">
        <div v-if="list[0]" v-for="(item,i) in list" @click="findTqCourseCourseInfo(item,i)"
             :class="{'active':playIndex == i}" class="list-item float">
            <div class="left">
                <img v-if="item.coverImg" onload="AutoResizeImage(288,162,this)"
                     :src="'http://files.qkyxzx.com/'+item.coverImg">
                <div class="bofang">
                    <img v-if="playIndex != i" src="http://files.qkyxzx.com/html5/bofang.png">
                    <img v-if="playIndex == i" src="http://files.qkyxzx.com/html5/gif.gif">
                </div>
            </div>
            <div class="right">
                <div class="title">{{item.title}}</div>
                <div class="cata">
                    <span v-for="(tag,i) in item.tags">{{tag.tag_name}}</span>
                </div>
                <div class="time">
                    {{item.author ? item.author + ' ·' : ''}}{{item.professional ? item.professional + ' ·' : ''}}
                    {{formatDuring(item.vodLength)}}
                </div>
            </div>
        </div>
    </div>
    <div v-if="cata[1].active == 1" class="detail" v-html="tqCourseCourse.details">
    </div>
    <div v-if="cata[2].active == 1" class="interact">
        <div class="footer-input">
            <input type="text" placeholder="发表自己的观点" v-model="content" maxlength="200"/>
            <button @click="confirm()">发表</button>
        </div>
        <div class="courseCommentList">
            <div v-for="(item,i) in comments" class="interact-item float">
                <div class="interact-item-left">
                    <img :src="item.commentMemHear"/>
                </div>
                <div class="interact-item-right">
                    <div class="user-name">{{item.commentMemName}}</div>
                    <div class="leave-time">{{item.oprTime | date}}</div>
                    <div class="leave-content">{{item.content}}</div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="cata[3].active == 1" class="list">
        <div v-for="(item,i) in cataList" @click="coursePrefectureList(item.id)" class="list-item float">
            <div class="left">
                <img onload="AutoResizeImage(288,162,this)" :src="'http://files.qkyxzx.com/'+item.coverImg">
                <div class="bofang">
                    <img src="http://files.qkyxzx.com/html5/bofang.png">
                </div>
            </div>
            <div class="right">
                <div class="title">{{item.title}}</div>
                <div class="time">{{item.totalClassHours}}讲 · {{item.studyNumTOW}}人次学习</div>
                <div v-if="item.isBuy == 0 && item.pointFlag == 0 && item.price > 0" class="money">
                    <span>¥</span>{{item.price}}
                </div>
                <div v-if="item.isBuy == 0 && item.pointFlag == 0 && item.price == 0" class="money">免费</div>
                <div v-if="item.isBuy == 0 && item.pointFlag == 1 && item.point == 0" class="money">免费</div>
                <div v-if="item.isBuy == 0 && item.pointFlag == 1 && item.point > 0 " class="jf">
                    {{item.point}}<span>积分</span></div>
            </div>
        </div>
    </div>
<!--    <div v-if="cata[2].active == 1 && info.isBuy == 1" class="addCommon-footer">-->
<!--        <div v-if="info.isBuy == 1" class="addCommon" @click="addCommon()">发表观点</div>-->
<!--    </div>-->
    <!--    <div v-if="cata[1].active == 1" class="bq">-->
    <!--        <img src="http://files.qkyxzx.com/html5/bqsm.png">-->
    <!--    </div>-->
    <div v-if="isVip&&(info.isBuy == 0 && info.isSell == 0)" class="footer">
        <button  class="immediately" @click="addFreeBuyApi()">免费领取</button>
    </div>
    <div v-if="!isVip&&(info.isBuy == 0 && info.isSell == 0)" class="footer">
        <button v-if="(info.price==0 &&info.pointFlag==0) || (info.price==0 && info.pointFlag==1 && info.point==0)"
                class="immediately" @click="addFreeBuyApi()">免费领取
        </button>
        <button v-else-if="info.pointFlag==1 && info.point>0" class="consume" @click="toPay()">立即购买：{{info.point}}积分
        </button>
        <button v-else-if="info.price>0" class="consume" @click="toPay()">立即购买：{{info.price}}元</button>
    </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 + "&id=" + id}}</div>
            </div>
            <div class="toast-info-bottom">复制链接后电脑端浏览器打开即可观看</div>
            <button @click="copy()">点击复制</button>
            <img @click="closeToast()" class="close" src="http://files.qkyxzx.com/html5/close.png"/>
        </div>
    </div>

    <div class="allblackbox">
        <div class="payalertbox">
            <div class="payfottopbox">
                <p><img src="https://files.qkyxzx.com/html5/zikeshitips.png" alt=""></p>
                <p v-if="(info.price==0 &&info.pointFlag==0) || (info.price==0 && info.pointFlag==1 && info.point==0)">
                    领取后观看</p>
                <p v-else>购买后观看</p>
                <p v-if="(info.price==0 &&info.pointFlag==0) || (info.price==0 && info.pointFlag==1 && info.point==0)"
                   @click="addFreeBuyApi();">免费领取</p>
                <p v-else-if="info.pointFlag==1 && info.point>0" @click="toPay()">立即购买：{{info.point}}积分</p>
                <p v-else-if="info.price>0" @click="toPay()">立即购买：{{info.price}}元</p>
            </div>
            <div class="payforcolose" onclick="$('.allblackbox').hide();">x</div>
        </div>
    </div>
    <!--视频播放完问题弹窗-->

    <div class="allblackbox1" id="wd">
        <div class="payalertbox1">
            <div class="payfottopbox">
                <div class="layertitle">问答</div>
                <form class="writeform">
                    <div style="display: block"><label><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">
                        <p type="button" id="submitWd1" class="ysrzbtn">提交</p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--课程播放结束后需要有自评-->

    <div class="allblackbox1" id="ziping">
        <div class="payalertbox">
            <div class="payfottopbox">
                <form class="writeform">
                    <div><label>学完本课程后，提交自评</label>
                    </div>
                    <p id="zipingBtn1" onclick="$('#ziping').hide();">确定</p>
                </form>
            </div>
        </div>
    </div>

    <!--定向课程提取码-->

    <div class="allblackbox" id="takeCode">
        <div class="payalertbox">
            <div class="payfottopbox">
                <div class="layertitle">提取码</div>
                <form class="writeform">
                    <div style="display: block">
                        <span style="display:block;">
                              <label for="tqm"></label><input id="tqm" name="Text1" placeholder="请输入提取码"/>
                         </span>
                    </div>
                    <div style="text-align: center">
                        <p type="button" id="takeCodeBtn" class="ysrzbtn">提交</p>
                    </div>
                </form>
            </div>
            <div class="payforcolose" onclick="$('#takeCode').hide();">x</div>
        </div>
    </div>
    <!--    <p id="bottomInfo">全科在线提供技术支持</p>-->
</div>
<footer>
    <div th:include="html5/common::common-footer"></div>
</footer>
</body>
<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>
<!-- Initialize Swiper -->
<script th:inline="javascript">
    //<![CDATA[
    var fromlogin = [[${fromlogin}]];
    //]]>
</script>
<script>
    document.write('<script src="/static/js/h5/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>
