<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>
              <el-tree style='margin-top:10px;' :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' >
                <span class="custom-tree-node" style='width:100%;line-height: 18px;' slot-scope="{ node, data }">
                  <span v-if="node.data.level != 6 && node.data.iconB" class="el-icon-wq-treeIcon1"></span>
                  <span v-if="node.data.level != 6 && !node.data.iconB" class="el-icon-wq-treeIcon"></span>
                  <span v-if="node.data.level == 6 && node.data.type=='枪机'" class="el-icon-wq-treeQiang"></span>
                  <span v-if="node.data.level == 6 && node.data.type!='枪机'" class="el-icon-wq-treeQiu"></span>
                  <span>&nbsp;{{node.label}}</span>
                </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="100px">
                <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 type="primary" @click="queryPlay()">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div v-if="activeName == 2" style="padding-top:20px;">
            <el-form ref="form" :model="formEventData" label-width="100px">
              <el-form-item label="事件名称:">
                 <el-date-picker v-model="formEventData.name" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="事件等级:">
                 <el-date-picker v-model="formEventData.level" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="开始时间:">
                 <el-date-picker v-model="formEventData.staTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:">
                <el-date-picker v-model="formEventData.endTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
              </el-form-item>

              <el-form-item label-width="130px">
                <el-button type="primary">查询</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" >
                    <el-radio v-model="item.radio" label="1">{{item.eventName}}</el-radio>
                  </div>
                  <p>资源点名称：{{item.name}}</p>
                  <p>发生时间：{{item.time}}</p>
                </div>
              </div>
            </div>
          </div>

      </el-aside>

      <el-main style="padding:0px; height:80vh;">
        <el-card>
          <el-row v-for="(rowItem,rowIndex) in videoList.size" :span="24">
            <el-col :style="colHeight" v-for="(colItem,colIndex) in videoList.size" :span="24/videoList.size">
              <div style="height:100%; background:#000;">
                <!-- <video v-if="videoList.list.length" style="width:100%" :src="videoList.list[(rowIndex*videoList.size)+colIndex].src" controls="controls"></video> -->
                <video height="100%" width="100%" :id="'video'+((rowIndex*videoList.size)+colIndex*1)" ref="video" v-if="videoList.list[(rowIndex*videoList.size)+colIndex]" :src="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 class="vidoeSizeButton">
            <div class="vidoeSizeButton_buttonList">
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 1?'on':'']" @click="videoClick(1)">1x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 2?'on':'']" @click="videoClick(2)">4x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 3?'on':'']" @click="videoClick(3)">9x</div>
              <div class="vidoeSizeButton_button" :class="[videoButtonSta == 4?'on':'']" @click="videoClick(4)">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 {
      colHeight: '',
      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'
      },
      currentNode: {},
      activeName: 1,
      videoList: {
        size: 1,
        list: [],
        idList: []
      },
      formData: {
        staTime: '',
        endTime: ''
      },
      formEventData: {
        name: '',
        level: '',
        staTime: '',
        endTime: ''
      },
      eventDataList: [{
        name: '资源名',
        time: '2020-06-24 10:00:00',
        eventName: '事件名',
        radio: ''
      }]

    }
  },
  components: {
  },
  created () {
    that = this
    this.initTreeStationMap()
  },
  methods: {
    videoClick(now) {
      this.videoButtonSta = now
      this.videoList.size = now
    },
    handleClick(tab, event) { //左侧tab切换
      this.activeName = tab
    },
    queryPlay() { //查询时间段回放
      if (this.currentNode.addressCode) {
        if (this.formData.staTime) {
          // alert("成功")
          console.log(this.currentNode)
          console.log(this.formData.staTime)
          console.log(this.formData.endTime)
          this.$http({
              url: this.$http.adornUrlEq('/camera/cameras'),
              method: 'post',
              data: {
                ip: data.bean.addressCode,
                port: data.bean.port,
                username: data.bean.username,
                password: data.bean.password,
                channel: data.bean.byx1,
                stream: 'main'
              }
            }).then(data => {
              console.log(data)
              if (data && data.code === 0) {
                this.videoSrc = 'http://www.crsh.cn/live?port=1935&app=live&stream=' + data.token
                //视频连接
                let flvPlayer = null
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
                    isLive: true, //直播模式
                    hasAudio: false, //关闭音频
                    hasVideo: true,
                    stashInitialSize: 128,
                    enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
                    url: this.videoSrc
                })
                this.$nextTick(function() {
                  console.log(this.$refs.video[0])
                  flvPlayer.attachMediaElement(this.$refs.video)
                  flvPlayer.load()
                })
              }
            }).then(() => {
              // this.$message.error('网络错误，请确认网络是否联通正常!')
            })
        } else {
          this.$message.error('请选择开始时间!')
        }
      } else {
        this.$message.error('请选择回放的监控设备!')
      }
      // this.currentNode
      // alert(1)
    },

    //初始化站点下的资源点
    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
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.treeData = data.nodes
          this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
          Vue.set(this.treeData[0], 'iconB', true)
        }
      }).then(() => {
        if (this.checkedData.sId) {
          this.defaultExpandedKeys = [this.treeData[0].id]
          //设置选中的节点
          this.$refs.tree.setCurrentNode(this.treeData[0])
        }
      })
    },
    //线路资源点树节点点击事件
    handleNodeClick(node) {
      this.currentNode = node
      let name = node.name
      let id = node.id

      this.treeData.forEach(res => {
        if (res.id === id) {
          Vue.set(res, 'iconB', true)
        } else {
          Vue.set(res, 'iconB', false)
        }
      })
      if (node.level === 4) { //子系统

      } else if (node.level === 6) { //资源点1
        if (this.videoList.idList.indexOf(node.id) > -1) {
          return false
        }
        this.$http({
          url: this.$http.adornUrlEq('/camera/cameras'),
          method: 'post',
          data: {
            ip: node.addressCode,
            port: node.port,
            username: node.username,
            password: node.password,
            channel: node.byx1,
            stream: 'sub'
          }
        }).then(data => {
          if (data && data.code === 0) {
            this.videoList.list.push('http://www.crsh.cn/live?port=1935&app=live&stream=' + data.token)
            this.videoList.idList.push(node.id)
            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
            }

            this.colHeight = 'height:' + window.innerHeight * 0.85 / this.videoList.size + 'px'
            //视频连接
            let flvPlayer = null
            flvPlayer = flvjs.createPlayer({
                type: 'flv',
                enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
                isLive: true, //直播模式
                hasAudio: false, //关闭音频
                hasVideo: true,
                stashInitialSize: 128,
                enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
                url: this.videoList.list[this.videoList.list.length - 1]
            })
            this.$nextTick(function() {
              console.log(this.$refs.video[this.videoList.list.length - 1])
              flvPlayer.attachMediaElement(this.$refs.video[this.videoList.list.length - 1])
              flvPlayer.load()
            })
          }
        }).then(() => {
          // if (this.checkedData.sId) {
          //   this.defaultExpandedKeys = [this.treeData[0].id]
          //   //设置选中的节点
          //   this.$refs.tree.setCurrentNode(this.treeData[0])
          // }
        })
      }
    }

  }

}
</script>
<style>

.inputWidth{
  width: 210px;
}

</style>
<style lang='scss' scoped>

</style>
<style lang='scss'>
.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;
      .el-tree-node__content{
        width: 100%;
      }
    }
    .el-card__body{
      padding: 0;
    }
    .el-card {
      height: 560px;
      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;
        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>
