<script>
const dataNavIcon = require('@/assets/images/nav/data.png')

const navIconMap = {
  '首页': require('@/assets/images/nav/home.png'),
  'Home': require('@/assets/images/nav/home.png'),
  '遥视任务管理': require('@/assets/images/nav/task.png'),
  '巡检任务管理': require('@/assets/images/nav/task.png'),
  '设备管理': require('@/assets/images/nav/device.png'),
  '点位管理': require('@/assets/images/nav/point.png'),
  '系统管理': require('@/assets/images/nav/system.png'),
  '区域管理': require('@/assets/images/nav/area.png'),
  '系统监控': require('@/assets/images/nav/monitor.png'),
  '基础数据': dataNavIcon
}

export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    menuKey: {
      type: String,
      default: ''
    },
    isNest: {
      type: Boolean,
      default: false
    }
  },
  render(h, context) {
    const { icon, title, menuKey, isNest } = context.props
    const vnodes = []
    const normalizedTitle = title && title.includes('|') ? title.split('|')[0] : title
    const compactTitle = (normalizedTitle || '').replace(/\s/g, '').toLowerCase()
    const isBaseDataMenu = compactTitle.includes('基础数据') ||
      compactTitle.includes('basicdata') ||
      compactTitle.includes('basedata') ||
      (!isNest && menuKey.toLowerCase().startsWith('/basedata'))
    const navIcon = navIconMap[normalizedTitle] || (isBaseDataMenu ? dataNavIcon : null)

    if (navIcon) {
      vnodes.push(<img class="menu-icon-img" src={navIcon}/>)
    } else if (icon) {
      vnodes.push(<svg-icon icon-class={icon}/>)
    }

    if (title) {
      if (title.length > 5) {
        vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)
      } else {
        vnodes.push(<span slot='title'>{(title)}</span>)
      }
    }
    return vnodes
  }
}
</script>
