<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,$event)">
                            {{item.name}}
                            <img v-show="item.icon&&index>2" 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": "3",
                            "text1": '涉毒人员',
                            "name": '重点人员1',
                            "color": 'turquoise',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "extenddata":"sd",
                            "icon":"img/icon/du.png",
                        },
                        {
                            "marktype": "4",
                            "text1": '摸排稳控',
                            "name": '重点人员2',
                            "color": 'teal',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "extenddata":"mpwk",
                            "icon":"img/icon/fang.png",
                        },
                        {
                            "marktype": "5",
                            "text1": '刑释人员',
                            "name": '重点人员3',
                            "color": 'cornflowerblue',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/shi.png",
                        }
                       
                        ,
                        {
                            "marktype": "6",
                            "text1": '优抚对象（老退伍战士）',
                            "name": '优抚对象（老退伍战士）',
                            "color": 'coral',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/yfdx.png",
                        },
                        {
                            "marktype": "10",
                            "text1": '退伍军人',
                            "name": '退伍军人',
                            "color": 'OliveDrab',
                            "show": false,
                            "layers": [],
                            "children": [],
                            "extenddata":"soldier",
                            "icon":"img/icon/jr.png",
                        },
                        {
                            "marktype": "1",
                            "text1": '病残',
                            "name": '病残',
                            "color": '#129c29',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/cjr.png",
                            "extenddata":"cj"
                        },
                        {
                            "marktype": "2",
                            "text1": '少数民族人员',
                            "name": '少数民族人员',
                            "color": '#9ACD32',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/ssmz.png"
                        },
                        {
                            "marktype": "7",
                            "text1": '60岁以上独居老人',
                            "name": '60岁以上独居老人',
                            "color": '#778899',
                            "show": false,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/djlr.png",
                            "extenddata":"60djlr"
                        },
                        {
                            "marktype": "9",
                            "text1": '80,90岁老人',
                            "name": '80,90岁老人',
                            "color": '#9c2c8f',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/gllr.png"
                        },
                        {
                            "marktype": "8",
                            "text1": '低保户',
                            "name": '低保户',
                            "color": '#ADD8E6',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/dbh.png"
                        },
                         {
                            "marktype": "11",
                            "text1": '空巢老人',
                            "name": '空巢老人',
                            "color": '#DAA520',
                            "show": false,
                            "layers": [],
                            "children": [],
                            "icon":"img/icon/nc.png"
                        },
                         {
                            "marktype": "qsn",
                            "text1": '青少年',
                            "name": '青少年',
                            "color": 'rgb(204, 214, 207)',
                            "show": false,
                            "layers": [],
                            "children": [],
                            "icon":"img/qsn.png"
                        },
                         {
                            "marktype": "ldls",
                            "text1": '留守儿童',
                            "name": '留守儿童',
                            "color": '#87CEFF',
                            "show": false,
                            "layers": [],
                            "children": [],
                            "icon":"img/ldlschildren.png"
                        }
                  ]
            }
        }, 
        props:["dataxself"],
        methods:{
             locate:function(item){
                 parent.vue_left.locate(item);
             },
             open:function(item,dom){
                 $(".layui-colla-content").css("display","none");
                 if(item.show){
                    $(dom.srcElement).next().css("display","block");
                 }else{
                      $(dom.srcElement).next().css("display","none");
                 }
             
                 //其他逻辑
                item.show=!item.show;
             }
        },
        computed:{
            datax:{
                    set:function(value){
                      //this.dataxself=value;
                      //console.log(value);
                    },get:function(){
                      return this.dataxself.data[0].data;
                      //console.log(this.dataxself);
                    }
            },data_filter: function () {
                  return this.datax;
           }
        },
        mounted(){//挂载的时候执行
     
                for (var i = 0; i < this.tree_list.length; i++) { //遍历本模块的一级树
                    var tempList=[];
                    for (var j = 0; j < this.data_filter.length; j++) { //遍历集合数据，塞入一级树结构中
                    
                        if (this.data_filter[j].marktype && this.data_filter[j].marktype.strcontains(this.tree_list[i].marktype)) {
                            console.log(this.data_filter[j].marktype);
                            tempList.push(this.data_filter[j]);
                        }
                        else if (this.data_filter[j].ldls&& this.tree_list[i].marktype.strcontains("ldls")) {
                             console.log(this.data_filter[j].ldls+this.tree_list[i].marktype);
                            tempList.push(this.data_filter[j]);
                        }
                         else if (this.data_filter[j].qsn&& this.tree_list[i].marktype.strcontains("qsn")) {
                              console.log(this.data_filter[j].ldls+this.tree_list[i].marktype);
                            tempList.push(this.data_filter[j]);
                        }
                    }
                    //chilren tianchong
                    this.tree_list[i].children=tempList;
                }
                console.log(layer);
        }
  }
</script>
<style >
  /* @import "../../js/layui/css/layui.css"; */

</style>

