<template>
  <div class="pomentWrap" style="background-color: black">
    <el-row :gutter="5" type="flex" justify="space-around">
      <el-col :xs="12" :sm="12" :md="6" :lg="4" :xl="4">
        <div class="topBar">
          <el-tree id="videoTree"
                  :data="treeData"
                  :props="treeProps"
                  ref="Tree"
                  node-key="id"
                  :highlight-current="true"
                  :default-expanded-keys="[0]"
                  :default-checked-keys="[]"
                  @node-click="nodeClick"
                  style="background-color: black; color: #a5a5a8"
          >
            <template slot-scope="{node, data}">
              <span>
                <i class="'#' + iconArrClass[data.level]" aria-hidden="true">
                </i>
                {{node.label}}
              </span>
            </template>
          </el-tree>
        </div>
       <!-- <div class="controlBtn">
          <div class="directionBg1">
            <div class="directionBg2">
              <a data-action="upleft" class="button upleft"></a>
              <a data-action="up" class="button up"></a>
              <a data-action="upright" class="button upright"></a>
              <a data-action="left" class="button left"></a>
              <a data-action="pointgoto" class="button reset"></a>
              <a data-action="right" class="button right"></a>
              <a data-action="downleft" class="button downleft"></a>
              <a data-action="down" class="button down"></a>
              <a data-action="downright" class="button downright"></a>
            </div>
          </div>
        </div>-->
      </el-col>

      <el-col :xs="12" :sm="12" :md="18" :lg="20" :xl="20">
          <el-row class="row">
            <div class="box" :class="[flag == 1 ? 'boxred' : 'boxblack']">
              <div id="newplay1" style="width:100%; height:100%;" @click="chooseWindow(1)">
                <span class="novideo">无信号</span>
              </div>
            </div>
            <div class="box" :class="[flag == 2 ? 'boxred' : 'boxblack']">
              <div id="newplay2" style="width:100%; height:100%;" @click="chooseWindow(2)">
                <span class="novideo">无信号</span>
              </div>
            </div>
          </el-row>

          <el-row class="row">
            <div class="box" :class="[flag == 3 ? 'boxred' : 'boxblack']">
              <div id="newplay3" style="width:100%; height:100%;" @click="chooseWindow(3)">
                <span class="novideo">无信号</span>
              </div>
            </div>
            <div class="box" :class="[flag == 4 ? 'boxred' : 'boxblack']">
              <div id="newplay4" style="width:100%; height:100%;" @click="chooseWindow(4)">
                <span class="novideo">无信号</span>
              </div>
            </div>
          </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scped>
  @import '@/utils/public.scss';
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #a5a5a8;
    color: #454547;
  }
  .el-tree--highlight-current .el-tree-node > .el-tree-node__content:hover {
    background-color: #a5a5a8;
    color: white;
  }
  main > div {
    background: #ffffff;
    height: calc(100vh - 110px) !important;
    padding: 0px 0px 0px 10px !important;
  }
  .row{
    display: flex;
    .box{
      width: 100%;
      text-align: center;
      background-color: black;
    }
  }
  .boxred{
    border: 1px solid red;
  }
  .boxblack{
    border: 1px solid white;
  }
  .novideo{
    /*padding: 147px 0px 147px 0px;
    display: block;*/
    line-height: calc((100vh - 114px)/2);
    color: white;
  }
/*  .nodeImg1{
    background: url('../../assets/qiye.png') no-repeat center,
  }
  .nodeImg2{
    background: url("../../assets/enterprises.png") no-repeat center,
  }
  .nodeImg3{
    background: url("../../assets/video.png") no-repeat center,
  }*/
</style>

<script lang="ts">
  import { Component, Vue, Provide, Watch } from "vue-property-decorator";
  @Component({
    components: {  }
  })
  export default class VideoList extends Vue {
    @Provide() loading: Boolean = false;
    @Provide() playerWindow: String = "newplay1";
    @Provide() flag: number = 1;
    @Provide() treeData: any = [
      {
        enterpriseId: 0,
        name: "企业视频监控",
        level: 0,
        icon: "icon-yh",
        childList: []
      }
    ];
    @Provide() iconArrClass: any = [
      "nodeImg1",
      "nodeImg2",
      "nodeImg3"
    ];
    @Provide() treeProps: Object = {
      children: "childList",
      label: "name"
    };
    @Provide() treecheckedObj: any = {};
    @Provide() ideoController: any = {};

    getTreeData() {
      let that = this;
      (this as any).$axios.get(`/safetyDeviceInfo/getDeviceTree`).then((res: any) => {
        if( res.code == 0 ){
          console.log(res.data);
          that.treeData[0].childList = res.data;
        }
      });
    }
    nodeClick(data: any, node: any, target: any) {
      let that = this;
      that.treecheckedObj = node.data;

      if(node.level == "3"){
        that.playerWindow = 'newplay' + that.flag;
        var player = new WasmPlayer(null, that.playerWindow, null, {Height: true});
        // console.log(that.playerWindow, node.data.deviceNumber)
        player.play('http://27.128.189.137:10001/flv/hls/' + that.treecheckedObj.deviceNumber + '.flv', 1);
        if(that.flag < 4) {
          that.flag++;
        }
      }
    }
    chooseWindow(data: any){
      this.flag = data;
      this.playerWindow = 'newplay' + this.flag;
    }

    created() {
      let that = this;
      that.getTreeData();
    }
  }
</script>
