<script>
import path from 'path'
// import { isExternal } from '@/utils/validate'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'

let onlyOneChild = null

function hasOneShowingChild (children = [], parent) {
  const showingChildren = children.filter(item => {
    if (item.hidden) {
      return false
    } else {
      // Temp set(will be used if only has one showing child)
      onlyOneChild = item
      return true
    }
  })

  // When there is only one child router, the child router is displayed by default
  if (showingChildren.length === 1) {
    return true
  }

  // Show parent if there are no child router to display
  if (showingChildren.length === 0) {
    onlyOneChild = { ...parent, path: '', noShowingChildren: true }
    return true
  }

  return false
}

function resolvePath (basePath, routePath) {
  // if (isExternal(routePath)) {
  //   return routePath
  // }
  // if (isExternal(this.basePath)) {
  //   return this.basePath
  // }
  return path.resolve(basePath, routePath)
}

export default {
  name: 'SidebarItem',
  functional: true,
  components: { AppLink },
  mixins: [FixiOSBug],
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  render (h, { props }) {
    const item = props.item

    // AI报警里的数字可以通过meta来传

    const defaultTitle = 'No Title'
    if (item.hidden) return null
    if (hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow) {
      const icon = onlyOneChild.meta && onlyOneChild.meta.icon ? <t-icon icon={onlyOneChild.meta.icon} /> : ''

      if (item.path === '/alarm') {
        // console.log(item.children[0].meta)
        const confirmedCount = item.children[0].meta.confirmedCount
        const unconfirmedCount = item.children[0].meta.unconfirmedCount
        return (
          <t-menu-item name={resolvePath(props.basePath, onlyOneChild.path)}>
            { icon}
            <span class="menu-text">{onlyOneChild.meta && onlyOneChild.meta.title || defaultTitle}</span>

            <t-badge color="danger" count={unconfirmedCount} max={99}></t-badge>
            <span style="margin-right:5px;">  </span>
            <t-badge color="danger" count={confirmedCount} max={99}></t-badge>

          </t-menu-item>
        )
      }

      return (
        <t-menu-item name={resolvePath(props.basePath, onlyOneChild.path)}>
          { icon}
          <span class="menu-text">{onlyOneChild.meta && onlyOneChild.meta.title || defaultTitle}</span>

        </t-menu-item>
      )
    } else {
      const icon = item.meta && item.meta.icon ? <t-icon icon={item.meta.icon} /> : ''
      const sidebarItems = item.children.map(child => {
        return (
          <sidebar-item
            key={child.path}
            is-nest={true}
            item={child}
            base-path={resolvePath(props.basePath, child.path)}
            class="nest-menu"
          />
        )
      })
      return (
        <t-submenu ref="subMenu" name={resolvePath(props.basePath, item.path)}>
          <template slot="title">
            {icon}
            <span class="menu-title">{item.meta.title || defaultTitle}</span>
          </template>
          { sidebarItems}
        </t-submenu>
      )
    }
  }
}
</script>

<style lang="scss">
.hideSidebar {
  .menu__submenu-title-text {
    display: none;
  }
}
.menu-text {
  margin-right: 5px;
}
</style>