<template>
  <div class="live_show_list_pc_1">
   <div class="container">
      <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="learningtool-title">
               <span class="sp1">在线直播</span>
            </div>
            <div class="liveshow-tab">
               <ul>
                  <li @click="onLive(1)" :class="{on:lylLiveStatus===1}">在线直播</li>
                  <li @click="onLive(3)" :class="{on:lylLiveStatus===3}">直播回放</li>
<!--                  <li @click="onLive(0)" :class="{on:lylRealStatus===0}">直播预告</li>-->
               </ul>
            </div>
            <div class="showlist-searchbar clearfix">
               <ul class="showlist-tab">
                  <!-- <li class="active"><a href="">公开课</a></li>
                  <li><a href="">教学直播</a></li>
                  <li><a href="">名师课堂</a></li> -->
                  <li @click="clvkclassall()" v-show="classList!==''" :class="{active:choose===''}"><a >全部</a></li>
                  <li v-for="(item,index) in classList" :key="index" @click="clvkclass(item.catId,index)" :class="{active:choose===index}"><a >{{item.catName}}</a></li>
               </ul>
            </div>
         </div>
      </div>
      <div class="row" >
         <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" v-for="(item,index) in liveList" :key="index"><!--循环-->
            <div class="liveshow-part" >
               <div class="sp1">
                  <span class="living">
                     <span v-show="lylLiveStatus==1">正在直播</span>
                     <span v-show="lylLiveStatus==3">直播回放</span>
<!--                     <span v-show="lylLiveStatus==0">直播预告</span>-->
                     </span>
<!--                  <span class="hot">36,541</span>-->
                  <img :src="item.lylPhoto" alt="">
               </div>
               <div class="sp2">
                  <span class="title"><a>{{item.lylName}}</a></span>
                  <span class="info">
<!--                     <img :src="item.lylWarmUpPhoto" alt="">-->
                     <span class="spp1">直播时间:{{item.lylStartDate | formatDate}}</span>

<!--                     <span class="spp2">{{item.lylInfo}}</span>-->
                  </span>
<!--                   <span class="spp1">时长:{{item.lylEndDate,item.lylStartDate | formatDuring}}</span>-->
               </div>
               <div class="sp3">
<!--                  <span class="spp2">参与人数:{{item.lylRealStartdt | formatDate}}</span>-->
<!--                  <span class="spp2">时长:{{item.lylRealStartdt}}</span>-->
                  <span class="spp1">{{item.lylAnchorNickname}}</span>
                  <span class="spp2">参与人数:  {{item.lylSignupNum}}人</span>
                  <span class="spp3"><a @click="licdetail(item.lylId,item.lylLiveStatus)">进入直播间</a></span>
<!--                  <span class="spp2">{{item.lylInfo}}</span>-->

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

<script>
   import {httpPost} from '../../../src/utils/utils';
import lenye_base from "lenye_base";
export default {
  name: 'ElLiveShowListPc1',
   datamew:{
      formatDuring (stat,end) {
         let startTime = ('2019-05-07 20:23:08').getTime() // 得到毫秒
         let endTime = ('2019-05-07 20:22:38').getTime()
         let dhs = endTime - startTime
         // let days = parseInt(mss / (1000 * 60 * 60 * 24)) // 得到天数
         // let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) // 得到小时
         let minutes = parseInt((dhs % (1000 * 60 * 60)) / (1000 * 60)) // 得到分钟数
         let seconds = (dhs % (1000 * 60)) / 1000 // 得到秒数
         // return days + '天' + hours + ':' + minutes + ':' + seconds // 返回值
         let str1 = minutes < 10 ? ('0' + minutes) : minutes
         let str2 = seconds < 10 ? ('0' + seconds) : seconds
         return str1 + ':' + str2
      }
   },
   filters: {
      formatDate: function (value) {
         if (value == '' || value == 'undefined') {
            return '';
         }
         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{
      //直播分类
      classList:[],
      //直播列表
      liveList:[],
      //选中
      choose:'',
      //直播状态
        lylLiveStatus:1,
      //直播类名
      lylName:'',
       newhours:''

    }
  },

   mounted(){
      this.getlist();
      this.getclass();
  },
  methods: {
    getclass(){
       const that = this;
       httpPost(
        lenye_base.base_data.getapiUrl() +
         "/learnyeai-live-service/common/lylLiveCategory/queryPageUse.do",
        lenye_base.base_data.getformatting({
        }),
        function (data) {
          that.classList = data.data;
        }
      );
    },
    //请求列表
    getlist(){
       const that = this;
       httpPost(
        lenye_base.base_data.getapiUrl() +
         "/learnyeai-live-service/common/lylLive/queryUsablePage.do",
        lenye_base.base_data.getformatting({
            lylLiveStatus:that.lylLiveStatus,
            rows: 8,
            catId:that.lylName
        }),
        function (data) {
          that.liveList = data.data;
           // let hh = data.data.lylRealStartdt.getTime()-data.data.lylRealEnddt.getTime()
           // var hhh=Math.floor(hh/3600*1000)
           // var leave2=hh%(3600*1000)
           // var minutes=Math.floor(leave2/(60*1000))
           // console.log(hhh+"分钟"+minutes+"秒")
        }
      );
    },
    clvkclass(name,index){
      this.choose=index;
      this.lylName=name;
      this.getlist();
    },
     clvkclassall(){
        this.choose='';
        this.lylName='';
        this.getlist();
     },
    onLive(on){
       this.lylLiveStatus=on
       console.log(on)
       this.getlist();
    },
     licdetail(id,lylRealStatus){
        window.open('/livedetail?id='+id+'&lylRealStatus='+lylRealStatus)
     }
  }
};


</script>
