<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' : ''">
          {{$t('pub.unlimitedSel')}}
        </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>{{$t('objFill.v101.Rest.fabushipin')}}</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">
              <div class="backDiv">
                <span class="iconfont icon-ico_bofang"></span>
              </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>
                <el-row>
                  <el-col :span="12">
                    <p class="wryh" style="color:#aaaaaa">{{item.EmName}}</p>
                    <p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}{{$t('objFill.v101.ciguankan')}}
                      <span style="margin-left:5pxy"></span>
                      <span>{{item.UpdateDate}}</span>
                    </p>
                  </el-col>
                  <el-col :span="12" style="text-align:right;">
                    <el-tooltip class="item" effect="dark" :content="$t('salesModule.ShareTrip')" placement="top-start"
                      style="float: right">
                      <el-popover width="180" trigger="click">
                        <div class="w150" v-loading="wxLoading">
                          <template v-if="item.wxImage!=''">
                            <img style="float: left; width: 108px; height: 108px; margin: 10px 21px 3px;"
                              :src="'data:image/png;base64,' + item.wxImage" />
                          </template>
                          <p style="text-align: center; font-size: 12px; color: #666">
                            {{ $t("salesModule.XCX") }}
                          </p>
                        </div>
                        <el-button slot="reference" type="primary" @click="createVideoQrCode(item)" size="mini">{{$t('objFill.v101.administrative.fenxiang')}}
                        </el-button>
                      </el-popover>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </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">{{$t('objFill.v101.wugendsju')}}</div>
      </div>
      <div style="opacity: 0;" ref="bottomDiv">&nbsp;</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,
        wxLoading: 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: {
      //生成小程序码
      createVideoQrCode(item) {
        this.wxLoading = true;
        var postMsg = {
          Id: item.Id
        }
        this.apipost(
          "Video_get_GetLvXiaoYouVideoCodeShare", postMsg,
          res => {
            this.wxLoading = false;
            if (res.data.resultCode == 1) {
              item.wxImage = res.data.data;
            }
          }
        );
      },
      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;
        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;
                  item.wxImage = "";
                })
                this.dataList = this.dataList.concat(data)
              }
              this.total = res.data.data.count;
            }
          }
        );
      },
      goUrl1(path, e) {
        e.stopPropagation()
        this.$router.push({
          name: path,
        });
      },
      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>