<template>
  <div class="el-live_old_room_pc_1">
    <div class="vp-body">
      <!--课程播放页头部-->
      <div class="vp-top clearfix">
        <div class="vp-top-left vp-top-left-phone">
          <a class="vp-goback" href="javascript:history.go(-1)">返回直播回放</a>
<!--          <span class="vp-title">{{courseName}}({{cptnametitle}})</span>-->
        </div>

      </div>
      <div  class="playbox">
        <div id="my-video" class="video-js" ></div>
      </div>
      <!--<video id="my-video" class="video-js" controls preload="auto" width="100%" height="100%" data-setup="{}">-->
      <!--<source src="mp4/video.mp4" type="video/mp4">-->
      <!--</video>-->
<!--      <div class="vp-bottom" style="display: none">-->
<!--        <div class="vp-top-left">-->
<!--          <a class="vp-top-prev" v-if="prebtn" @click="prevcourse()">上一课时</a>-->
<!--          <a class="vp-top-next" v-if="nextbtn" @click="nextcourse()">下一课时</a>-->
<!--        </div>-->
<!--        -->
<!--      </div>-->
      <div class="vp-sidebar">
        <div class="vp-sidebar-title">
          <!--<a class="vp-sidebar-btn">收起</a>-->
          <ul >
            <li class="on"><a class="sidebar-icon1">回放目录</a></li>
<!--            <li :class="videotab==1?'on':''"><a class="sidebar-icon2" @click="videotab=1" >问答</a></li>-->
            <!--<li><a class="sidebar-icon3">笔记</a></li>-->
            <!--<li><a class="sidebar-icon4">讨论</a></li>-->
            <!--<li><a class="sidebar-icon5">资料</a></li>-->
            <!--<li><a class="sidebar-icon6">扫一扫</a></li>-->
          </ul>
        </div>
        <div class="vp-sidebar-main">
          <div class="et4-class-mulu" >
            <div class="nLi" >
              <div class="et4-class-mulu-title">
                直播回放
                <span class="nLi-icon"></span>
              </div>
              <ul class="et4-class-mulu-ul" v-for="(item, index) in lylDetail" :key="index">

<!--                <li v-for="(cptitem, cptindex) in item.childs" :key="cptindex" :class="cptitem.cptId==cptidvalue?'active':''">-->
<!--                  <div class="mulu-pie" :id="mulu-pie"></div>-->
                  <li class="cptresult_a" :class="{on:lylindex===index }" @click="playvideo(item.lylPbUrl,index)" href="javascript:;"><i class="i">回放{{index+1}}</i>   {{item.duration | getNowTime}}
                    <!--<br>要求{{cptitem.cptInfo}}-->
                  </li>
<!--                  <span class="mulu-time">{{cptitem.cp[0].fileTimeLen | getNowTime}}</span>-->
<!--                </li>-->
              </ul>
            </div>
          </div>

          <div class="vp-biji" style="display: none">
            <div class="vp-biji-fuwenben">
              <textarea name="" cols="30" rows="10" id="editor_id" placeholder="输入笔记内容，便于日后复习"></textarea>
              <p class="vp-biji-btn clearfix">
                <span class="vp-biji-jietu"><a>截图</a></span>
                <span class="vp-biji-time"><a href=""></a>00:00:00</span>
                <span class="vp-biji-save"><a href="">保存</a></span>
              </p>
            </div>
            <div class="vp-biji-explain">
              <p class="vp-biji-title">笔记攻略</p>
              <p class="vp-biji-cont clearfix"><span><img src="images/vp-biji-pic1.png" alt=""></span><i>输入框中输入文字，点击保存即可保存到您的课程笔记中</i>
              </p>
              <p class="vp-biji-cont clearfix"><span><img src="images/vp-biji-pic2.png" alt=""></span><i>点击任意视频时间点立即跳转到显示的时间点</i>
              </p>
              <p class="vp-biji-cont clearfix"><span><img src="images/vp-biji-pic3.png" alt=""></span><i>开启笔记截图输入笔记文字后，系统将自动截图视频画面</i>
              </p>
            </div>
            <div class="vp-biji-explain">
              <p class="vp-biji-title">温馨提示</p>
              <p class="vp-biji-cont">学习过程中，添加对课程的记录、想法、感悟、理解等，在日后的复习回顾中将会有很大的帮助</p>
            </div>
          </div>
          <div class="vp-discuss" style="display: none">
            <div class="vp-discuss-issue">
              <input type="text">
              <a href="">发布</a>
            </div>
            <div class="vp-topic">
              <p class="vp-topic-p1"><span>话题：</span>课程中提到的关键点，考试都会考吗？</p>
              <p class="vp-topic-p2">
                <span class="vp-topic-p2-name"><i>发布人</i>钱海洋</span>2020-02-07
                <span class="vp-topic-p2-num"><i>60</i>人关注 · <i>120</i>次浏览</span>
              </p>
              <div class="vp-topic-p3">
                <span class="vp-topic-p3-all"><a>查看全部回答(24)</a></span>
                <span class="vp-topic-p3-pl"><a>写评论</a></span>
                <div class="vp-topic-inp" style="display: none;">
                  <textarea name="" cols="30" rows="10" placeholder="这里写下您的回答"></textarea>
                  <a href="">发布</a>
                </div>
                <div class="vp-topic-pllist" style="display: none;">
                  <ul>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="vp-topic">
              <p class="vp-topic-p1"><span>话题：</span>课程中提到的关键点，考试都会考吗？</p>
              <p class="vp-topic-p2">
                <span class="vp-topic-p2-name"><i>发布人</i>钱海洋</span>2020-02-07
                <span class="vp-topic-p2-num"><i>60</i>人关注 · <i>120</i>次浏览</span>
              </p>
              <div class="vp-topic-p3">
                <span class="vp-topic-p3-all"><a>查看全部回答(24)</a></span>
                <span class="vp-topic-p3-pl"><a>写评论</a></span>
                <div class="vp-topic-inp" style="display: none;">
                  <textarea name="" cols="30" rows="10" placeholder="这里写下您的回答"></textarea>
                  <a href="">发布</a>
                </div>
                <div class="vp-topic-pllist" style="display: none;">
                  <ul>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="vp-topic">
              <p class="vp-topic-p1"><span>话题：</span>课程中提到的关键点，考试都会考吗？</p>
              <p class="vp-topic-p2">
                <span class="vp-topic-p2-name"><i>发布人</i>钱海洋</span>2020-02-07
                <span class="vp-topic-p2-num"><i>60</i>人关注 · <i>120</i>次浏览</span>
              </p>
              <div class="vp-topic-p3">
                <span class="vp-topic-p3-all"><a>查看全部回答(24)</a></span>
                <span class="vp-topic-p3-pl"><a>写评论</a></span>
                <div class="vp-topic-inp" style="display: none;">
                  <textarea name="" cols="30" rows="10" placeholder="这里写下您的回答"></textarea>
                  <a href="">发布</a>
                </div>
                <div class="vp-topic-pllist" style="display: none;">
                  <ul>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="vp-topic">
              <p class="vp-topic-p1"><span>话题：</span>课程中提到的关键点，考试都会考吗？</p>
              <p class="vp-topic-p2">
                <span class="vp-topic-p2-name"><i>发布人</i>钱海洋</span>2020-02-07
                <span class="vp-topic-p2-num"><i>60</i>人关注 · <i>120</i>次浏览</span>
              </p>
              <div class="vp-topic-p3">
                <span class="vp-topic-p3-all"><a>查看全部回答(24)</a></span>
                <span class="vp-topic-p3-pl"><a>写评论</a></span>
                <div class="vp-topic-inp" style="display: none;">
                  <textarea name="" id="" cols="30" rows="10" placeholder="这里写下您的回答"></textarea>
                  <a href="">发布</a>
                </div>
                <div class="vp-topic-pllist" style="display: none;">
                  <ul>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘虎强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                    <li><span>刘大强</span>不管考不考，好好学准是没错的，毕竟这些专业知识和技能都是难得的，学到就是赚到！</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="vp-data" style="display: none">
            <div class="vp-data-title">课时简介</div>
            <div class="vp-data-cont">电工类作业取证培训要求电工类作业取证培训要求电工类作业取证培训要求电工类作业取证培训要求电工类作业取证培训要求电工类作业取证培训要求
            </div>
            <div class="vp-data-title">课时资料</div>
            <div class="vp-data-list">
              <ul>
                <li class="data-icon01"><a href="">演示文档</a></li>
                <li class="data-icon02"><a href="">演示文档</a></li>
                <li class="data-icon03"><a href="">演示文档</a></li>
                <li class="data-icon04"><a href="">演示文档</a></li>
                <li class="data-icon05"><a href="">演示文档</a></li>
              </ul>
            </div>
          </div>
          <div class="vp-code" style="display: none">
            <p class="vp-code-p1"><img src="images/vp-code.png" alt=""></p>
            <p class="vp-code-p2">手机扫一扫，随时随地学习</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {httpPost} from '../../../src/utils/utils';
  import formMixin from '../../../src/mixins/formMixin';
  import lenye_base from 'lenye_base';
  import Player from "xgplayer";
export default {
  name: 'ElLiveOldRoomPc1',
  mixins: [formMixin],
  model: {},
  filters: {
    formatDate: function (value) {
      var datavalue = value.replace(/\-/g, "/");
      let date = new Date(datavalue);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '/' + MM + '/' + d + ' ' + h + ':' + m;
    },
    getNowTime: function(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0 // 分
      var hourTime = 0 // 小时
      var dayTime = 0 // 天
      var result = ''
      if (value < 60) {
        result = secondTime + '秒'
      } else {
        if (secondTime >= 60) { // 如果秒数大于60，将秒数转换成整数
          // 获取分钟，除以60取整数，得到整数分钟
          minuteTime = parseInt(secondTime / 60)
          // 获取秒数，秒数取佘，得到整数秒数
          secondTime = parseInt(secondTime % 60)
          // 如果分钟大于60，将分钟转换成小时
          if (minuteTime >= 60) {
            // 获取小时，获取分钟除以60，得到整数小时
            hourTime = parseInt(minuteTime / 60)
            // 获取小时后取佘的分，获取分钟除以60取佘的分
            minuteTime = parseInt(minuteTime % 60)
            if (hourTime >= 24) {
              // 获取天数， 获取小时除以24，得到整数天
              dayTime = parseInt(hourTime / 24)
              // 获取小时后取余小时，获取分钟除以24取余的分；
              hourTime = parseInt(hourTime % 24)
            }
          }
        }
        if (secondTime > 0) {
          secondTime = parseInt(secondTime) >= 10 ? secondTime : secondTime
          result = '' + secondTime + '秒'
        }
        if (minuteTime > 0) {
          minuteTime = parseInt(minuteTime) >= 10 ? minuteTime : minuteTime;
          result = '' + minuteTime + '分钟' + result
        }
        if (hourTime > 0) {
          result = '' + parseInt(hourTime) + '小时' + result
        }
        if (dayTime > 0) {
          result = '' + parseInt(dayTime) + '天' + result
        }
      }
      return result
    }
  },
  data(){
    return {
      lylDetail:[],
      lylId:'',
      lylindex:0,
    }
   },
   mounted() {
     this.lylId = lenye_base.getUrlParam('id');
     this.getoldList();
   },
   computed: {},
   methods: {
     getoldList(){
       const that = this;
       httpPost(
               lenye_base.base_data.getapiUrl() +
               "/learnyeai-live-service/api2/lylLivePlayback/queryPage.do",
               lenye_base.base_data.getformatting({
                 lylId: that.lylId
               }),
               function (data) {
                 that.lylDetail = data.data
                 that.playvideo(data.data[0].lylPbUrl,0)
                 console.log(data)
               }
       )
     },
     // getliveId(lylPbId){
     //   httpPost(
     //           lenye_base.base_data.getapiUrl() +
     //           "/learnyeai-live-service/api2/lylLivePlayback/queryPage.do",
     //           lenye_base.base_data.getformatting({
     //             lylId: that.lylId
     //           }),
     //           function (data) {
     //             that.lylDetail = data.data[0]
     //             that.getliveId(data.data[0].lylPbId)
     //             console.log(data)
     //           }
     //   )
     // },
     // palgVideo(data){
     //   console.log(data)
     //   this.playvideo(data)
     // },

     playvideo(data,index) {
       this.lylindex=index
       // console.log('http://jxaqy.learnyeai.com/'+data.lylPbUrl)
       const that = this;
       // setInterval(() => {
       //   that.learClockTime += 1;
       // }, 1000);
       if (!that.newPlay) {

         that.newPlay = new Player({
           id: 'my-video',
           autoplay: true,
           url: data,
           height: '100%',
           width: '100%',
           lang: 'zh-cn',
           videoInit: true,
           playbackRate: [0.5, 0.75, 1, 1.5, 2],
           defaultPlaybackRate: 1
         });
       //   that.newPlay.on('play', function () {
       //     that.newPlay.currentTime = that.isplay ? that.studyBreakpoint : 0;
       //     that.isplay = false;
       //   }).on('pause', function () {
       //     /*暂停*/
       //     that.saveTime(data.resId, that.newPlay.currentTime, that.learClockTime);
       //     that.learClockTime = 0;
       //   }).on('ended', function () {
       //     /*结束*/
       //     that.saveTime(data.resId, that.newPlay.currentTime, that.learClockTime);
       //     that.learClockTime = 0;
       //     that.nextcourse();
       //   }).on('timeupdate', function () {
       //     // console.log('timeupdate', this.learClockTime, resId);
       //     if (that.learClockTime > 30 && that.islearsave) {
       //       that.islearsave = false;
       //       that.saveTime(data.resId, that.newPlay.currentTime, that.learClockTime);
       //       that.learClockTime = 0;
       //     }
       //   });
       } else {
         that.newPlay.src = data;
       }
     },
   },
};
</script>
