
<script type="text/javascript">
export default {
	props: {
    modules: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      indexCache: [] //保存index和节点的关系
    };
  },
  methods:{
    _show_item(item){
      var self=this;
      var index=this.indexCache.length;
      this.indexCache[index]=item;
      if(item.childrens){
        return (
          <el-submenu index={String(index)}>
             <template slot="title">{item.name}</template>
            {item.childrens.map(item=>this._show_item(item))}
          </el-submenu>
        );
      }else{
        return (<el-menu-item index={String(index)}>{item.name}</el-menu-item>);
      }
    },
    handleSelect(index){
      this.$emit("select",this.indexCache[index]);
    }
  },
  render(){
    var self=this;
    var modules=this.modules;
    return(
        <el-menu onSelect={index=>self.handleSelect(index)}>
          {modules.map(item=>self._show_item(item))}
        </el-menu>
    );
  }
}
</script>
<style scoped>
  .el-menu{
    height: 100%;
  }
  .el-submenu .el-menu-item, .el-submenu{
    height: 36px;
    line-height: 36px;
  }
</style>