<template>
  <div class="el-live_show_oldplay_mobile_1">
    <div class="live_show_oldplay_mobile_1">
    <div class="liveshow-video">
      <div class="liveshow-video">
        <div class="appbar appbar-transparency liveshow-appicon"><!--头部标题栏-->
          <span class="goback"><a href="javascript:history.go(-1)">返回</a></span>
          <!--          <span class="appbar-moreicon">-->
          <!--            <a href=""><img src="images/details_icon01.png" alt=""></a>-->
          <!--            <a href=""><img src="images/details_icon02.png" alt=""></a>-->
          <!--            <a href=""><img src="images/details_icon03.png" alt=""></a>-->
          <!--            <a href=""><img src="images/details_icon04.png" alt=""></a>-->
          <!--         </span>-->
        </div>
      </div>
        <!--直播源-->
        <div id="player_video"></div>
      <span class="cc-title">回放目录</span>
      <ul class="cs-second-ul" style="display: block;">

            <li :class="{on:lylindex===index }" v-for="(item,index) in lylDetail" :key="index" class="state1">
             <a class="cptresult_a"
                 @click="playvideo(item.lylPbUrl,index)"
                 href="javascript:;">
               <span v-show="lylindex===index"></span><i>回放{{index+1}}</i>   {{item.duration | getNowTime}}</a>
            </li>


      </ul>

    </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: 'ElLiveShowOldplayMobile1',
  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:'fe050c2a7a034adeb1a4b3066a3216cc',
      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: 'player_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>
