<template>
  <div class="EducationvideoList">
    <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="addList" round>{{$t('pub.addBtn')}}
        </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 class="icon">
                  <el-tooltip class="item" effect="dark" :content="$t('pub.edit')" placement="left">
                    <div v-if="item.VideoStatus==2 || item.VideoStatus==3" class="iconDiv"
                      @click.prevent="Edit(item,$event)">
                      <span class="iconfont icon-bianji-smal"></span>
                    </div>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="left">
                    <div class="iconDiv" v-if="item.VideoStatus==2 || item.VideoStatus==3" style="top:35px"
                      @click.prevent="Delete(item,$event)">
                      <span class="iconfont icon-shanchu"></span>
                    </div>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="$t('adm.adm_chehui')" placement="left">
                    <div class="iconDiv" v-if="item.VideoStatus!=3" style="top:70px"
                      @click.prevent="Chehui(item,$event)">
                      <span class="iconfont icon-chehui"></span>
                    </div>
                  </el-tooltip>
                </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}}
                  <span class="bold" style="color:#f56c6c">(
                    <span v-if="item.VideoStatus==1">{{$t('objFill.v101.header.fabu')}}</span>
                    <span v-if="item.VideoStatus==2">{{$t('objFill.caogao')}}</span>
                    <span v-if="item.VideoStatus==3">{{$t('adm.adm_chehui')}}</span>
                    )
                  </span>
                </p>
                <p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}{{$t('objFill.v101.ciguankan')}}
                  <span stryle="margin-left:5px"> </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">{{$t('objFill.v101.wugendsju')}}</div>
        <div style="opacity: 0;" ref="bottomDiv">1111</div>
      </div>
    </div>
    <el-dialog :title="$t('objFill.shangchuan')" :visible.sync="dialogVisible" width="800px">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <el-form-item style="display:inline-block;" :label="$t('objFill.biaoti')" prop="Name">
          <el-input style="width:220px" v-model="addMsg.Name"></el-input>
        </el-form-item>
        <el-form-item style="display:inline-block" :label="$t('objFill.biaoqian')" prop="Label">
          <el-select style="width:220px" v-model="addMsg.Label" :placeholder="$t('objFill.v101.activity.qingxzzt')">
            <el-option :label="$t('hotel.hotel')" :value="$t('hotel.hotel')"></el-option>
            <el-option :label="$t('commonPickUp.Pick_attractions')" :value="$t('commonPickUp.Pick_attractions')"></el-option>
            <el-option :label="$t('ground.canshi')" :value="$t('ground.canshi')"></el-option>
            <el-option :label="$t('objFill.jiaotong')" :value="$t('objFill.jiaotong')"></el-option>
            <el-option :label="$t('objFill.v101.zhuanji')" :value="$t('objFill.v101.zhuanji')"></el-option>
            <el-option :label="$t('active.cl_qita')" :value="$t('active.cl_qita')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="display:inline-block" :label="$t('admin.admin_status')" prop="VideoStatus">
          <el-select style="width:220px" v-model="addMsg.VideoStatus"
            :placeholder="$t('objFill.v101.activity.qingxzzt')">
            <el-option :label="$t('objFill.v101.header.fabu')" :value="1"></el-option>
            <el-option :label="$t('objFill.caogao')" :value="2"></el-option>
            <el-option :label="$t('adm.adm_chehui')" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="display:inline-block" :label="$t('advmanager.v_line')" prop="LineId">
          <el-select style="width:220px" v-model="addMsg.LineId" :placeholder="$t('rule.qxzxuanlu')">
            <el-option v-for="(item,index) in LineList" :key="index" :label="item.LineName" :value="item.LineID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sm.shipindizhi')" style="margin-bottom:0px;display:inline-block;">
          <div v-if="addMsg.VideoAddress!=''" class="shipinDiv deleteDiv" style="position:relative">
            <span class="iconfont icon-shipin"></span>
            <div class="iconfontDiv">
              <span @click="DeleteSrc(2)" class="iconfont icon-bumenguanli-shanchu"></span>
            </div>
          </div>
          <el-upload v-else style="display:inline-block;" class="EducationvideoListupload" drag
            :http-request="UploadFileToAli" :multiple="false" :show-file-list="false" action="">
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__text">{{$t("active.ld_djscwj")}}</div>
          </el-upload>
          <p style="font-size:12px;color:#e95252" v-show="scLoad">
            <span v-loading="scLoad" style="display:inline-block;width:50px;height:50px"></span>
            <span style="position: relative;top: -23px;">{{$t('objFill.v101.shangczqinsh')}}</span>
          </p>
        </el-form-item>
      </el-form>
      <div style="text-align:right;margin-bottom:10px">
        <el-button style="font-size:12px" size="samll" @click="dialogVisible = false">{{$t('pub.cancelBtn')}}
        </el-button>
        <el-button style="font-size:12px" size="samll" type="danger" @click="submitForm('addMsg')">{{$t('pub.sureBtn')}}
        </el-button>
      </div>
    </el-dialog>
    <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"></video>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Educationvideo',
    created() {
      let userInfo = this.getLocalStorage()
      this.msg.CreateBy = userInfo.EmployeeId
    },
    data() {
      return {
        scLoad: false,
        videoDivState: false,
        thisVideoAddress: '',
        defaultImg: 'this.src="' + require("../assets/img/bg_z1@2x.png") + '"',
        val: '',
        LineList: [],
        dialogVisible: false,
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 20,
          Name: '',
          UserType: 1,
          VideoStatus: '',
          CreateBy: '',
          LineId: -1,
        },
        addMsg: {
          Id: 0,
          Name: '',
          Cover: '',
          VideoAddress: '',
          Label: '',
          VideoStatus: 1,
          LineId: '',
          UserType: 1,
        },
        total: 0,
        rules: {
          Name: [{
            required: true,
            message: this.$t('objFill.v101.FinancialModule.qingsrbt'),
            trigger: 'blur'
          }, ],
          Label: [{
            required: true,
            message: this.$t('objFill.v101.qingxzbq'),
            trigger: 'change'
          }],
          VideoStatus: [{
            required: true,
            message: this.$t('objFill.v101.activity.qingxzzt'),
            trigger: 'change'
          }],
          LineId: [{
            required: true,
            message: this.$t('objFill.v101.activity.rul2.t8'),
            trigger: 'change'
          }],
        },
        loading: false,
        baseurl: 'http://vt-im-bucket.oss-cn-chengdu.aliyuncs.com',
        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;
        if (that.$refs.bottomDiv.getBoundingClientRect()) {
          var bottomDiv = that.$refs.bottomDiv.getBoundingClientRect().top;
          if (this.windowHeight - 50 < bottomDiv) {
            this.handleCurrentChange();
          }
        }
      },
      DeleteSrc(num) {
        if (num == 1) {
          this.addMsg.Cover = '';
        } else {
          this.addMsg.VideoAddress = '';
        }
      },
      addList() {
        this.dialogVisible = true;
        this.addMsg = {
          Id: 0,
          Name: '',
          Cover: '',
          VideoAddress: '',
          Label: '',
          VideoStatus: 1,
          LineId: '',
          UserType: 1,
        }
      },
      UploadFileToAli(file) {
        if (['video/mp4', 'video/ogg', 'video/webm', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file
            .file.type) == -1) {
          this.Error(this.$t('objFill.qingsczqdspgs'));
          return;
        }
        let newArr = [];
        newArr.push(file.file);
        let path = "/Sale/Uploadvideo/";
        this.scLoad = true;
        this.UploadFileToAli2024(path, newArr, x => {
          this.scLoad = false;
          this.addMsg.VideoAddress = this.baseurl + x.data.FilePath;
          let lastUrl = "?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast";
          this.addMsg.Cover = this.addMsg.VideoAddress + lastUrl;
        });
      },
      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)
              }

            }
          }
        );
      },
      Chehui(item, e) {
        e.stopPropagation()
        this.$confirm(this.$t('adm.adm_sfchehui') + "?", this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: "warning"
          })
          .then(() => {
            this.apipost('Video_post_CancelVidelInfo', {
              VideoId: item.Id
            }, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.dataList = [];
                this.msg.pageIndex = 1;
                this.nodata = false;
                this.getList()
              } else {
                this.Error(res.data.message)

              }
            })
          })
          .catch(() => {});
      },
      Delete(item, e) {
        e.stopPropagation()
        this.$confirm(this.$t('objFill.shifouscbkhf'), this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: "warning"
          })
          .then(() => {
            this.apipost('Video_post_DelVidelInfo', {
              VideoId: item.Id
            }, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.dataList = [];
                this.msg.pageIndex = 1;
                this.nodata = false;
                this.getList()
              } else {
                this.Error(res.data.message)

              }
            })
          })
          .catch(() => {});
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.scLoad) {
              this.Error(this.$t('objFill.shangczqinsh'))
              return;
            }
            let Label = this.addMsg.Label;
            if (['酒店', '景点', '餐食', '交通', '专辑', '其他'].indexOf(Label) == -1) {
              this.Error(this.$t('objFill.v101.qingxzzqdebq'));
              return;
            }
            if (this.addMsg.VideoAddress == '') {
              this.Error(this.$t('objFill.v101.qingshangcspi'));
              return;
            }
            this.apipost('Video_post_SetPCVideoInfo', this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.dialogVisible = false;
                this.dataList = [];
                this.msg.pageIndex = 1;
                this.nodata = false;
                this.getList()
              } else {
                this.Error(res.data.message)
              }
            })
          } else {}
        });
      },
      Edit(item, e) {
        e.stopPropagation()
        this.addMsg.Cover = item.Cover;
        this.addMsg.Id = item.Id;
        this.addMsg.LineId = item.LineId;
        this.addMsg.Name = item.Name;
        this.addMsg.VideoAddress = item.VideoAddress;
        this.addMsg.VideoStatus = item.VideoStatus;
        this.addMsg.Label = item.Label;
        this.dialogVisible = true;
      },
      goUrlHome() {
        this.$router.push({
          name: 'Educationvideo',
          query: {
            blank: "y"
          }
        });
      },
      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) {
            }
          }
        );
      },
      AddList(id) {
        this.apipost(
          "Video_post_SetVideoWatch", {
            VideoId: id
          },
          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>
  .EducationvideoList .el-loading-spinner .circular {
    width: 20px !important;
    height: 20px !important;
  }

  .EducationvideoList .el-loading-mask {
    background-color: rgba(255, 255, 255, .1) !important;
  }

  .text1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: 20px;
  }

  .EducationvideoList .el-upload-dragger .el-upload__text {
    font-family: '微软雅黑';
    font-size: 12px;
  }

  .EducationvideoList .el-form-item__label {
    font-family: '微软雅黑';
    font-size: 12px;
  }

  .wryh {
    font-family: '微软雅黑'
  }

  .EducationvideoList .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;
  }

  .EducationvideoList .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;
  }

  .EducationvideoList .contentDiv img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;


  }

  .EducationvideoList .contentDiv .DesDiv {
    padding-left: 45px;
    box-sizing: border-box;
    width: 100%;
  }

  .EducationvideoList .contentDiv {
    position: relative;
    margin-top: 5px;
  }

  .EducationvideoList .bold {
    font-family: "pingfangR"
  }

  .EducationvideoList .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #f56c6c !important;
  }

  .EducationvideoList .deleteDiv:hover .iconfontDiv {
    display: block;
  }

  .EducationvideoList .deleteDiv .iconfontDiv {
    position: absolute;
    right: 0;
    top: 0;
    width: 160px;
    height: 120px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding-top: 42px;
    display: none;
    z-index: 100;
  }

  .EducationvideoList .deleteDiv .iconfontDiv .icon-bumenguanli-shanchu {

    color: #f56c6c;
    font-size: 24px;
  }

  .EducationvideoList .shipinDiv .icon-shipin {
    font-size: 95px;
    position: relative;
    top: -20px;
  }

  .EducationvideoList .shipinDiv {
    display: inline-flex;
    align-items: center;
    width: 160px;
    height: 160px;
    justify-content: center;
    position: relative;
  }

  .EducationvideoList .right .Content .circle {
    display: inline-block;
    width: 3px;
    height: 3px;
    background: #666666;
    border-radius: 50%;
  }

  .EducationvideoListupload .el-upload .el-upload-dragger {
    width: 160px !important;
    height: 115px !important;
  }

  .EducationvideoList .right .Content .videoUl li .imgDiv:hover .icon {
    display: block;
  }

  .EducationvideoList .right .Content .videoUl li .imgDiv .icon {
    position: absolute;
    right: 3px;
    top: 3px;

    display: none;
  }

  .EducationvideoList .right .Content .videoUl li .imgDiv .iconDiv {
    padding: 2px 6px;
    background: #000;
    margin-top: 5px;
  }

  .EducationvideoList .right .Content .videoUl li .imgDiv .icon .iconfont {
    color: #fff;
  }

  .EducationvideoList .right .Content .videoUl li .imgDiv {
    position: relative;
    cursor: pointer;
    height: 199px;
    overflow: hidden;
  }

  .EducationvideoList .right .Content .videoUl li p {
    font-size: 12px;
    padding-left: 6px;
    box-sizing: border-box;

  }

  .EducationvideoList .right .Content .videoUl li {
    display: inline-block;
    width: 300px;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 15px;
  }

  .EducationvideoList .right .Content {
    padding: 15px 15px 10px 15px;
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .EducationvideoList .left .lineUl li:hover {
    background: #f5f5f5;
  }

  .EducationvideoList .left .lineUl li {
    padding: 10px 35px;
    box-sizing: border-box;
    font-size: 14px;
  }

  li {
    list-style: none;

  }

  .EducationvideoList .right .search {
    padding: 15px 0;
    padding-left: 50px;
    box-sizing: border-box;
    /* position: fixed; */
    /* top: 50px; */
    width: 100%;
    background: #fff;
    /* left: 240px; */

  }

  .EducationvideoList {
    position: relative;
    min-height: 100%;
    background: #f5f5f5;
  }

  .EducationvideoList .left {
    position: fixed;
    min-height: 100%;
    width: 240px;
    z-index: 100;
    background: #fff;
  }

  .EducationvideoList .right {
    background: #f5f5f5;
    /* padding-left: 250px; */
    box-sizing: border-box;
    min-height: 100%;
  }

</style>
