<template lang="pug">
  <div class='monitor_playback'>
    <el-container style='padding-left:0px;'>
      <el-aside width='333px' style='height:85vh'>
        <div class="monitor_playback_left_top">
          <div class="monitor_playback_left_topL">
            <div :class="[activeName==1?'on':'']" @click="handleClick(1)">常规</div>
            <div :class="[activeName==2?'on':'']" @click="handleClick(2)">报警事件</div>
          </div>
        </div>
          <div v-if="activeName == 1">
            <el-card class="tree-container">
              //- <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
              <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" show-checkbox :check-strictly='true' :default-expand-all='false' @check-change="handleCheckChange" @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
                <span class="custom-tree-node" style='width:85%;line-height: 18px;' slot-scope="{ node, data }">
                  <span v-if="node.data.level != 6 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
                  <span v-if="node.data.level != 6 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
                  <span v-if="node.data.level == 6 && node.data.type=='b6af764f2a6e454490a6b1b3c9057e57'" class="el-icon-wq-treeQiang xa-icon"></span>
                  <span v-if="node.data.level == 6 && node.data.type=='ece0b8b2db27411886254e81134988a3'" class="el-icon-wq-treeQiu xa-icon"></span>
                  <span v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1 ">&nbsp;{{node.label}}</span>
                  <span v-if="node.label.indexOf('在线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span></span>
                  <span v-if="node.label.indexOf('离线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span></span>
                  span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
                </span>
              </el-tree>
            </el-card>

            <div class="monitor_playback_left_bottom">
              <div class="header_title" >
                <span>录像时间段</span>
              </div>
              <el-form ref="form" :model="formData" label-width="90px">
                <el-form-item label="开始时间:">
                   <el-date-picker v-model="formData.staTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间:">
                  <el-date-picker v-model="formData.endTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>

                <el-form-item label-width="130px">
                  <el-button v-if="isAuth('monitor:playback:list')" type="primary" @click="queryPlay()">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div v-if="activeName == 2" style="padding-top:20px;height: 100%;">
            <el-form ref="form" :model="formEventData" label-width="90px">
              <el-form-item label="报警名称:">
                 <el-input v-model="formEventData.name" placeholder="报警名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="报警等级:">
                 <el-select v-model="formEventData.level" placeholder="请选择" clearable>
                      <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 label="开始时间:">
                 <el-date-picker v-model="formEventData.staTime" type="datetime" placeholder="选择开始时间" clearable></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:">
                <el-date-picker v-model="formEventData.endTime" type="datetime" placeholder="选择结束时间" clearable></el-date-picker>
              </el-form-item>

              <el-form-item label-width="130px">
                <el-button type="primary"  @click="queryAlarmsInfo()">查询</el-button>
              </el-form-item>
            </el-form>
            <div class="eventData">
              <div class="num">共查到<span>{{eventDataList.length}}</span>条记录：</div>
              <div class="eventDataList">
                <div  class="eventDataListNow" v-for="(item,index) in eventDataList">
                  <div class="header_title" @change="handleRadio">
                    <el-radio v-model="radio" :label="item.id">{{item.event_name}}</el-radio>
                  </div>
                  <p>资源点名称：{{item.resource_name}}</p>
                  <p>发生时间：{{item.occurrence_time}}</p>
                </div>
              </div>
            </div>
          </div>

      </el-aside>

      <el-main style="padding:0px; height:753px;">
        <el-card >
          <el-row v-if="activeName == 1" v-for="(rowItem,rowIndex) in videoList.size" :span="24">
            <el-col :style="colHeight" v-for="(colItem,colIndex) in videoList.size" :span="24/videoList.size" style='border-right:1px solid black;border-top:1px solid black;'>
              <div style="background:#000;height:inherit;" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.6)">
                <video  height="100%" width="100%" :id="'video'+((rowIndex*videoList.size)+colIndex*1)" ref="video" style='object-fit:fill;' v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" muted autoplay controls></video>
                <img v-else style="height: inherit; width:100%" src="@/assets/images/videoImg.png" alt="">
              </div>
            </el-col>
          </el-row>
          <el-row v-if="activeName == 2" v-for="(rowItem,rowIndex) in videoList.size" :key="rowIndex" :span="24">
            <el-col :style="colHeight" v-for="(colItem,colIndex) in videoList.size" :span="24/videoList.size">
              <div style="background:#000;">
                <video height="98.5%" width="99%" :id="'video'+((rowIndex*videoList.size)+colIndex*1)" :src="videoList.list[(rowIndex*videoList.size)+colIndex]" ref="video" v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" muted autoplay controls></video>
                <img v-else style="height: 100%; width:100%" src="@/assets/images/videoImg.png" alt="">
              </div>
            </el-col>
          </el-row>
          <div v-if='videoList.list.length>0' class="vidoeSizeButton">
            <div class="vidoeSizeButton_buttonList">
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 1?'on':'']">1x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 2?'on':'']">4x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 3?'on':'']">9x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 4?'on':'']">16x</div>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>

</template>

<script>
import { getUUID } from '@/util'
import Vue from 'vue'
let that
export default {
  name: 'sys-user',
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0, 20) + '...'
      }
      return value
    }
  },
  data () {
    return {
      loading: false,
      checkList: [],
      radio: '1',
      colHeight: '233px',
      videoButtonSta: 1,
      videoTabSta: 1,
      treeData: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        level1: 'level'
      },
      nodeKey: 'id',
      checkedData: {
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        subSystem: '',
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId'),
        subCode: '01',
        subId: '438c30d3d7f241b573f22a1a36c60485'
      },
      currentNode: {},
      activeName: 1,
      videoList: {
        size: 1,
        list: []
      },
      formData: {
        staTime: '',
        endTime: ''
      },
      formEventData: {
        name: '',
        level: '',
        staTime: '',
        endTime: ''
      },
      eventDataList: []
    }
  },
  components: {
  },
  created () {
    that = this
    this.initTreeStationMap()
  },
  methods: {
    videoClick (now) {
      this.videoButtonSta = now
      this.videoList.size = now
    },
    handleClick (tab, event) { //左侧tab切换
      this.activeName = tab

      this.videoList = {
        size: 1,
        list: []
      }
      this.colHeight = '233px'
    },
    queryPlay () { //查询时间段回放
      if (!this.formData.staTime) {
        this.$message.warning('请选择开始时间')
        return
      } else if (!this.formData.endTime) {
        this.$message.warning('请选择结束时间')
        return
      } else if (new Date(this.formData.staTime).getTime() >= new Date(this.formData.endTime).getTime()) {
        this.$message.warning('结束时间需要大于开始时间')
        return
      }
//       this.loading = this.$loading(
//         { lock: true,
//           text: '加载中',
//           spinner: 'el-icon-loading',
//           background: 'rgba(0, 0, 0, 0.7)'
//         }
//       )
        this.loading = true
      console.log('staTime:' + this.formData.staTime + '---' + new Date(this.formData.staTime).getTime())
      console.log('endTime:' + this.formData.endTime + '---' + new Date(this.formData.endTime).getTime())
      if (this.checkList && this.checkList.length > 0) {
        this.videoList.list = []
        if (this.checkList.length <= 1) {
          this.videoList.size = 1
          this.videoButtonSta = 1
        } else if (this.checkList.length > 1 && this.checkList.length <= 4) {
          this.videoList.size = 2
          this.videoButtonSta = 2
        } else if (this.checkList.length > 4 && this.checkList.length <= 9) {
          this.videoList.size = 3
          this.videoButtonSta = 3
        } else if (this.checkList.length > 9 && this.checkList.length <= 16) {
          this.videoList.size = 4
          this.videoButtonSta = 4
        }
        this.colHeight = 'height:' + 755 / this.videoList.size + 'px'
        //循环勾选资源点设备，进行播放
        for (var i = 0; i < this.checkList.length; i++) {
          this.videoListFor(this.checkList[i])
        }
      } else {
            this.loading = false //关闭

        // this.loading.close()  //关闭
        this.$message.warning('请勾选需要回放的监控资源点')
      }
    },
    //视频播放
    videoListFor(obj) {
      setTimeout(() => { //设置延迟执行
        this.$http({
          url: this.$http.adornUrlEq('/camera/camerasBackPlay'),
          method: 'post',
          data: {
            resourceId: obj.id,
            stationId: obj.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3,
            ip: obj.addressCode,
            port: obj.port,
            username: obj.username,
            password: obj.password,
            channel: obj.byx1,
            stream: 'sub',
            starttime: this.formatTime(this.formData.staTime, 'yyyy-MM-dd hh:mm:ss'),
            endtime: this.formData.endTime != '' ? this.formatTime(this.formData.endTime, 'yyyy-MM-dd hh:mm:ss') : null
          }
        }).then(data => {
            this.loading = false //关闭

          // this.loading.close()  //关闭
          //视频播放
          this.videoList.list.push(data.url)
          let flvPlayer = null
          flvPlayer = flvjs.createPlayer({
            type: 'flv',
            enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
            isLive: true, //直播模式
            hasAudio: false, //关闭音频
            hasVideo: true,
            stashInitialSize: 128,
            enableStashBuffer: true, //播放flv时，设置是否启用播放缓存，只在直播起作用。
            url: this.videoList.list[this.videoList.list.length - 1]
          })
          this.$nextTick(function () {
            flvPlayer.attachMediaElement(this.$refs.video[this.videoList.list.length - 1])
            flvPlayer.load()
          })
        })
      }, 1000)
    },

    //按事件查询历史视频监控记录
    queryAlarmsInfo() {
      console.log(this.formEventData)
      if (new Date(this.formEventData.staTime).getTime() > new Date(this.formEventData.endTime).getTime()) {
        this.$message.warning('开始时间不能大于结束时间')
        return false
      }
      this.$http({
        url: this.$http.adornUrlEq('/alarmsInfo/queryByCameraList'),
        method: 'post',
        params: this.$http.adornParams({
          stationId: this.checkedData.sId,
          name: this.formEventData.name,
          level: this.formEventData.level,
          staTime: this.formEventData.staTime != '' ? this.formatTime(this.formEventData.staTime, 'yyyy-MM-dd hh:mm:ss') : null,
          endTime: this.formEventData.endTime != '' ? this.formatTime(this.formEventData.endTime, 'yyyy-MM-dd hh:mm:ss') : null
        })
      }).then(data => {
        if (data && data.code === 0) {
          console.log(data)
          this.eventDataList = data.list
        }
      })
    },
    queryAlarmsInfoVideo(id) {
      this.videoList = {
        size: 1,
        list: []
      }
      this.colHeight = '233px'
      this.$http({
        url: this.$http.adornUrlEq('/alarmsInfo/queryByCameraVideoList'),
        method: 'post',
        params: {
          alarmsId: id,
          stationId: this.checkedData.sId
        }
      }).then(data => {
        if (data && data.code === 0) {
          let arr = data.list
          arr.forEach(element => {
            this.videoList.list.push(element.path)
          })
          if (this.videoList.list.length <= 1) {
            this.videoList.size = 1
            this.videoButtonSta = 1
          } else if (this.videoList.list.length > 1 && this.videoList.list.length <= 4) {
            this.videoList.size = 2
            this.videoButtonSta = 2
          } else if (this.videoList.list.length > 4 && this.videoList.list.length <= 9) {
            this.videoList.size = 3
            this.videoButtonSta = 3
          } else if (this.videoList.list.length > 9 && this.videoList.list.length <= 16) {
            this.videoList.size = 4
            this.videoButtonSta = 4
          }
          // console.log('this.videoList.size:' + this.videoList.size)
          // console.log('activeName:' + this.activeName)

          this.colHeight = 'height:' + (755 / this.videoList.size - 5) + 'px'
        }
      })
    },
    //初始化站点下的资源点
    initTreeStationMap () {
      let url = ''
      url = this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList')
      this.$http({
        url: url,
        method: 'post',
        data: {
          subCode: this.checkedData.subCode,
          stationId: this.checkedData.sId,
          resourceName: this.searchInput,
          byx1: 'sp'
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.treeData = data.nodes
          this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
          if (this.treeData && this.treeData.length > 0) {
            Vue.set(this.treeData[0], 'iconB', true)
          }
        }
      }).then(() => {
        if (this.treeData && this.treeData.length > 0) {
          this.defaultExpandedKeys = [this.treeData[0].id]
          //设置选中的节点
          this.$nextTick(() => {
            this.$refs.tree.setCurrentNode(this.treeData[0])
          })
        }
      })
    },
    isFlag(data, id) {
      data.forEach(res => {
        if (res.id === id) {
            Vue.set(res, 'iconB', true)
        } else {
            Vue.set(res, 'iconB', false)
        }
        if (res.children) {
          this.isFlag(res.children, id)
        }
      })
    },
    //线路资源点树节点点击事件
    handleNodeClick (node) {
      this.currentNode = node
      this.isFlag(this.treeData, node.id)
    },
    //线路资源点树节点勾选事件
    handleCheckChange(node, checked, indeterminate) {
      this.currentNode = node
      this.isFlag(this.treeData, node.id)
      console.log(this.checkList)
      if (checked) {
        // console.log('选中记录')
        this.checkList.push(node)
      } else {
        // console.log('取消选择 删除记录')
        if (this.currentNode === null) { ////没有选中对象，证明没有任何被选中，测试为切换tab，不执行删除
          return
        }
         //取消选择 删除记录
        var index = this.checkList.findIndex(function(item) {
          return item.id == node.id
        })
        this.checkList.splice(index, 1)
      }
      console.log(this.checkList)
    },
    //转化时间
    formatTime (date, format) {
      if (date) {
        date = new Date(date)
        var o = {
          'M+': date.getMonth() + 1, //月份
          'd+': date.getDate(), //日
          'h+': date.getHours(), //小时
          'm+': date.getMinutes(), //分
          's+': date.getSeconds(), //秒
          'q+': Math.floor((date.getMonth() + 3) / 3), //季度
          'S': date.getMilliseconds() //毫秒
        }
        var fmt = format || 'yyyy-MM-dd hh:mm'
        if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
        for (var k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
        }
        return fmt
      } else {
        return ''
      }
    },
    handleRadio() {
      this.queryAlarmsInfoVideo(this.radio)
    }
  }
}
</script>
<style lang='scss' scoped>
    .dic_tree {
        background: #f4f4f4;
        font-size: 14px;
        transform: translateX(-6px);
        margin-top: 20px;
    }
    .dic_tree /deep/ .el-tree-node__content {
        padding-left: 0px !important;
        .el-checkbox__inner{
            left:4px;
        }
    }

    .dic_tree /deep/ .el-tree-node {
        position: relative;
        padding-left: 16px;
    }

    .dic_tree /deep/ .el-tree-node__children {
        padding-left: 8px;
    }

    .dic_tree /deep/ .el-tree-node :last-child:before {
        height: 38px;
    }

    .dic_tree /deep/ .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .dic_tree /deep/ .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:before {
        border-left: 1px dashed #bfbfbf;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .dic_tree /deep/ .el-tree-node:after {
        border-top: 1px dashed #bfbfbf;
        height: 20px;
        top: 12px;
        width: 37px;
    }
    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .tree-container {
        /* 树的parent，样式自定 */
    }
    .dic_tree /deep/ .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    .dic_tree /deep/ .el-icon-caret-right:before {
        background: url("../../../assets/images/add.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
    .dic_tree
    /deep/
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        background: url("../../../assets/images/sub.png");
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        font-size: 18px;
        background-size: 18px;
    }
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon{
  padding:0 2px 0 0;
}
    .dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
        opacity: 0;
    }
    .dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
      // margin-left: -15px !important;
    }
</style>
<style lang='scss'>
.el-select{
  width: 100%;
}
.el-date-editor.el-input{
  width: 100%;
}
.inputWidth {
  width: 130px;
}

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

.monitor_playback {
  .el-card__body {
    padding: 0;
  }
  .monitor_playback_left_bottom {
    height: 233px;
    .header_title {
      font-size: 16px;
      height: 40px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      background: #e1edf4;
      line-height: 40px;
      padding-left: 20px;
      margin-bottom: 20px;
    }
  }

  .el-aside {
    .el-tree {
      background: #f4f4f4;
      font-size: 12px;
      overflow-y:auto;
      height: 440px;
      .el-tree-node__content {
        width: 100%;
      }
    }
    .el-card__body {
      padding: 0;
    }
    .el-card {
      height: 460px;
      background: #f4f4f4;
    }
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
      background-color: #f4f4f4 !important;
      color: #fff !important;
      .el-button--text {
        color: #fff;
      }
      .custom-tree-node {
        background-color: #35aff8 !important;
      }
    }
  }

  .monitor_playback_left_top {
    height: 50px;
    background: #e1edf4;
    padding-left: 10px;
    .monitor_playback_left_topL {
      height: 40px;
      padding-top: 10px;
      float: left;
      div {
        height: 40px;
        float: left;
        padding: 0 10px 0 10px;
        line-height: 40px;
        cursor: pointer;
        font-size: 14px;
        border: 1px solid transparent;
        span {
          color: #35aff8;
        }
      }
      div.on {
        background: #fff;
        border: 1px solid #c3c3c3;
        border-bottom: none;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
    }
    .monitor_playback_left_topR {
      float: right;
      margin-top: 10px;
      .el-input {
        width: 109px;
      }
    }
  }
  .vidoeSizeButton {
    width: 100%;
    height: 25px;
    background: #4f789d;
    padding-top: 5px;
    .vidoeSizeButton_buttonList {
      float: right;
      .vidoeSizeButton_button {
        height: 18px;
        width: 30px;
        background: #476c8d;
        color: #b3bfcb;
        line-height: 18px;
        text-align: center;
        float: left;
        margin-right: 2px;
        font-size: 12px;
        cursor: pointer;
      }
      .vidoeSizeButton_button.on {
        color: #fff;
        background: #6186a7;
      }
    }
  }
  .eventData {
    padding: 20px;
    .num {
      font-size: 12px;
      span {
        color: #35aff8;
      }
    }
    .eventDataList {
      padding-top: 10px;
      .eventDataListNow {
        height: 106px;
        border: 1px solid rgba(195, 195, 195, 1);
        box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.2);
        margin-top: 10px;
        .header_title {
          font-size: 16px;
          height: 40px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          background: #e1edf4;
          line-height: 40px;
          padding-left: 20px;
          margin-bottom: 10px;
        }
        p {
          font-size: 12px;
          margin: 0;
          padding-left: 20px;
        }
      }
    }
  }
}
</style>
