<template lang="pug">
  <div class='inspect_security'>
    <el-container style='padding-left:0px;'>
      <el-aside width='333px' :style="{height:currentHeight-65+'px'}">
          <el-card class="tree-container">
            <div class="inspect_security_left_top">
              <div class="inspect_security_left_topL">
                <div :class="[activeName==1?'on':'']" @click="handleClick(1)">资源列表</div>
                <div :class="[activeName==2?'on':'']" @click="handleClick(2)">收藏夹</div>
              </div>
              <div style="float:right; margin:5px 5px 0 5px">
                <el-button type="text" size="mini" icon='el-icon-shoucang' @click="treeDataOffClick()"></el-button>
              </div>
              <div class="inspect_security_left_topR">
                <el-input size="mini" suffix-icon="el-icon-search" clearable v-model="searchInput"></el-input>
              </div>
            </div>
            <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :filter-node-method="filterNode" :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:85%;line-height: 18px;' slot-scope="{ node, data }">
                <span v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
                <span v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
                <span v-if="node.data.level == 5" class="el-icon-anjiandian xa-icon"></span>
                <span v-if="node.data.level == 6" class="el-icon-anjianji xa-icon"></span>
                <span>&nbsp{{node.label}}</span>
                <span style="float:right;">
                  <el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 6" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
                </span>
                span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')

              </span>
            </el-tree>
          </el-card>
      </el-aside>

      <el-main style="padding:0px;" :style="{height:currentHeight-65+'px'}">
        <el-card>
          <el-row :span="24">
            <el-col  :span="12">
                <img v-if="video1 == 0" style="height:357px; width:100%" src="@/assets/images/videoImg.png" alt="">
                <video v-if="video1 == 1" style="height:357px; width:100%" ref="video1" muted autoplay controls></video>
            </el-col>
            <el-col  :span="12">
                <img v-if="video2 == 0" style="height:357px; width:100%" src="@/assets/images/videoImg.png" alt="">
                <video v-if="video2 == 1" style="height:357px; width:100%" ref="video2" muted autoplay controls></video>
            </el-col>
          </el-row>
          <el-row :span="24">
            <span style="float:left">&nbsp;&nbsp;&nbsp;操作：&nbsp;</span>
            <el-button type="primary" v-for='(item,index) in actionList' :class="{'isActive':item.active}" v-if="isAuth('inspect:security:'+ item.qxan)" :key='index' @click='turnClick(item)' size="mini" :disabled="clickFlag" style="float:left">{{item.actionName}}</el-button>
          </el-row>
          <el-row :span="24" style="margin-top: 4px;">
            <el-col :span="24">
                <img v-if="video3 == 0" style="height:357px; width:100%" src="@/assets/images/videoImg.png" alt="">
                <video v-if="video3 == 1" style="height:357px; width:100%" ref="video3" muted autoplay controls></video>
            </el-col>
          </el-row>
        </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
    }
  },
  computed: {
    currentHeight() {
      return this.$store.state.d2admin.currentHeight.height
    }
  },
  data () {
    return {
      video1: 0,
      video2: 0,
      video3: 0,
      active1: false,
      active2: false,
      active3: false,
      actionList: [],
      dataListLoading: false,
      clickFlag: false,
      yzdh: '',
      videoButtonSta: 1,
      videoTabSta: 1,
      isCollapse: true,
      treeData: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        level1: 'level'
      },
      nodeKey: 'id',
      checkedData: {
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        subSystem: '',
        tierId: '',
        tierName: '',
        resourceId: '',
        sId: localStorage.getItem('stationId'),
        resourceType: '303310efddb34a2e9bf269bdff8a7dc5',
        subCode: '04'
      },
      currentNode: {},
      activeName: '1',
      colHeight: '',
      searchInput: '',
      videoList: {
        size: 1,
        list: [],
        idList: []
      },
      videoNow: null
    }
  },
  components: {
  },
  watch: {
    searchInput (val) {
      this.$refs.tree.filter(val)
    }
  },
  created () {
    that = this
    this.initTreeStationMap()
    this.clickFlag = false
    this.active1 = false
    this.active2 = false
    this.active3 = false
  },
  methods: {
    // 树节点过滤
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    //获取动作按钮
    getActionList (item) {
      // console.log(item, '1----1')
      this.$http({
        url: this.$http.adornUrlEq('/eWarning/getActionByType'),
        method: 'get',
        params: {
          subCode: item.subCode,
          resourceType: item.type,
          brand: item.brand,
          stationId: localStorage.getItem('stationId')
          }
      }).then(data => {
        if (data && data.code === 0) {
          if (data.map && data.map.actions) {
            // console.log(data.map.actions, '2----2')
            data.map.actions.forEach(element => {
              this.actionList.push(element)
            })
          }
          // console.log(this.actionList, '----')
        }
      })
    },
    videoClick (now) {
      if (now) {
        this.videoNow = now.data
      } else {
        this.videoNow = null
      }
    },
    //控制安检机皮带,1=停止,2=正转，3=反转
    turnClick(item) {
      if (this.currentNode.id) {
        this.clickFlag = true
        this.dataListLoading = true
        this.actionList.forEach(element => {
          if (element.id === item.id) {
            Vue.set(element, 'active', true)
          } else {
            Vue.set(element, 'active', false)
          }
        })
        this.$http({
          url: this.$http.adornUrlEq('/camera/inspectTurn'),
          method: 'post',
          data: {
            id: this.currentNode.id,
            stationId: this.currentNode.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3,
            valueInfo: item.valueInfo,
            actionName: item.actionName
          }
        }).then(data => {
          this.dataListLoading = false
          this.clickFlag = false
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.saveLog(1, item.actionName)// 执行结果 成功 1  失败 2
          } else {
            this.$message.error(data.msg)
            if (data && data.code === 3) {

            } else {
              this.saveLog(2, item.actionName)// 执行结果 成功 1  失败 2
            }
          }
        })
      } else {
        this.$message.warning('请先选择需要操控的安检机')
      }
    },
    //调用日志保存记录操作指令
    saveLog (result, actionName) {
      this.$http({
        url: this.$http.adornUrlEq('/orSafetyCheck/save'),
        method: 'post',
        data: {
          actionName: actionName,
          resourceId: this.currentNode.id,
          stationId: this.currentNode.stationId,
          type: this.currentNode.type,
          result: result
        }
      }).then(data => {

      })
    },
    handleClick (tab, event) { //左侧tab切换
      if (tab) {
        this.activeName = tab
      }
      if (this.activeName == 1) {
        this.initTreeStationMap()
      } else {
        this.initTreeStationMap(true)
      }
    },
    videoTabClick (now) {
      this.videoTabSta = now
    },
    treeDataDeleteClick (node, data) { //左侧tree取消收藏按钮
      this.$confirm('确认取消该收藏?', '取消收藏', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
      .then(() => {
        this.$http({
          url: this.$http.adornUrlEq('/liEnshrine/delete'),
          method: 'post',
          data: {
            resourceId: node.data.id,
            stationId: this.checkedData.sId
          }
        }).then(data => {
          if (data && data.code === 0) {
            this.$message.success('取消收藏成功')
            this.initTreeStationMap(true)
          }
        })
      })
      .catch(() => {})
    },
    treeDataOffClick () { //左侧tree收藏按钮
      let node = this.$refs.tree.getCurrentNode()
      if (node.level != 6) {
        this.$message.warning('只能收藏资源点')
        return
      }
      this.$http({
        url: this.$http.adornUrlEq('/liEnshrine/save'),
        method: 'post',
        data: {
          resourceId: node.id,
          stationId: this.checkedData.sId
        }
      }).then(data => {
        if (data && data.code === 0) {
          if (data.msg === '收藏成功') {
            this.$message.success(data.msg)
          } else {
            this.$message.warning(data.msg)
          }
        }
      })
    },
    //初始化站点下的资源点
    initTreeStationMap (save) {
      this.clickFlag = false
      this.active1 = false
      this.active2 = false
      this.active3 = false
      this.video1 = 0
      this.video2 = 0
      this.video3 = 0
      let url = ''
      if (!save) { // 摄像头列表接口路径
        url = this.$http.adornUrlEq('/liResource/getAJStationMapCodeTreeList')
      } else { // 收藏夹接口路径
        url = this.$http.adornUrlEq('/liEnshrine/getAjEnshrineStationMapTreeList')
      }
      this.$http({
        url: url,
        method: 'post',
        data: {
          subCode: this.checkedData.subCode,
          stationId: this.checkedData.sId,
          resourceType: this.checkedData.resourceType
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.treeData = data.nodes
          this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
        }
      }).then(() => {
        if (this.treeData && this.treeData.length > 0) {
          this.defaultExpandedKeys = [this.treeData[0].id]
          Vue.set(this.treeData[0], 'iconB', true)
          //设置选中的节点
          this.$nextTick(() => {
            this.$refs.tree.setCurrentNode(this.treeData[0])
          })
          for (let index = 0; index < this.treeData.length; index++) {
            var children = this.treeData[index].children
            if (children && children.length > 0) {
              var node = children[0]
              this.handleNodeClick(node)
              Vue.set(this.treeData[index].children[0], 'iconB', true)
              //设置选中的节点
              this.$nextTick(() => {
                this.$refs.tree.setCurrentNode(this.treeData[index].children[0])
              })
              return
            }
          }
        }
      })
    },
    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.actionList = []
      // console.log('选中树节点251', node)
      this.currentNode = node
      let name = node.name
      let id = node.id
      this.isFlag(this.treeData, id)

      if (node.level === 4) { //子系统
        this.currentNode = null
      } else if (node.level === 6) { //资源点1
        this.getActionList(node)

        this.$http({
          url: this.$http.adornUrlEq(`/liResource/inspectGl/${this.currentNode.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(data => {
          if (data && data.code === 0) {
            if (data.list) {
              for (let index = 0; index < 2; index++) {
                var lir = data.list[index]
                console.log(lir)
                //安检机前后摄像头，实时视频播放
                this.videoPlay(lir.id, lir.stationId, index)
              }
            }
          } else {
            this.$message.error('网络错误，请确认网络是否联通正常!')
          }
        })
        console.log('node:', node)
        if (node.addressCode) {
          console.log('安检机X光机，实时视频播放')
          //安检机X光机，实时视频播放
          this.videoPlay(node.id, node.stationId, 2)
        }
      }
    },
    //播放实时视频
    videoPlay(id, stationId, pd) {
      // var src = 'ws://10.20.72.26:8000/live/' + channel + '.flv'
      var src = ''
      this.$http({
        url: this.$http.adornUrlEq('/camera/camerasPlay'),
        method: 'post',
        data: {
          id: id,
          stationId: stationId,
          userId: localStorage.getItem('userId'),
          levelType: 1,
          controlType: 3
        }
      }).then(data => {
        src = data.url
        if (flvjs.isSupported()) {
          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: src
          })
          if (pd == 0) {
            this.video1 = 1
          } else if (pd == 1) {
            this.video2 = 1
          } else if (pd == 2) {
            this.video3 = 1
          }
          setTimeout(() => { //设置延迟执行
            this.$nextTick(function () {
              if (pd == 0) {
                flvPlayer.attachMediaElement(this.$refs.video1)
              } else if (pd == 1) {
                flvPlayer.attachMediaElement(this.$refs.video2)
              } else if (pd == 2) {
                flvPlayer.attachMediaElement(this.$refs.video3)
              }
              flvPlayer.load()
              flvPlayer.play()
            })
          }, 1000)
        }
      })
    }
  }
}
</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;
    }

    .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: 33px;
    }
    .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;
    }
</style>
<style lang='scss'>
.inputWidth {
  width: 130px;
}

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

.inspect_security {
  .el-card__body {
    padding: 0;
    border: none;
  }
  .el-aside {
    .el-tree {
      background: #f4f4f4;
      font-size: 12px;
      .el-tree-node__content {
        width: 100%;
      }
    }
    .el-card__body {
      padding: 0;
    }
    .el-card {
      height: 99%;
      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;
      }
    }
  }

  .inspect_security_left_top {
    height: 50px;
    background: #e1edf4;
    padding-left: 10px;
    .inspect_security_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;
      }
    }
    .inspect_security_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;
      }
    }
  }

  .isActive {
    background-color :greenyellow !important;
  }
}
</style>