<template>
  <div class="maplayertree">
    <div class="layer-type" v-for="(item,index) in menu_tree" :key="index" v-show="item.nodetype == 1" :style="{'border-left':'2px solid '+item.color}">
      <div class="typeinfo" @click="showChild(item)" >
        <div style="float:left;"><img :src="item.icon ? item.icon : '/images/map/layer-type-7.png'" alt=""></div>
        <div style="float:left;margin-left:15px;">
          <p style="font-weight:bold;line-height:32px;">{{item.name}}</p>
          <p :style="{'color':item.color}">{{item.children.length}}</p>
        </div>
      </div>
      <div class="layers-container" v-show="item.children&&item.children.length>0 && item.children[0].layertype">
        <p v-for="(it,idx) in item.children" :key="idx"   :style="{'color':it.show ? '#ff0000':'#00FFB3'}">
          <img src="/images/map/box.png" width="20px" style="position:relative;top:4px;" alt="">
          <span @click="$emit('addLayer',it);it.show = !it.show">{{it.name}}</span>
          <span class="edit-btn"  @click="$emit('editLayer',it)"><i class="el-icon-edit"></i></span>
        </p>
      </div>
      <MapLayerTree @addLayer="addLayer" @editLayer="editLayer" v-show="item.show" :menu_tree="item.children" :level="level+1"></MapLayerTree>
    </div>
  </div>
</template>
<script>
export default {
  name:"MapLayerTree",
  props:["menu_tree","level"],
  data(){
    return {
      
    }
  },

  methods:{
    showChild(item){
      item.show = !item.show
    },
    addLayer(item){

      // if(item.show == false){
      //   item.show = true;
      // }else if(item.show == true){
      //   item.show = false;
      // }

      this.$emit("addLayer",item);
      
      // item.show = !item.show;
    },
    editLayer(item){
      this.$emit("editLayer",item);
      item.isEdit = !item.isEdit;
    }
  }
}
</script>
<style scoped>
.maplayertree{
  width:100%;
}
.layer-type{
  width:100%;
  min-height:50px;
  margin-left:24px;
  padding-left:12px;
  line-height:10px;
}
.typeinfo:hover{
  cursor:pointer;
}
.typeinfo{
  color:#efefef;
  font-size:15px;
  min-height:50px;
  position: relative;
  left:-40px;
  top:-2px;
}
.typeinfo::after{
  content:"";
  clear:both;
  display: block;
  overflow: hidden;
  height:0;
}
.typeinfo img{
  width:50px;
  height:50px;
  margin:0px;
}

.layers-container{
  width:100%;
  line-height:32px;
  color:#00FFB3;
}

.layers-container p{
  cursor:pointer;
}
.edit-btn{
  margin-left:6px;
  font-weight:bold;
  color:#ccc;
}
</style>