<template>
<div class="menu-panel">
  <div class="org-list" v-for="org in data">
    <div class="org-label">
      <span>{{org.label}}</span>
    </div>
    <div class="group-list" v-for="group in org.children">
      <div class="group-label">
        <span>{{group.label}}</span>
      </div>
      <div class="menu-panel-item" v-for="node in group.children"   @click="handlePanelItemClick(node,node.label,org.label)">
        <span :title='node.label.length<=7 ? "" : node.label'>{{node.label}}</span>
      </div>
      <div class="menu-panel-empty" v-if="data.length === 0">
        
      </div>
      
    </div>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {

    };
  },
  props: {
    data: {
      default: [],
    }
  },
  methods: {
    handlePanelItemClick(data,panel,org) {
      var path = data && data.path; // 获得小磁贴的path
      if(path) {
        this.$parent.showMenu = false;    
        this.$root.$children[0].addEditableTabs(path, data);  
      }
      this.$emit("handlePanelItemClick",org);//将头部标题传至父组件
    },
    panelHover(panel,org){
    	console.log(panel+'.....panelHover');
    	console.log(org+'.....org');
    }
  }
};
</script>
<style>
.menu-panel {
  /* height: 368px; */
  /* overflow: auto; */
  padding-bottom: 10px;
}
.menu-panel .menu-panel-item {
  height: 32px; 
  line-height: 32px;
  font-size: 14px;
  cursor: pointer;
  color: #0070b1;
  text-align: left;
  margin-bottom: 8px;
  padding-left: 8px;
  width:120px;
  overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; 
  float: left;
}
.menu-panel .menu-panel-item:hover {

  text-decoration: underline
}

.menu-panel-empty {
  height: 138px;
  line-height: 138px;
}
.menu-panel .org-list {
  margin: 0 32px 0 16px;
}
.menu-panel .org-list .org-label {
  height: 46px;
  line-height:46px;
  color: #333333;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
}

.menu-panel .group-list {
  overflow: hidden;
  margin-left: 16px;
}
.menu-panel .group-list .group-label {
  height: 32px;
  line-height: 32px;
  color: #666666;
  font-size: 14px;
  text-align: left;
  clear: both;
  margin-bottom: 6px;
  margin-left: 8px;
}
</style>
