<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number||null,
      default: null
    },
  },
  render(h, context) {
    let { icon, title, iconSize } = context.props
    const vnodes = [];
    if(!iconSize) iconSize = 20;
		
    if (icon) {
    	if(icon.indexOf('xdicon_') === 0){
    	  if(iconSize) vnodes.push(<i style={{fontSize: iconSize + 'px'}} class={[icon,'xd_admin_iconfont','sub-iconfont']}/>)
        else vnodes.push(<i class={[icon,'xd_admin_iconfont','sub-iconfont']}/>)
      }
      else if(icon.indexOf('icon') === 0){
    	  if(iconSize) vnodes.push(<i style={{fontSize: iconSize + 'px'}} class={[icon,'iconfont','sub-iconfont']}/>)
        else vnodes.push(<i class={[icon,'iconfont','sub-iconfont']}/>)
      }
      else if (icon.includes('el-icon')) {
        if(iconSize) vnodes.push(<i style={{fontSize: iconSize + 'px'}} class={[icon, 'sub-el-icon', 'sub-iconfont']} />)
        else vnodes.push(<i class={[icon, 'sub-el-icon', 'sub-iconfont']} />)
      } else {
        vnodes.push(<svg-icon class='el-svg-icon' icon-class={icon}/>)
      }
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }
}
</script>

<style scoped lang="less">
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}

.hideSidebar .sub-iconfont {
  margin-left: 20px!important;
}

.sub-iconfont {
  flex-shrink: 0;
  color: currentColor;
  margin-right: 10px!important;
  margin-left: 0;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;

  &::before {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

  .el-svg-icon {
    margin-left: 5px;
  }
</style>
