<template>
  <div class="EducationvideoSee">
      <!-- <div class="container"> -->
           <div class="left">
            <div class="imgDiv">
                <video style="border: 1px solid #f5f5f5;" width="100%" :height="videoHeight" :src="datainfo.VideoAddress" controls="controls">
                </video>
                <p style="font-size:18px;font-family:'pingfangR';margin-top:15px">{{datainfo.Name}}</p>
                <p>{{datainfo.EmName}}</p>
                <p>{{datainfo.WatchNum}}次观看
                    <span class="circle"></span>    
                    <span>{{datainfo.UpdateDate}}</span>    
                </p> 
            </div>
        </div>
        <div class="right">
            <ul>
                <li @click.prevent="goUrl('EducationvideoSee',item)" v-for="(item,index) in dataList" :key="index">
                    <img v-if="item.Cover && item.Cover!=''" :onerror="defaultImg" style="height:56px;width:100px" :src="item.Cover" alt="">
                    <img v-else style="height:56px;width:100px" src="../assets/img/hotel/biefu.png" alt="">
                    <div class="content">
                        <p style="font-size:14px">{{item.Name}}</p>
                        <p style="padding:6px 0">{{item.EmName}}</p>
                        <p>{{item.WatchNum}}次观看
                            <span class="circle"></span>    
                            <span>{{item.UpdateDate}}</span>    
                        </p>
                    </div>
                </li>
            </ul>
        </div>
      <!-- </div> -->
       
        
  </div>
</template>


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

  created() {
    

  },
  data () {
    return {
      val:'',
      datainfo:{},
      defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
      msg:{
          pageIndex:1,
          pageSize:5,
          Name:'',
          UserType:1,
          VideoStatus:1,
          CreateBy:'',
          LineId:-1,
      },
      dataList:[],
      videoHeight:0,
    }
  },
  mounted() {
      if(this.$route.query.msg){
          this.datainfo=JSON.parse(this.$route.query.msg)
      }
      this.getList();
      this.AddList(this.datainfo.Id)
      let h = document.documentElement.clientHeight || document.body.clientHeight;
      this.videoHeight=h-110;


  },
  methods: {
      goUrl(path,item){
          let msg=JSON.stringify(item)
            let routeData = this.$router.resolve({
            name: path,
            query: {
                msg:msg,
                blank: "y"
            }
            });
            window.open(routeData.href, "_blank");
      },
      AddList(id) {
        this.apipost(
          "Video_post_SetVideoWatch",{VideoId:id},
          res => {

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

            }
          }
        );
      },
      //获取列表
      getList() {
        this.loading=true;
        this.apipost(
          "Video_get_GetPCVideoPageList",this.msg,
          res => {
            this.loading=false;

            if (res.data.resultCode == 1) {
              this.dataList = res.data.data.pageData;

            }
          }
        );
      },
  },
  
}
</script>
<style>
.EducationvideoSee .container{
    width: 1200px;
    margin: 0 auto;
    padding-top:20px;
}
.EducationvideoSee p{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.EducationvideoSee .right ul li img{
    position: absolute;
    width: 100px;
    height: 60px;
}
.EducationvideoSee .right ul li .content{
    
    padding-left: 115px;
    box-sizing: border-box;
    font-size: 12px;
}
.EducationvideoSee .right ul li{
    position: relative;
    /* min-height:64px; */
    cursor: pointer;
    background: #f5f5f5;
    margin-bottom: 15px;
    padding:15px;
    box-sizing: border-box;
}
.EducationvideoSee .right ul{
    width: 100%;
    padding:0 10px 10px 10px;
}
.EducationvideoSee .right{
    display: inline-block;
    padding: 0 10px;
    box-sizing: border-box;
    width: 400px;
    position: absolute;
    right:15px;
}
.EducationvideoSee .left{
    display: inline-block;
    width: calc(100% - 400px);
}
.EducationvideoSee .imgDiv p{
    font-size: 12px;
}
.EducationvideoSee .circle{
    display: inline-block;
    width: 3px;
    height:3px;
    background: #666666;
    border-radius: 50%;
}
.EducationvideoSee .imgDiv{
    width: 100%;
    position: relative;
}
.EducationvideoSee{
    min-height:100%;
    background: #fff;
    padding: 15px 50px;
    box-sizing: border-box;
    position: relative;
}
</style>