<!DOCTYPE html>
<html>

<head>
      <title>课程学习</title>
      <vt:include file="inc/meta_api.inc" />
      <script type="text/javascript" src="/Utility/CoreScripts/MessageBox.js?ver={$version}"></script>
      <link rel="stylesheet" type="text/css" href="/Utility/CoreStyles/MessageBox.css?ver={$version}"/>
      <script type="text/javascript" src="/Utility/Qiniuyun/qiniu-web-player-1.2.3.js"></script>
      <link href="Styles/CourseStudy.css?ver={$version}" rel="stylesheet" type="text/css" />
</head>

<body accid="{$Account.Ac_id}" olid="{$olid}">
      <div id="body">
            <script>
                  document.body.onselectstart = document.body.oncontextmenu = function () { return false; };
                  document.body.onpaste = document.body.oncopy = function () { return false; };
            </script>
            <div id="MainBox" :style="!median ? 'width: calc(80% - 5px);' : 'width: calc(99.5% - 5px);'">
                  <div class="mainTop">
                        <div class="courseBox">
                              <template v-if="JSON.stringify(course) != '{}' && course.Cou_Name!=''" remark="课程名称">
                                    课程：<a :href="'course.ashx?id='+course.Cou_ID">《{{course.Cou_Name}}》</a>
                              </template>
                              <template v-else>
                                    当前课程好像不存在，如果是正在加载，请等待！
                              </template>
                              <template v-if="JSON.stringify(subject) != '{}' && subject.Sbj_Name!=''" remark="专业">
                                    - <a :href="'courses.ashx?sbjid='+course.Cou_ID">{{subject.Sbj_Name}}</a>
                              </template>
                        </div>

                        <div id="btnKnowledge" v-if="state.isKnl" v-on:click="knlClick">知识库</div>
                        <div class="oltitle">
                              <a v-if="titState== 'loading'" class="titCurr">加载中...</a>
                              <a v-if="(state.isNull   || !state.canStudy) && titState != 'loading' " v-on:click="titState='isNull'"
                                    :class="titState=='isNull' || !state.canStudy ? 'titCurr':''">提 示</a>
                              <a v-if="state.existVideo && titState != 'loading'" v-on:click="titState='existVideo'"
                                    :class="titState=='existVideo' ? 'titCurr':''">视 频</a>
                              <a v-if="state.isLive && titState != 'loading' && state.canStudy" v-on:click="titState='isLive'"
                                    :class="titState=='isLive' ? 'titCurr':''">直播</a>
                              <a v-if="state.isContext && titState != 'loading'" v-on:click="titState='isContext'"
                                    :class="titState=='isContext' ? 'titCurr':''">内 容</a>
                              <a v-if="state.isAccess && titState != 'loading'" v-on:click="titState='isAccess'"
                                    :class="titState=='isAccess' ? 'titCurr':''">附 件</a>
                              <a v-if="state.isQues && titState != 'loading'" v-on:click="titState='isQues'"
                                    :class="titState=='isQues' ? 'titCurr':''">习 题</a>

                              <!-- <div class="titBox">作业</div>-->
                        </div>
                  </div>
                  <!--左侧顶部结束-->
                  <div id="contextArea"  v-if="!state.DeskAllow">                     
                        <div remark="正在加载" v-show="titState=='loading'">
                                    <p id="preloader-2">

                                                <span></span>
                                        
                                                <span></span>
                                        
                                            </p>
                        </div>
                        <div remark="提示" v-show="titState=='isNull' || !state.canStudy ">
                                    <img src="images/studyBg.jpg" class="bgPicture" style="height: 100%;width:100%;" />
                              <div class="noSelect" v-if="!!account.Ac_ID">
                              没有内容，或无权查看！</div>
                               <div class="noSelect" v-if="!account.Ac_ID">
                              <a href="/student/index.ashx">未登录，点击此处登录！</a></div>
                              <div class="noSelect" v-if="state.canStudy && state.LiveStart && state.LiveOver">直播已经结束</div>
                        </div>
                        <div remark="视频" v-show="titState=='existVideo'" :video="state.urlVideo">
                              <div id="videoplayer" v-show="!state.otherVideo && !state.isLive"
                                    style="height: 100%;width:100%;" remark="点播">
                              </div>
                              <div id="accinfo" v-if="JSON.stringify(account) != '{}' && !state.otherVideo && !state.isLive" title="仅自己可见" remark="飘浮信息，防录屏">
                                    {{account.Ac_Name}} {{account.Ac_MobiTel1}}</div>
                              <div id="chartlayer" v-show="!state.otherVideo && switchSubtitle" remark="弹幕层"></div>
                              <div id="videoinfo" v-show="!state.otherVideo && !state.isLive">
                                    <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="titState=='isLive'" :video="state.urlVideo">
                        <div id="accinfo" v-if="JSON.stringify(account) != '{}' && state.isLive && state.isLiving" title="仅自己可见" remark="飘浮信息，防录屏">
                                    {{account.Ac_Name}} {{account.Ac_MobiTel1}}</div>
                              <div id="livebox" v-show="state.isLive && state.isLiving" style="height: 100%;width:100%;"
                                    remark="直播">
                              </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.LiveStart">直播未开始！</div>
                                    <div class="liveStop_Tit" v-show="state.LiveOver">直播已经结束！</div>                                   
                              </div>
                        </div>
                        <div remark="内容" v-show="titState=='isContext'" id="details">
                              <div id="detailsArea" v-html="outline.Ol_Intro"> </div>
                        </div>
                        <div remark="附件" v-show="titState=='isAccess'">
                            <accessory ref='accessory' :uid="outline.Ol_UID" :isbuy="state.isBuy"></accessory>                         
                        </div>
                        <div remark="习题" v-show="titState=='isQues'">
                              <iframe :src="outline!=null ? 'Exercises.ashx?olid='+outline.Ol_ID : ''"
                                    style="height: 100%" marginwidth="0" marginheight="0" align="top" scrolling="no"
                                    width="100%" frameborder="0" allowtransparency="true"></iframe>
                        </div>
                  </div>
                  <div id="contextArea" v-if="state.DeskAllow">
                      <div><div class="noSelect">请在DeskApp应用中打开</div></div>
                  </div>
            </div>
            <div id="median" remark="此为分隔线"><span v-on:click="median = !median"
                        :class="!median ? 'open' : 'close'"></span></div>
            <!--开始右侧菜单区域-->
            <div id="rightBox" :style="!median ? 'width: 20%;' : 'width: 0%'" v-show="!median">
                  <div class="boxBar">
                        <div class="title" v-on:click="rightState = 'outline'"
                              :class="rightState=='outline' ? 'titleCurr' : ''"> 章节目录</div>
                        <div class="title" v-on:click="rightState = 'chat'"
                              :class="rightState=='chat' ? 'titleCurr' : ''"> 交流咨询</div>
                  </div>
                  <div class="outline rightArea" v-show="rightState=='outline'">
                        <template v-for="d in outlines" remark="章节列表">
                              <div v-if="d.Ol_IsUse" :class="'olitem '+(d.Ol_IsVideo ? 'li-video ' : '')+(d.Ol_ID==olid ? 'current ' : '')+(d.Ol_IsLive ? 'li-live ' : '')"
                                    :isvideo="d.Ol_IsVideo" :olid="d.Ol_ID"
                                    :style="'padding-left:'+(d.Ol_Level*15+5)+'px'">
                                    <template v-if="state.isBuy || d.Ol_IsFree || course.Cou_IsFree"
                                          remark="如果购买，或可以试学">
                                          <a :href="'CourseStudy.ashx?olid='+d.Ol_ID+'&couid='+couid"
                                                v-if="d.Ol_IsFinish"
                                                v-on:click="outlineClick(d.Ol_ID,$event)">{{d.Ol_XPath}}{{d.Ol_Name}}
                                          </a>
                                          <template v-else> {{d.Ol_XPath}}{{d.Ol_Name}} </template>
                                          <span class="nofinish"
                                                v-show="d.Ol_IsFree && d.Ol_IsFinish && !state.isBuy ">试学</span>
                                    </template>
                                    <template v-else>
                                          <a :href="'CourseBuy.ashx?couid='+d.Cou_ID">
                                                {{d.Ol_XPath}}{{d.Ol_Name}}
                                                <span v-show="d.Ol_IsFinish" class="buy">购买</span></a>
                                    </template>
                                    <span class="nofinish" v-show="!d.Ol_IsFinish">未完结</span>
                                    <span v-show="d.Ol_IsLive">[{{d.Ol_LiveTime}}开始,直播{{d.Ol_LiveSpan}}分钟]</span>
                              </div>
                        </template>
                  </div>
                  <div class="chat rightArea" v-show="rightState=='chat'">
                        <div class="chatlist" id="chatlist">
                              <dl id="chatlistdl">
                                    <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>
                        <div class="chatbox">
                              <div :class="['switch',switchSubtitle ? 'switch-on' : '']"
                                    v-on:click="switchSubtitle=!switchSubtitle" style="display:none"></div>
                              <div class="msgbox">
                                    <input type="text" id="messageinput" name="messageinput"
                                          v-on:keyup.enter="msgSend" />
                                    <div id="btnMessage" v-on:click="msgSend">发送</div>
                              </div>
                        </div>
                  </div>
            </div>
            <transition name="fade" remark="右侧的遮罩层">
                  <div id="rightMask" :style="!median ? 'width: 20%;' : 'width: 0%'" v-show="!outlineLoaded"
                        remark="右侧的遮罩层">
                  </div>
            </transition>

      </div>
      <script type="text/javascript" src="Scripts/CourseStudy.js?ver={$version}"></script>
</body>

</html>