<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;height:99%;margin-left: 20px;" v-bind:title="item.name" >
                            <div style="width:100%;height:99%;">
                                <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": "9",
                            "text1": '志愿者服务站',
                            "name": '志愿者服务站',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "extenddata":"sd",
                            "icon":"img/icon/du.png",
                        },
                        {
                            "marktype": "27",
                            "text1": '志愿者名单',
                            "name": '志愿者名单',
                            "show": true,
                            "layers": [],
                            "children": [],
                            "extenddata":"mpwk",
                            "icon":"img/icon/fang.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;
                      //console.log(this.dataxself);
                    }
            },data_filter: function () {
                  return this.datax;
           }
        },
        mounted(){//挂载的时候执行
            console.log("zdry"+this.data_filter.data);
         this.tree_list[0].children=this.data_filter.data[0].data;
         this.tree_list[1].children=this.data_filter.data[1].data;
        
        }
  }
</script>
<style >
  /* @import "../../js/layui/css/layui.css"; */

</style>

