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

     <div style="float:left;margin-left:3rem;margin-top:1rem">
           <mapdiv ref='mapv' style="height:100rem;width:115rem" ></mapdiv>
      </div>

  </div>
</template>

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

export default {
    data() {
      return {
        videoData:[],
        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:''
      };
    },
    components:{
      mapdiv
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
        this.getList();
    },
    methods:{
       getList() {
            listVideo(this.queryParams).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(){
          var arry = this.$refs.tree.getCheckedNodes()
          var pontArry = this.$refs.mapdiv.pointArry;
          for(var index in arry){
                var obj = arry[index]
                if(pontArry.get(obj.id) == null){
                       this.$refs.mapdiv.pointArry();
                }
          }
      }
    }
};
</script>

<style>
     .leftTree{
          float:left;
          width:34rem;
     }
</style>

