<script>
export default {
  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) {
      vnodes.push(<svg-icon icon-class={icon} />)
    }

    if (title) {
      if (title.length < 7) {
        vnodes.push(<span slot='title'>{(title)}</span>)
      } else {
        vnodes.push(
          <el-tooltip slot='title' class="item" effect="dark" placement="top-start">
            <span slot="content">{(title)}</span>
            <span>{(title)}</span>
          </el-tooltip>
        )
      }
    }
    return vnodes
  }
}
</script>
