<template>
  <div class="app-container">
      <div class='leftTree'>
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
            </el-input>
            <div style="height:90vh">
                  <el-scrollbar style="height:110%;">
                        <el-tree
                            :data="videoData"
                            :load="loadNode"
                            lazy
                            show-checkbox
                            node-key="id"
                            :default-expanded-keys="expandedKeys"
                            :default-checked-keys="[5]"
                            :props="defaultProps"
                            :filter-node-method="filterNode"
                            ref="tree"
                            @check-change = 'treeChange'
                            style="color:#C5D0D4;background-color:#04283C;"
                            >
                        </el-tree>
                  </el-scrollbar>
            </div>
      </div>

     <div style="position: absolute;right:0;top:0;width: 100%;height: 100%;padding-left:33rem">
           <mapdiv ref='mapv' style="height:100rem;width:100%" ></mapdiv>
      </div>

  </div>
</template>

<script>
import { listVideo } from "@/api/qdtl/video";
import { httpRequest } from "@/api/data/http";
import mapdiv from "@/components/map/index.vue"

export default {
    data() {
      return {
        videoData:[],
        expandedKeys:[],
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        filterText:'',
        jsonArry:[],
        pointIdArry:[],
        regionIndexCode:'',
        queryParams:{
             url:'http://2.90.220.252:9017/artemis-web/debug',
             params:'{"httpMethod":"POST","path":"/api/resource/v1/regions","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
        },
         videoParams:{
             url:'http://2.90.220.252:9017/artemis-web/debug',
            //  params:'{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "'+this.regionIndexCode+'"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
        },
      };
    },
    components:{
      mapdiv
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
        this.getvideo();
        // this.getList();
    },
    methods:{
        loadNode(node, resolve){
        if (node.level > 3) return resolve([]);
        if(node.level <3){
              var childrens = []
              for(var index in this.jsonArry){
                      if(node.data.id == this.jsonArry[index].parentIndexCode){
                           childrens.push(this.jsonArry[index]);
                      }
              }
                 resolve(childrens);
        }

        if(node.level === 3){
             this.videoParams.params = '{"httpMethod":"POST","path":"/api/resource/v1/regions/regionIndexCode/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 200,"regionIndexCode": "'+node.data.indexCode+'"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
                  httpRequest(this.videoParams).then(data =>{
                        var json = JSON.parse(data.data);
                        // console.log(json);
                        var childerns = [];
                        for(var index in json.data.list){
                          // console.log();
                              var obj = json.data.list[index];
                              obj.id = obj.cameraIndexCode;
                              obj.label = obj.name;
                              obj.data = obj;
                              obj.lnglat = obj.longitude +','+obj.latitude;
                              childerns.push(obj);
                        }
                        resolve(childerns);
                  });
        }
        },
        getvideo(){
           httpRequest(this.queryParams).then(response => {
              //  console.log(response);
               var json = JSON.parse(response.data);
               console.log(json);
               for(var index in json.data.list){
                    obj = json.data.list[index]
                    obj.id = obj.indexCode;
                    obj.label = obj.name;
                    obj.data = obj;
                    var obj = json.data.list[index]
                    obj.id = obj.indexCode;
                    obj.label = obj.name;
                    obj.data = obj;
                    this.jsonArry.push(obj);
                    if(obj.parentIndexCode == -1){
                           this.videoData.push(obj);
                           this.expandedKeys.push(obj.id);
                    }
                    // this.expandedKeys.push(obj.id);
                    if(this.videoData.length > 0){
                          if(obj.parentIndexCode == this.videoData[0].id){
                            this.expandedKeys.push(obj.id);
                          }
                    }
                  
               }
           });
        },
      getTreeChildren(obj,data){
            obj.children = []
            for(var index in data){
                  if(obj.id = data[index].parentIndexCode){
                          obj.children.push(data[index]);
                  }
            }
      },
       getList() {
            listVideo().then(response => {
                console.log(response);
                this.videoData= response.data
                 console.log(this.videoData);
                 for(var index in this.videoData){
                    var obj = this.videoData[index];
                    obj.label = obj.areaName;
                    obj.children = []
                    for(var i in obj.monitors){
                         var monitor = obj.monitors[i]
                         monitor.data = monitor;
                         monitor.label = monitor.name;
                         obj.children.push(monitor);
                    }
                 }
                 console.log(this.videoData);
            });
       },
      filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
      },
      treeChange(data, node){
          console.log(data);
          console.log(node);
          var arry = this.$refs.tree.getCheckedNodes()
          var pointArry = this.$refs.mapv.pointArry;
          console.log(pointArry);
          if(data.lnglat != null){
              if(node == false){
                   this.$refs.mapv.removeLayer(data.id);
              }else if(node == true){
                   this.$refs.mapv.addMarker(data.lnglat.split(','),'video.png',0.8,data.id,data,'video');
              }

          }
          // for(var index in arry){
          //       var obj = arry[index]
          //       if(obj.lnglat){
          //           if(pointArry.get('obj') == null){
          //                 console.log(obj.lnglat);
          //                 this.$refs.mapv.addMarker(obj.lnglat.split(','),'监控 (2) 拷贝 20.png',0.2,obj.id);
          //                 this.pointIdArry.push(obj.id);
          //           }
          //       }
          // }
       

      }
    }
};
</script>

<style>
     .leftTree{
          float:left;
          width:32rem;
          background-color:#04283C;
          padding: 10px;
          padding-top:0 ;
          min-height: 95vh;
          /* max-height:96vh */
     }
     .app-container{
       position: relative;
       padding:0;
     }

    .el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}
    .el-tree>.el-tree-node{
    height: 90vh;
    min-width: 100%;
    display:inline-block;
    }
</style>

