<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    hasChildren: {
      type: Boolean,
      default: false
    },
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  render(h, context) {
    const { title, hasChildren, isRoot } = context.props
    let icon = context.props.icon
    const vnodes = []
    if (icon) {
      if (icon.indexOf('fa-') === 0) {
        // 表示以“fa-”开头，使用font-awesome中的图标
        icon = 'fa ' + icon
        vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon}/></div>)
      } else if (icon.indexOf('svg-') === 0) {
        icon = icon.substring(icon.indexOf('svg-') + 4)
        vnodes.push(<div style='display: inline-block;overflow:hidden;'><svg-icon icon-class={icon}/></div>)
      } else {
        icon += ' svg-icon'
        vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon} /></div>)
      }
    }

    if (title) {
      let width = '130px'
      if (hasChildren) {
        // 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
        width = '100px'
      }
      if (isRoot) {
        // 是否是根目录，没有子菜单时
        vnodes.push(<div style='display: inline-block'>
          <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
        </div>)
      } else {
        // 有子菜单时
        vnodes.push(<div slot='title' style='display: inline-block'>
          <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
        </div>)
      }
    }
    return vnodes
  }
}
</script>
