<template functional>
  <a-sub-menu :key="props.menuInfo.meta.id" v-show="!props.menuInfo.meta.hiddenHeaderContent" >

    <span slot="title">
      <a-icon :type="props.menuInfo.meta.icon || ' '" /><span :style="{ fontWeight: '900', fontSize: '15px' }">{{ (props.i18nRender(props.menuInfo.name) ) }}</span>
    </span>


    <template v-for="item in props.menuInfo.children">

      <a-menu-item v-if="!item.children" :key="item.meta.id" v-show="!item.meta.hiddenHeaderContent">
        <a-icon :type="item.meta.icon" />
        <span :style="{ fontWeight: '700', fontSize: '15px' }">{{ props.i18nRender(item.name)}}</span>
      </a-menu-item>

      <sub-menu v-else :key="item.meta.id" :menu-info="item" :i18nRender="props.i18nRender"/>
    </template>
  </a-sub-menu>
</template>
<script>
export default {
  props: ["menuInfo","i18nRender"],
    
  
};
</script>
