<template>
  <div class="EducationvideoList">
    <!-- <div class="left">
        <ul class="lineUl" style="margin-top:30px">
            <li 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="请输入内容" 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>新增</el-button>
            <!-- <el-button style="margin-left:20px" size="small" type="primary" @click="goUrlHome" 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 class="icon">
                                <el-tooltip class="item" effect="dark" content="编辑" 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="删除" 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="撤回" 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">发布</span>  
                            <span v-if="item.VideoStatus==2">草稿</span>  
                            <span v-if="item.VideoStatus==3">撤回</span> 
                            ) 
                            </span>   
                        </p>
                          <p class="wryh" style="color:#aaaaaa">{{item.WatchNum}}次观看
                              <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>
            <!-- <el-pagination background @current-change="handleCurrentChange"
                layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
            </el-pagination>  -->
            <div v-show="nodata && msg.pageIndex>1" class="wryh" style="text-align:center;padding:15px 0;font-size:12px;color:#aaaaaa">无更多数据</div>
            <div style="opacity: 0;" ref="bottomDiv">1111</div>
            
        </div>
    </div>
    <el-dialog
    title="上传"
    :visible.sync="dialogVisible"
    width="800px">
    <el-form  :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <el-form-item style="display:inline-block;" label="标题" prop="Name">
            <el-input style="width:220px" v-model="addMsg.Name"></el-input>
        </el-form-item>
        <el-form-item style="display:inline-block"  label="标签" prop="Label">
            <!-- <el-input style="width:220px" v-model="addMsg.Label"></el-input> -->
             <el-select style="width:220px" v-model="addMsg.Label" placeholder="请选择状态">
                <el-option label="酒店" value="酒店"></el-option>
                <el-option label="景点" value="景点"></el-option>
                <el-option label="餐食" value="餐食"></el-option>
                <el-option label="交通" value="交通"></el-option>
                <el-option label="专辑" value="专辑"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="display:inline-block"  label="状态" prop="VideoStatus">
            <el-select style="width:220px" v-model="addMsg.VideoStatus" placeholder="请选择状态">
                <el-option label="发布" :value="1"></el-option>
                <el-option label="草稿" :value="2"></el-option>
                <el-option label="撤回" :value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="display:inline-block"  label="线路" prop="LineId">
            <el-select style="width:220px" v-model="addMsg.LineId" placeholder="请选择线路">
                <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="视频地址" 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="uploadFileBtn"
                :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;">上传中，请稍后...</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">取 消</el-button>
        <el-button style="font-size:12px" size="samll" type="danger" @click="submitForm('addMsg')">确 定</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: '请输入标题', trigger: 'blur' },
            ],
            Label: [
                { required: true, message: '请选择标签', trigger: 'change' }
            ],
            VideoStatus: [
                 { required: true, message: '请选择状态', trigger: 'change' }
            ],
            LineId: [
                 { required: true, message: '请选择线路', 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,
            }
        },
        // uploadFileBtn1(file) {
        //     let typeArr=[
        //         {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3},
        //     ]
        //     let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase();
        //     let typeOk  = false;
        //     typeArr.forEach(x => {
        //         if (x.stringArr.indexOf(ft) != "-1") {
        //         typeOk = true;
        //         }
        //     });
        // if (!typeOk) return this.$message.error(this.$t('tips.qsctpian'));
        //     let newArr = [];
        //     newArr.push(file.file);
        //     let path = "/Sale/Uploadvideo/";
        //     this.uploadFile(path, newArr, x => {
        //         this.addMsg.Cover=x.res.requestUrls[0];
        //     });
        // },
        uploadFileBtn(file) {
            if (['video/mp4', 'video/ogg','video/webm','video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.file.type) == -1) {
                this.Error("请上传正确的视频格式");
                return;
            }
            let newArr = [];
            newArr.push(file.file);
            let path = "/Sale/Uploadvideo/";
            this.scLoad=true;
            this.uploadFile(path, newArr, x => {
                this.scLoad=false;
                this.addMsg.VideoAddress=this.baseurl+x.name;
                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("是否撤回?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    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("是否删除? 删除后不可恢复", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    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("上传中，请稍候...")
                    return;
                }
                let Label=this.addMsg.Label;
                if (['酒店','景点','餐食','交通','专辑','其他'].indexOf(Label) == -1) {
                    this.Error("请选择正确的标签！");
                    return;
                }
                if(this.addMsg.VideoAddress==''){
                    this.Error("请上传视频！");
                    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>