<!-- <template functional></template> -->

<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      if (icon.includes('el-icon')) {
        // vnodes.push(<i class={[icon, 'sub-el-icon']} />)
        vnodes.push({ is: 'i', class: [icon, 'sub-el-icon'] })
      } else {
        // vnodes.push(<svg-icon icon-class={icon} />)
      }
    }

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

    }
    return vnodes.map((node) => {
      if (node.is === 'span') {
        return h(node.is, {
          slot: node.slot,
          domProps: {
            innerHTML: node.ctx
          },
        })
      } else {
        return h(node.is, {
          class: node.class
        })
      }

    })
  }
})
</script>

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