<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    type: {
      type: String,
      default: 'class' // url
    },
    icon: {
      type: String,
      default: ''
    },
    iconClass: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { type, icon, title, iconClass } = context.props
    const vnodes = []

    if (type === 'class' && icon) {
      if (icon.includes('el-icon') || icon.startsWith('el') || icon.startsWith('fa') || icon.startsWith('layui-icon') || icon.startsWith('layui-menu')) {
        vnodes.push(<i class={[icon, 'sub-el-icon' + ' ' + iconClass]} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon} class={iconClass}/>)
      }
    }
    if (type === 'url' && icon) {
      if (icon.startsWith('assets')) {
        vnodes.push(<img src={require('ecip-web/' + icon)} class={['menu-img', iconClass]}/>)
      } else {
        vnodes.push(<img src={icon} class={['menu-img', iconClass]}/>)
      }
    }
    if (title) {
      vnodes.push(<span class='title' slot='title'>{(title)}</span>)
    }
    return vnodes
  }
}
</script>

<style scoped>
.sub-el-icon {
  /*color: currentColor;*/
  width: 1em !important;
  height: 1em;
}
</style>
