<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    pid: {
      type: Number,
      default: 0
    },
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title, pid } = context.props
    const vnodes = []
    //解决el-menu-item 中行内样式padding-left为动态计算问题
    vnodes.push(<span style="padding-left: 16px;"> </span>)
    if (pid === 0) {
      if (icon) {
        if (icon.includes('el-icon')) {
          vnodes.push(<i class={[icon, 'sub-el-icon']} />)
        }
        else if(icon.includes("viewicon")){
          let _icon=icon.split("/")[1];
          vnodes.push(<Icon type={_icon} class='sub-el-icon' size="18" />)
        }
        else if(icon.includes("iconfont")){
          let _icon=icon.split("/")[1];
          vnodes.push(<i class={[_icon, 'iconfont','sub-el-icon']} />)
        }
        else {
          vnodes.push(<svg-icon icon-class={icon}/>)
        }
      }else {
        var _icon="el-icon-menu";
        vnodes.push(<i class={[_icon, 'sub-el-icon']} />)
      }
    }

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

    return vnodes
  }
}
</script>

<style scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
.iconfont{
  font-size: 18px;
}
</style>
