<script>
function buildMenuTemplate(h, menus) {
  return menus.map((menu) => {
    let html = null;

    if (menu.children && menu.children.length > 0) {
      let childrenEl = buildMenuTemplate(h, menu.children)
      html = (
          <el-submenu index={String(menu.id)} key={menu.id}>
            <template slot="title">
              <i class={menu.iconCls}></i>
              <span slot="title">{menu.text}</span>
            </template>
            {childrenEl}
          </el-submenu>
      );
    } else {
      html = (
          <el-menu-item index={menu.id} key={menu.id}>
            <i class={menu.iconCls}></i>
            <span slot="title">{menu.text}</span>
          </el-menu-item>
      );
    }
    return html;
  });
}
export default {
  name: "TreeMenu",
  props: ["menus"],
  methods: {
    onMenuItemSelect(menuIndex) {
      this.$emit('select', menuIndex)
    }
  },
  render(createElement) {
    let el = buildMenuTemplate(createElement, this.menus)
    return (
        <el-menu on-select={this.onMenuItemSelect}>
          {el}
        </el-menu>
    );
  }
}
</script>