<template lang="pug">
  <div class='monitor_rotation'>
    <el-container style='padding-left:0px;'>
      <el-aside width="333px" style='height:85vh;background:##000;'>
          <el-card>
            <div slot="header" class="clearfix">
              <span class="header_title title-bold">任务列表</span>
              <div style="float:right;">
                <el-button v-if="isAuth('monitor:rotation:update')" type="primary" size="mini" icon='el-icon-edit-outline'@click="leftEdit"></el-button>
                <el-button v-if="isAuth('monitor:rotation:lSave')" type="primary" size="mini" icon='el-icon-plus' @click="leftAdd"></el-button>
                <el-button v-if="isAuth('monitor:rotation:lDelete')" type="primary" size="mini" icon='el-icon-delete' @click="leftDel"></el-button>
              </div>
            </div>
            <div class="left_list">
              <div :class="{ 'left_list_row_on': item.on, 'left_list_row': true }" v-for="(item, index) in leftListData" @click="leftListRowClick(item,index)">
                <div class="left_list_row_name" :title='item.name'>{{item.name|ellipsis}}</div>
                <div class="left_list_row_size" v-if="item.on">
                  <img v-if="item.type==1" src="@/assets/images/1xon.png" alt="">
                  <img v-if="item.type==2" src="@/assets/images/2xon.png" alt="">
                  <img v-if="item.type==3" src="@/assets/images/3xon.png" alt="">
                  <img v-if="item.type==4" src="@/assets/images/4xon.png" alt="">
                </div>
                <div class="left_list_row_size" v-if="!item.on">
                  <img v-if="item.type==1" src="@/assets/images/1x.png" alt="">
                  <img v-if="item.type==2" src="@/assets/images/2x.png" alt="">
                  <img v-if="item.type==3" src="@/assets/images/3x.png" alt="">
                  <img v-if="item.type==4" src="@/assets/images/4x.png" alt="">
                </div>
              </div>
            </div>
          </el-card>
      </el-aside>

      <el-main style="padding:0px;height:755px;" class="main">
        <el-card style="height:99.7%;position:relative;">
          <el-row v-for="(rowItem,rowIndex) in videoList.size" :span="24" v-if="initStatus">
            <el-col :style="colHeight" v-for="(colItem,colIndex) in videoList.size" :span="24/videoList.size" >
              //- <div style='background: rgb(0, 0, 0); padding-bottom: 1px;height:inherit;'>
              <div style='background: rgb(0, 0, 0);padding-bottom: 1px;height:100%;width:100%'>
                <video height="100%" width="99%" v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" ref="video"  style="margin:0.2% 0 0 0.5%;object-fit:fill;" muted autoplay controls></video>
                //- <img v-else :style="colHeight + 'width:100%;margin:0.3% 0 0 0.3%;'" src="@/assets/images/videoImg.png" alt="">
                <img v-else style="height:100%; width:100%;margin:0.2% 0 0 0.5%;" src="@/assets/images/videoImg.png" alt="">

              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-main>

      <el-aside width="16vw" style='height:85vh;max-height: 755px;overflow-y: auto;' class="right">
          <el-card>
            <div slot="header" class="clearfix">
              <span class="header_title title-bold">通道轮巡列表</span>
              <div style="float:right; ">
                <el-button v-if="isAuth('monitor:rotation:rSave')" type="primary" size="mini" icon='el-icon-plus' @click="rightAdd"></el-button>
              </div>
            </div>
            <div class="rigth_list">
              <div class="rigth_list_row" v-for="(item, index) in rightListData">
                <div :class="{rigth_list_row_bot:true, rigth_list_row_bot_on:true}">
                  <span class="rigth_list_row_bot_title">
                    <img v-if="item.type=='枪机'" src="@/assets/images/qiang.png" alt="">
                    <img v-if="item.type!='枪机'" src="@/assets/images/qiu.png" alt="">
                    <b :title='item.name'> {{item.name|ellipsis}}</b>
                  </span>
                  <div style="float:right">
                    <el-button v-if="isAuth('monitor:rotation:up')" type="text" size="mini" :disabled="!index" icon="el-icon-wq-shang-on" @click="rightTop(item,index)"></el-button>
                    <el-button v-if="isAuth('monitor:rotation:down')" type="text" size="mini" :disabled="index == rightListData.length-1" icon="el-icon-wq-xia-on" @click="rightBottom(item,index)"></el-button>
                    <el-button v-if="isAuth('monitor:rotation:rDelete')" type="text" size="mini" icon="el-icon-wq-shan-on" @click="rightDel(item)"></el-button>
                  </div>
                </div>
                <div class="rigth_list_row_con">
                  //- <p>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点 : <span>{{item.lineName+'-'+item.stationName}}</span></p>
                  <p>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点 : <span>{{item.deployLocation}}</span></p>
                  <p>设备类型 : {{item.type}}</p>
                  <p>设备型号 : {{item.code}}</p>
                </div>
              </div>
            </div>
          </el-card>
      </el-aside>
      <left-dialog ref='leftDialog' @leftDialogSuccess='getLeftData'></left-dialog>
      <right-dialog ref='rightDialog' @rightDialogSuccess='getRightData'></right-dialog>
    </el-container>
  </div>

</template>

<script>
import LeftDialog from './left-dialog'
import RightDialog from './right-dialog'
import { getUUID } from '@/util'
import Vue from 'vue'
let that
export default {
  data () {
    return {
      colHeight: '233px',
      flvPlayerArr: [],
      initStatus: false,
      stationId: localStorage.getItem('stationId'),
      subCode: '01',
      lineStation: '',
      leftListData: [],
      rightListData: [],
      leftListOnData: null,
      videoList: {
        size: 0,
        list: []
      },
      timeOut: null
    }
  },
  filters:{
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 7) {
        return value.slice(0, 7) + "..";
      }
      return value;
    },
  },
  components: {
    LeftDialog,
    RightDialog
  },
  created () {
    that = this
    this.getLeftData()
  },
  beforeDestroy() {
    if(this.timeOut) {
    　　　　clearInterval(this.timeOut); //关闭轮播定时器
    　　 } 
  },
  methods: {
    getLeftData() { //获取左侧任务列表
      this.$http({
        url: this.$http.adornUrlEq('/videoTask/list'),
        method: 'post',
        data: {
          stationId: this.stationId
        }
      }).then(data => {
        if (data.code == 0) {
          this.lineStation = data.lineStation
          this.leftListData = data.list
          this.leftListOnData = this.leftListData[0]
          this.leftListData[0].on = true
          this.videoList.list = ''
          this.videoList.size = this.leftListOnData.type * 1
          this.getRightData()
          this.initStatus = true
        }
      })
    },
    getRightData() {
      if (this.timeOut) {
        clearInterval(this.timeOut)
      }
      this.$http({
        url: this.$http.adornUrlEq('/videoTaskResource/list'),
        method: 'post',
        data: {
          taskId: this.leftListOnData.id,
          stationId: this.stationId
        }
      }).then(data => {
        if (data.code == 0) {
          this.rightListData = data.list || []
          // console.log(data)
        }
      }).then(data => {
        // console.log('--右侧数据请求完成，执行方法--')
        this.rotationSet()
      })
    },
    //任务列表点击任务
    leftListRowClick(item, index) {
      if (this.timeOut) {
        clearInterval(this.timeOut)
      }
      this.leftListData.forEach((res, i) => {
        if (index == i) {
          Vue.set(res, 'on', true)
          this.leftListOnData = res
          this.getRightData()
          this.videoList.list = ''
          this.videoList.size = item.type * 1
        } else {
          Vue.set(res, 'on', false)
        }
      })
    },
    leftAdd() { //新增左侧任务
      this.$refs.leftDialog.init({
        leftListOnData: {},
        stationId: this.stationId,
        subCode: this.subCode
      })
    },
    leftEdit() { //编辑左侧任务
      if (this.leftListOnData) {
          this.$refs.leftDialog.init({
          leftListOnData: this.leftListOnData,
          stationId: this.stationId,
          subCode: this.subCode
        }, true)
      } else {
        this.$message.warning('请选择任务')
      }
    },
    leftDel() { //删除左侧任务
      if (this.leftListOnData) {
        this.$confirm('确认删除该任务', '删除任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrlEq('/videoTask/delete'),
            method: 'post',
            data: {
              id: this.leftListOnData.id,
              stationId: this.leftListOnData.stationId
            }
          }).then(data => {
            if (data.code == 0) {
              this.$message.success('删除成功')
              this.getLeftData()
            }
          })
        })
      } else {
        this.$message.warning('请选择任务')
      }
    },
    rightAdd() { //新增右侧任务
      // console.log(this.rightListData)
      this.$refs.rightDialog.init({
        leftListOnData: this.leftListOnData || {},
        lineStation: this.lineStation,
        stationId: this.stationId,
        subCode: this.subCode,
        rightAddListData: this.rightListData
      })
    },
    rightTop(item, index) {
      this.rightUpdate(item.id, this.rightListData[index - 1].id, item.stationId)
    },
    rightBottom(item, index) {
      this.rightUpdate(item.id, this.rightListData[index + 1].id, item.stationId)
    },
    rightUpdate(id1, id2, stationId) {
      this.$http({
        url: this.$http.adornUrlEq('/videoTaskResource/update'),
        method: 'post',
        data: {
          id1: id1,
          id2: id2,
          stationId: stationId
        }
      }).then(data => {
        if (data.code == 0) {
          this.$message.success('操作成功')
          this.getRightData()
        }
      })
    },
    rightDel(item) {
      this.$confirm('确认删除该资源', '删除资源', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrlEq('/videoTaskResource/delete'),
          method: 'post',
          data: {
            id: item.id,
            stationId: item.stationId
          }
        }).then(data => {
          if (data.code == 0) {
            this.$message.success('删除成功')
            this.getRightData()
          }
        })
      })
    },
    rotationSet() {
      this.colHeight = 'height:' + (755 / this.videoList.size ) + 'px;'
      if(this.rightListData.length == 0){
        //如果已经有视频在播放，下次播放的时候，得先释放掉上次播放的视频
        if(this.flvPlayerArr && this.flvPlayerArr.length > 0){
          for (let i = 0; i < this.flvPlayerArr.length; i++) {
            var flvPlayer = this.flvPlayerArr[i]
            flvPlayer.pause()
            flvPlayer.unload()
            flvPlayer.detachMediaElement()
            flvPlayer.destroy()
            this.flvPlayerArr[i] = null
          }
          this.flvPlayerArr = []
          this.videoList.list = []
        }
      }
      if (this.timeOut) {
        // console.log('--删除循环执行--')
        clearInterval(this.timeOut)
      }
      // console.log('--具体执行方法开始--')
      if (!this.rightListData.length) {
        return
      }
      let page = 0, rows = this.videoList.size * this.videoList.size, size = rows//页码、窗体数量、当前播放数量
      // console.log('--开始循环计时--')
      // console.log(new Date())
      //如果第一次循环，视频数量小于设定屏幕数量，则只播放一次
      if (this.rightListData.length < size) {
        size = this.rightListData.length
      }
      this.videoListFor(rows, page, size)
      page++
      // console.log('rows:' + rows + '---this.rightListData.length：' + this.rightListData.length)
      if (this.rightListData.length > rows) {
        let num = 0
        this.timeOut = setInterval(() => {
          //如果已经有视频在播放，下次播放的时候，得先释放掉上次播放的视频
          if(this.flvPlayerArr && this.flvPlayerArr.length > 0){
            // console.log("如果已经有视频在播放，下次播放的时候，得先释放掉上次播放的视频")
            for (let i = 0; i < this.flvPlayerArr.length; i++) {
              var flvPlayer = this.flvPlayerArr[i]
              flvPlayer.pause()
              flvPlayer.unload()
              flvPlayer.detachMediaElement()
              flvPlayer.destroy()
              this.flvPlayerArr[i] = null
            }
            this.flvPlayerArr = []
          }
          // console.log(new Date())
          size = this.rightListData.length - rows * page
          if (size >= rows) {
            size = rows
          }
          this.videoListFor(rows, page, size)
          page++
          if (page >= this.rightListData.length / rows) {
            page = 0
            num++
          }
        }, this.leftListOnData.pollInterval * 1000)
      }
    },
    //播放视频
    videoListFor(rows, page, size) {
      // console.log('rows:' + rows + '--page:' + page + '---size:' + size)
      this.videoList.list = []
      for (let i = 0; i < size; i++) {
        if (this.rightListData[page * rows + i]) {
          // console.log('this.rightListData[page * rows + i]', this.rightListData[page * rows + i])
          //资源点状态(0=离线，1=在线)
          var online = this.rightListData[page * rows + i].byx2
          if(online == 0){
            this.$message.warning('存在离线设备，离线设备无法查看！')
            continue
          }
          //视频直播
          this.videoPlay(i, page, rows)
        }
      }
    },
    videoPlay(index, page, rows){
      setTimeout(() => { //设置延迟执行
        var src = ''
        this.$http({
          url: this.$http.adornUrlEq('/camera/camerasPlay'),
          method: 'post',
          data: {
            id: this.rightListData[page * rows + index].resourceId,
            stationId: this.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3
          }
        }).then(data => {
          src = data.url
          this.videoList.list.push({
            src: src,
            data: this.rightListData[page * rows + index]
          })
          //视频连接
          if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
              type: 'flv',
              enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
              isLive: true, //直播模式
              hasAudio: false, //关闭音频
              hasVideo: true,
              stashInitialSize: 128,
              enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
              url: src
            })
            this.$nextTick(function () {
              flvPlayer.attachMediaElement(this.$refs.video[index])
              flvPlayer.load()
              // console.log("--rows:"+rows+"---this.rightListData.length:"+this.rightListData.length)
              // if (this.rightListData.length > rows) {
                this.flvPlayerArr.push(flvPlayer)
              // }
            })
          }
        })
      }, 300 * index + 10)
    }
  }
}
</script>
<style>

.inputWidth{
  width: 210px;
}

</style>
<style lang='scss'>
.inputWidth {
  width: 130px;
}
.monitor_rotation{
  background: #F4F4F4;
  .el-card__header{
    padding: 10px 10px 10px 20px !important;
    background: #E1EDF4;
    // .header_title{
    //   font-size:16px;
    //   font-family:Microsoft YaHei;
    //   font-weight:bold;
    //   color:rgba(51,51,51,1)
    // }
    .el-button{
      padding: 5px 5px;

    }
  }
}

.resource-container {
  width: 100%;
  height: 100%;
  position: relative;
  border: 0px solid black;
  overflow: auto;
}

.right{
 /deep/ .el-card__body{
    background: #F4F4F4;
    // padding:15px;
    height: 100%!important;
  }
}

.left_list{
  .left_list_row_on{
    background-color: #35AFF8 !important;
    color: #fff;

  }
  .left_list_row{
    cursor: pointer;
    width: 90%;
    height: 40px;
    border-radius:20px 0 0 20px;
    background: #fff;
    padding:0 20px;
    margin-bottom: 10px;
    .left_list_row_name{
      float: left;
      widows: 65%;
      line-height: 40px;
      font-size: 16px;
    }
    .left_list_row_size{
      float: right;
      widows: 25%;
      padding-top: 7px;
    }
  }
}
.rigth_list{
  .rigth_list_row{

    margin-bottom: 10px;
    border: 1px solid #ccc;
    .rigth_list_row_top{
      height: 40px;
      line-height: 40px;
      padding:0 10px;
      border-bottom: 1px solid #ccc;
    }
    .rigth_list_row_con{
      height: 70px;
      padding-top: 10px;
      font-size: 12px;
      background-color: #fff;
      p{
        margin: 0;
        padding-left:20px;
        padding-bottom: 6px;
        span{
          color: #35AFF7;
        };
      }
    }
    .rigth_list_row_bot{
      height: 40px;
      line-height: 40px;
      padding:0 10px;
      font-size: 15px;
      font-family:Adobe Heiti Std;
      border-top: 1px solid #F4F4F4;
      background: #EFF9FE;
      .el-button{
        margin-left: 3px;
      }
    }
    .rigth_list_row_bot_on{
      background: #35AFF7;
      color: #fff;
      .el-button{
        color:#35AFF7;
      }
    }
  }
}
.main{
  .el-card__body{
    padding:0px !important;
  }
}
.rigth_list_row_bot_title{
  img{
    vertical-align:middle;
    transform:translateY(-2px);
  }
}
</style>
