<template>
   <div>
       <div style="height: 60px; text-align: center; font-size: 20px; display: block; font-weight: bold; background-color: #0071a9; color: #fff; line-height: 60px; ">
                        <span class="lib_title">{{dataxself.title}}</span>
        </div>
        
         <div style="height: calc(100% - 60px);overflow-y:auto">
                <div class="layui-collapse collaps" lay-filter="test3" lay-accordion="">
                    <div class="layui-colla-item" v-for="(item,index) in tree_list">
                        <h2 class="layui-colla-title" v-bind:style="{backgroundColor:item.color}" @click="open(item,index,$event)">
                            {{item.name}}
                            <img v-show="item.icon" style="height:20px;width:20px;margin-top: 10px;float: right" v-bind:src="item.icon">
                        </h2>
                        <div class="layui-colla-content" style="height:217px;margin-left: 20px;" v-bind:title="item.name" >
                            <div style="width:100%;height:225px;">
                                <div class="TreeWrap">
                                    <div v-for="(item1,index1) in item.children" @click="locate(item1)" style="cursor:pointer">
                                            {{item1.name}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
   </div>
</template>

<script>
  module.exports = {
        data: function() {
            return {
                  searchText:"",
                  tree_list:[
                      {
                            "marktype": "1",
                            "text1": '涉稳人头',
                            "name": '涉稳人头',
                            "color": 'turquoise',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/rmfx.png",
                        },
                        {
                            "marktype": "2",
                            "text1": '涉军人头',
                            "name": '涉军人头',
                            "color": 'teal',
                            "show": true,
                            "layers": [],
                            "children": [],
                           "icon":"img/rmfx.png",
                        },
                        {
                            "marktype": "3",
                            "text1": '涉外企业',
                            "name": '涉外企业',
                            "color": 'cornflowerblue',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/rmfx.png",
                        }
                       
                        ,
                        {
                            "marktype": "4",
                            "text1": '暂住外籍人员',
                            "name": '暂住外籍人员',
                            "color": 'coral',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/rmfx.png",
                        },
                        {
                            "marktype": "5",
                            "text1": '涉疆人员',
                            "name": '涉疆人员',
                            "color": 'OliveDrab',
                            "show": false,
                            "layers": [],
                            "children": [],
                            "extenddata":"soldier",
                            "icon":"img/rmfx.png",
                        },
                        {
                            "marktype": "6",
                            "text1": '宗教场所',
                            "name": '宗教场所',
                            "color": '#129c29',
                            "show": true,
                            "layers": [],
                            "children": [],
                           "icon":"img/rmfx.png",
                            "extenddata":"cj"
                        },
                        {
                            "marktype": "7",
                            "text1": '防线网格员',
                            "name": '防线网格员',
                            "color": '#9ACD32',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/rmfx.png",
                        },
                        {
                            "marktype": "8",
                            "text1": '防线网格信息',
                            "name": '防线网格信息',
                            "color": '#778899',
                            "show": false,
                            "layers": [],
                            "children": [],
                            "icon":"img/rmfx.png",
                            "extenddata":"60djlr"
                        }
                  ]
            }
        }, 
        props:["dataxself"],
        methods:{
             locate:function(item){
                 parent.vue_left.locate(item);
             },
             open:function(item,n,dom){
                 $(".layui-colla-content").css("display","none");
                 if(item.show){
                    $(dom.srcElement).next().css("display","block");
                 }else{
                      $(dom.srcElement).next().css("display","none");
                 }
           
                if(n==6&&item.show){                            
                    parent.vue_top.setLayerStatusbyId(this.data_filter.data[0].layerID,true);
                    parent.vue_top.setLayerStatusbyId(this.data_filter.data[1].layerID,true);
                }
                if(n!=6){
                    parent.vue_top.setLayerStatusbyId(this.data_filter.data[1].layerID,!item.show);
                    parent.vue_top.setLayerStatusbyId(this.data_filter.data[0].layerID,true);
                }


                 //其他逻辑
                item.show=!item.show;
             }
        },
        computed:{
            datax:{
                    set:function(value){
                      //this.dataxself=value;
                      //console.log(value);
                    },get:function(){
                      return this.dataxself;
                      //console.log(this.dataxself);
                    }
            },data_filter: function () {
                  return this.datax;
           }
        },
        mounted(){//挂载的时候执行
                for (var i = 0; i < this.tree_list.length-2; i++) { //遍历本模块的一级树
                    var tempList=[];               
                   
                     console.log(this.data_filter.data[0].length);
                    for (var j = 0; j < this.data_filter.data[0].data.length; j++) { //遍历集合数据，塞入一级树结构中
                        if (this.data_filter.data[0].data[j].marktype && this.data_filter.data[0].data[j].marktype.strcontains(this.tree_list[i].marktype)) {
                            tempList.push(this.data_filter.data[0].data[j]);
                        }
                    }
                    //chilren tianchong
                    this.tree_list[i].children=tempList;
                }        

                this.tree_list[6].children=this.data_filter.data[1].data;
        }
  }
</script>
<style >
  /* @import "../../js/layui/css/layui.css"; */

</style>

