<!DOCTYPE html>
<html>

<head>
    <title>{$outline.ol_name}-{$course.Cou_Name}</title>
    <vt:include file="inc/meta-vue.inc" />
    <!--播放器的引用-->
    <!--<script type="text/javascript" src="/Utility/Ckplayer/js/offlights.js?ver={$version}"></script>
<script type="text/javascript" src="/Utility/Ckplayer/ckplayer/ckplayer_h5.js?ver={$version}" charset="utf-8"></script>-->
    <script type="text/javascript" src="/Utility/Qiniuyun/qiniu-web-player-1.2.3.js?ver={$version}"></script>
    <link href="Styles/CourseStudy.css?ver={$version}" rel="stylesheet" type="text/css" />
</head>

<body canstudy="{$canStudy}" olid="{$olid}">
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
        <!--侧滑菜单部分-->
        <vt:include file="inc/CourseStudyMenu.html" />

        <div class="mui-inner-wrap">
            <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"
                style="position: relative;height:100%">
                <div id="context-box">
                    <div remark="视频" :video="state.urlVideo" class="videobox"  v-on:click="msgBlur">
                        <div id="videoplayer"
                            v-show="JSON.stringify(outline) == '{}' || (state.existVideo && !state.otherVideo && !state.isLive)"
                            style="height: 100%;width:100%;" remark="点播">
                        </div>
                        <div id="novideoplayer"
                            v-show="JSON.stringify(outline) != '{}' && !state.existVideo && !state.isLive"
                            style="height: 100%;width:100%;" remark="没有视频">
                            <span v-if="!state.isLogin">
                              <a href="Login.ashx">未登录，点击此处登录！</a></span>
                            <span v-if="state.isLogin">
                              没有视频资源</span>
                        </div>
                        <div id="videoinfo" v-if="!state.otherVideo && !state.isLive" style="display: none;">
                            <span style="display: non6e">视频时长：{{video.total}}秒，播放进度：{{playtime}}秒，</span>
                            <span>累计学习{{video.studytime}}秒，完成{{video.percent}}%，</span>
                            <span style="cursor: pointer"
                                v-on:click="videoSeek(video.playhistime)">上次播放到{{video.playhistime}}秒</span>
                            <span class="videolog info" v-show="studylogState==1">学习进度提交成功!</span>
                            <span class="videolog error" v-show="studylogState==-1">学习进度提交失败!</span>
                        </div>
                        <iframe id="vedioiframe" height="100%" width="100%" v-if="state.outerVideo && state.otherVideo && !state.isLive"
                            :src="state.urlVideo" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"
                            allowtransparency="true" frameborder="0" remark="外部视频链接"
                            type="application/x-shockwave-flash"></iframe>

                    </div>
                    <div remark="直播" v-show="state.isLive" :video="state.urlVideo" class="videobox"  v-on:click="msgBlur">
                        <div id="livebox" v-show="state.isLive && state.isLiving" style="height: 100%;width:100%;"
                            remark="直播">
                        </div>
                       <!-- <div id="liveLoadingbox" v-show="state.isLive && state.isLiving && video.loading" remark="直播流加载时">
正在加载...
<button id="pagefresh" v-on:click="pagefresh" type="button">刷新</button>
                        </div>-->
                        <div id="liveStopbox" v-show="state.isLive && !state.isLiving" style="height: 100%;width:100%;"
                            remark="直播未开始">
                            <img src="images/livebg.jpg" class="bgPicture" style="height: 100%;width:100%;" />
                            <div class="liveStop_Tit" v-show="state.canStudy && !state.LiveStart">直播未开始！</div>
                            <div class="liveStop_Tit" v-show="state.canStudy && state.LiveOver">直播已经结束！</div>
                            <div class="liveStop_Tit" v-show="!state.canStudy">无权阅览！</div>
                        </div>
                    </div>
                    <div tag="视频">

                        <div class="outline-name">
                            <span v-show="JSON.stringify(outline) == '{}'">正在加载...</span>
                            {{outline.Ol_Name}}
                            <button id="msginputBtn" class="el-icon-edit" v-on:click="msgFocus"
                                v-show="JSON.stringify(outline) != '{}'"> 留言
                            </button>
                        </div>
                        <div class="mui-card intro-box" id="chatArea">
                            <div class="mui-card-content mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <div class="chatArea">
                                        <div class="chatlist" id="chatlist" v-on:click="msgBlur">
                                            <dl id="chatlistdl" v-show="messages.length>0">
                                                <dd v-for="(item,index) in messages">
                                                    <div :playtime="item.Msg_PlayTime">
                                                        <acc><i class="el-icon-chat-dot-round"></i>{{item.Ac_Name}}：<del
                                                                class="el-icon-close"></del></acc>
                                                        <msg>{{item.Msg_Context}} </msg>
                                                    </div>
                                                    <date>{{item.Msg_CrtTime | date('yyyy-M-d hh:mm:ss')}}</date>
                                                </dd>

                                            </dl>
                                            <div v-show="messages.length<1" class="nomsg">没有人留言！</div>
                                        </div>

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

                        </div>
                        <div id="chatbox" remark="留言录入区域">

                            <textarea rows="3" id="messageinput" name="messageinput" autofocus
                                v-on:keyup.enter="msgSend"></textarea>
                            <button id="btnMessage" v-on:click="msgSend">发送</button>

                        </div>
                    </div>
                    <div tag="学习内容" style="display:none">
                        <div class="mui-card intro-box">
                            <div class="mui-card-header">
                                <span>学习内容</span></div>
                            <div class="mui-card-content mui-scroll-wrapper">
                                <div class="mui-scroll" id="details">
                                    <vt:if var="canStudy" value="true" compare="=" remark="如果可以学习">
                                        <vt:if var="outline.ol_intro" value="" compare="!=" remark="学习内容">
                                            {$outline.ol_intro}
                                            <vt:else />
                                            没有学习内容 </vt:if>
                                        <vt:else />
                                        <div class="nointro">（未登录或未购买） </div>
                                    </vt:if>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div tag="附件" style="display:none">
                        <div class="mui-card acc-box">
                            <div class="mui-card-header">
                                <span>附件</span></div>
                            <div class="mui-card-content  mui-scroll-wrapper">
                                <vt:if var="canStudy" value="true" compare="=" remark="如果可以学习">
                                    <vt:if var="access.count" value="0" compare=">">
                                        <div class="mui-scroll">
                                            <dl id="access">
                                                <vt:foreach from="$#.access" item="acc" index="j">
                                                    <dd><a class="accItem" target="_blank" href="{$acc.As_FileName}"
                                                            download="{$acc.As_Name}">{$:j}、{$acc.As_Name} </a> </dd>
                                                </vt:foreach>
                                            </dl>
                                        </div>
                                        <vt:else />
                                        <div class="noaccess">没有附件</div>
                                    </vt:if>
                                    <vt:else />
                                    <div class="noaccess">（未登录或未购买）</div>
                                </vt:if>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ++ -->
            </div>
            <script type="text/javascript" src="Scripts/CourseStudy.js?ver={$version}"></script>
            <div class="mui-off-canvas-backdrop">
            </div>
            <vt:include file="inc/CourseStudyFooter.html" />
        </div>
    </div>
</body>

</html>