<template>
  <div class="Educationvideo" ref="divSrcoll">
    <div class="left">
        <ul class="lineUl" style="margin-top:64px">
            <li @click="SelectLineId(-1)" :class="msg.LineId ==-1 ? 'Active' : ''">
                不限
            </li>
            <li @click="SelectLineId(item.LineID)" :class="msg.LineId == item.LineID ? 'Active' : ''" v-for="(item,index) in LineList" :key="index">
                {{item.LineName}}
            </li>
        </ul>
    </div>
    <div class="right">
        <div class="search">
            <el-input size="small" style="width:600px" :placeholder="$t('fnc.qsrneirong')" v-model="msg.Name" class="input-with-select">
                <el-button @click="Search" slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <el-button style="margin-left:20px" size="small" type="danger"  @click.prevent="goUrl1('EducationvideoList',$event)" round>发布视频</el-button>

        </div>
        <div v-loading="loading" class="Content">
            <ul class="videoUl">
                <li v-for="(item,index) in dataList" :key="index">
                    <div :style="{backgroundImage: 'url(' + item.background + ')', backgroundSize:'cover'}"  @click.prevent="goUrl('EducationvideoSee',item)" class="imgDiv">
                        <!-- <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="min-height:199px;width:100%" :src="item.Cover" alt="">
                        <img v-else style="height:199px;width:100%" src="../assets/img/hotel/biefu.png" alt=""> -->
                        <div class="backDiv">
                          <span class="iconfont icon-ico_bofang"></span>
                          <!-- <div @click.prevent="goUrl1('EducationvideoList',$event)" class="icon">
                              <span class="iconfont icon-weihu"></span>
                          </div> -->
                        </div>
                        
                    </div>
                    <div class="contentDiv">
                        <img v-if="item.EmPhoto && item.EmPhoto!=''" :src="item.EmPhoto" alt="">
                        <img v-else src="../assets/img/default.png" alt="">
                        <div class="DesDiv">
                          <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
                            <p style="font-size:14px" class="bold text1">{{item.Name}}</p>
                          </el-tooltip>
                          
                          <p class="wryh" style="color:#aaaaaa">{{item.EmName}}</p>
                          <p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
                              <span style="margin-left:5pxy"></span>    
                              <span>{{item.UpdateDate}}</span>    
                          </p>
                        </div>
                    </div>
                    
                </li>
            </ul>
            <div v-if="dataList.length==0" style="text-align:center;padding-top:40px">
              <span style="font-size:60px;color:#ccc" class="iconfont icon-wushuju"></span>
            </div>
            <div v-show="nodata && msg.pageIndex>1" class="wryh" style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div>
            <!-- <el-pagination background @current-change="handleCurrentChange"
                layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
            </el-pagination>  -->
        </div>
        <div style="opacity: 0;" ref="bottomDiv">1111</div>
    </div>
    <div class="videoDiv" v-show="videoDivState">
      <div style="text-align:right;padding-right:15px;cursor:pointer"><span @click="Setvideo" style="font-size:30px;color:#fff" class="iconfont icon-bumenguanli-shanchu"></span></div>
      <video ref="myVideo" autoplay="autoplay" width="100%" height="90%" :src="thisVideoAddress"  controls="controls">
        <source :src="thisVideoAddress" type="video/mp4">
        <source :src="thisVideoAddress" type="video/ogg">
      </video>
    </div>
    

  </div>
</template>


<script>
export default {
  name: 'Educationvideo',

  created() {
  },
  data () {
    return {
      videoDivState:false,
      thisVideoAddress:"",
      defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
      val:'',
      LineList:[],
      msg:{
          pageIndex:1,
          pageSize:20,
          Name:'',
          UserType:1,
          VideoStatus:1,
          CreateBy:'',
          LineId:-1,
      },
      dataList:[],
      total:0,
      loading:false,
      windowHeight:0,
      nodata:false,
    }
  },
  mounted() {
    this.getLineList();
    this.getList();
    this.$nextTick(()=>{
      window.addEventListener('scroll',this.ScrollTop)

    })
    
   let h = document.documentElement.clientHeight || document.body.clientHeight;
   this.windowHeight=h;
  },
  destroyed(){
      window.removeEventListener('scroll',this.ScrollTop)

  },
  methods: {
    Search(){
        this.msg.pageIndex=1;
        this.nodata=false;
        this.dataList=[];
        this.getList();
      },
      Setvideo(){
        this.videoDivState=false;
        let myVideo=this.$refs.myVideo;
        myVideo.pause();
      },
      ScrollTop(){
        var that = this;
        // that.scroll = (document.documentElement.scrollTop || document.body.scrollTop)+70;
        // var divSrcoll = this.$refs.divSrcoll.scrollTop;
        if(that.$refs.bottomDiv.getBoundingClientRect()){
          var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top;
          if(this.windowHeight-50 < bottomDiv){
            this.handleCurrentChange();  
          }
        }
      },
      SelectLineId(id){
          this.dataList=[];
          this.nodata=false;
          this.msg.pageIndex=1;
          this.msg.LineId=id;
          this.getList();
      },
      handleCurrentChange() {
            this.msg.pageIndex = this.msg.pageIndex+1;
            this.getList();
        },
      //获取列表
      getList() {
        if(this.nodata){
          return;
        }
        this.loading=true;
        this.apipost(
          "Video_get_GetPCVideoPageList",this.msg,
          res => {
            this.loading=false;

            if (res.data.resultCode == 1) {
              let data= res.data.data.pageData;
              if(data.length==0 && this.msg.pageIndex>1){
                this.nodata=true;
              }
              else{
                data.forEach(item=>{
                  let lastUrl="?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast";
                  item.background=item.VideoAddress+lastUrl;
                })
                this.dataList = this.dataList.concat(data)
              }
              
              this.total = res.data.data.count;
            }
          }
        );
      },
      goUrl1(path,e){
          e.stopPropagation()
          this.$router.push({
            name:path,
            // query: {
            //     blank: "y"
            // }
            });
      },
      AddList(id) {
        this.apipost(
          "Video_post_SetVideoWatch",{VideoId:id},
          res => {

            if (res.data.resultCode == 1) {

            }
          }
        );
      },
      goUrl(path,item){
        let that=this;
        this.videoDivState=true;

        this.thisVideoAddress=item.VideoAddress;
        this.AddList(item.Id)
        let myVideo=this.$refs.myVideo;
        myVideo.play();
        if(!item.VideoWH || item.VideoWH==''){
              myVideo.addEventListener('canplay', function () {
                  let VideoWH=this.videoWidth+','+this.videoHeight;
                  that.AddWidthHeight(VideoWH,item.Id)

              });
          }
      },
      AddWidthHeight(VideoWH,id) {
            let msg={
                Id:id,
                VideoWH:VideoWH
            }
            this.apipost(
                "Video_set_SetPCVideoWHInfo",msg,
                res => {

                    if (res.data.resultCode == 1) {

                    }
                }
            );
        },
    //获取线路列表
      getLineList() {
        this.apipost(
          "Video_get_GetPCVideoLineList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.LineList = res.data.data;

            }
          }
        );
      },
  },
  
}
</script>
<style>
.text1{
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height:20px;
}
.wryh{
  font-family: '微软雅黑'
}
.Educationvideo .right .Content .videoUl li .backDiv{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  top: 0;
}

.Educationvideo .right .Content .videoUl li .imgDiv .icon-ico_bofang{
  position: absolute;
  font-size: 36px;
  color:#fff;
}

.videoDiv{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
  background: #000;
}
.Educationvideo .contentDiv img{
  width:35px;height:35px;border-radius:50%;
  position: absolute;
  

}
.Educationvideo .contentDiv .DesDiv{
  padding-left: 45px;
  box-sizing: border-box;
  width: 100%;
}
.Educationvideo .contentDiv{
  position: relative;
  margin-top:5px;
}
.Educationvideo .bold{
  font-family: "pingfangR"
}
.Educationvideo .el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #f56c6c!important;
}
.Educationvideo .right .Content .circle{
    display: inline-block;
    width: 3px;
    height:3px;
    background: #666666;
    border-radius: 50%;
}
.Educationvideo .right .Content .videoUl li .imgDiv:hover .icon{
    display: block;
}
.Educationvideo .right .Content .videoUl li .imgDiv .icon{
    position: absolute;
    right: 3px;
    top: 3px;
    padding: 2px 6px;
    background: #000;
    display: none;
}
.Educationvideo .right .Content .videoUl li .imgDiv .icon .iconfont{
    color:#fff;
}
.Educationvideo .right .Content .videoUl li .imgDiv{
    position: relative;
    cursor: pointer;
    height:199px;
    overflow:hidden;
}
.Educationvideo .right .Content .videoUl li p{
    font-size: 12px;
    padding-left:6px;
    box-sizing: border-box;
}
.Educationvideo .right .Content .videoUl li{
    display: inline-block;
    width: 300px;
    padding: 5px;
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom:15px;
}
  .Educationvideo .right .Content{
      padding:15px 15px 10px 15px;
      box-sizing: border-box;
  }
*{
    margin:0;
    padding: 0;
}
 .Educationvideo .left .lineUl .Active{
    color:#fff;
    background: #f56c6c;
    font-family: "pingfangR";
}
 .Educationvideo .left .lineUl li:hover{
     background: #f56c6c;
     color:#fff;
}
.Educationvideo .left .lineUl li{
    padding:10px 35px;
    box-sizing: border-box;
    font-size: 12px;
    cursor: pointer;
}
li{
    list-style: none;
    
}
  .Educationvideo .right .search{
      padding: 15px 0;
      padding-left: 50px;
      box-sizing: border-box;
      /* position: fixed;
      top: 50px;
      width: calc(100% - 200px); */
      background: #fff;
      /* left: 200px; */

  }
 .Educationvideo{
     position: relative;
     min-height: 100%;
     background: #f5f5f5;
 }
 .Educationvideo .left{
     position: absolute;
     min-height: 100%;
     width: 200px;
     z-index: 100;
     background: #fff;
 }
  .Educationvideo .right{
      background: #f5f5f5;
      padding-left: 200px;
      box-sizing: border-box;
      min-height: 100%;
  }

</style>