<template>
  <div class="menu-wrapper">
    <template v-if="!item.children || item.children.lenght === 0">
      <app-link :to="toPath(item)" @click.native="clickMenu(toPath(item))">
        <el-menu-item :index="item.fullPath+'~~'+item.i18nValue" :class="{'submenu-title-noDropdown':!isNest}">
          <item :icon="item.iconName" :title="getI18nName(item)" :is-root="true" />
        </el-menu-item>
      </app-link>
    </template>

    <el-submenu v-else :index="item.fullPath+'~~'+item.i18nValue">
      <template slot="title">
        <item :icon="item.iconName" :title="getI18nName(item)" :has-children="item.children.length > 0?true:false" />
      </template>

      <template v-for="child in item.children">
        <sidebar-item
          v-if="child.children&&child.children.length>0"
          :key="child.code"
          :is-nest="true"
          :item="child"
          class="nest-menu"
        />
        <app-link v-else :key="child.code" :to="toPath(child)" @click.native="clickMenu(toPath(child))">
          <el-menu-item :index="child.fullPath+'~~'+child.i18nValue">
            <item :icon="child.iconName" :title="getI18nName(child)" />
          </el-menu-item>
        </app-link>
      </template>
    </el-submenu>
  </div>
</template>

<script>
import Item from './Item'
import AppLink from './Link'
import Vue from 'vue'
import { getI18nName } from '../../../../utils/menu'
import tabJs from '../../../../api/tab'

export default {
  name: 'SidebarItem',
  components: { Item, AppLink },
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      onlyOneChild: null
    }
  },
  methods: {
    ...tabJs,
    hasOneShowingChild(children, parent) {
      if (children && children.length > 0) {
        this.onlyOneChild = children[0]
      }
      // When there is only one child router, the child router is displayed by default
      if (children.length === 1) {
        return true
      }

      // Show parent if there are no child router to display
      if (!children || children.length === 0) {
        // children不存在
        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
        return true
      }

      return false
    },
    toPath(menu) {
      const toPathObj = {}
      const routePath = menu.fullPath
      toPathObj.openWay = menu.openWay
      if (this.isExternalLink(menu.pageType)) {
        toPathObj.path = '/tab-content-iframe-index'
        toPathObj.tabPath = '/iframe-page/page'
        toPathObj.query = {}
        toPathObj.query.src = routePath
        toPathObj.isExternal = true
        // 如果路径中没有拼系统编码，才需要把系统编码放到参数中
        toPathObj.query.customSystem = Vue.prototype.customSystem
        toPathObj.query._menuCode = menu.code
        toPathObj.query._menuName = getI18nName(menu)
      } else {
        toPathObj.path = '/tab-content-index'
        toPathObj.tabPath = routePath
        toPathObj.query = {}
        toPathObj.query.customSystem = Vue.prototype.customSystem
        toPathObj.query._menuCode = menu.code
        toPathObj.query._menuName = getI18nName(menu)
      }
      return toPathObj
    },
    isExternalLink(pageType) {
      if (pageType && pageType === 'iframe') {
        return true
      }
      return false
    },
    clickMenu(toPathObj) {
      // console.log('clickMenu----toPathObj=', toPathObj)
      if (toPathObj.openWay && toPathObj.openWay === 'NEW_PAGE_OPEN' && toPathObj.query) {
        // 新页签打开菜单
        let url = toPathObj.query.src
        if (url && url.indexOf('?') > 0) {
          url += '&'
        } else {
          url += '?'
        }
        if (toPathObj.query.customSystem) {
          url += 'customSystem=' + toPathObj.query.customSystem
        }
        if (toPathObj.query._menuCode) {
          url += '_menuCode=' + toPathObj.query._menuCode
        }
        if (toPathObj.query._menuCode) {
          url += '_menuName=' + toPathObj.query._menuName
        }
        window.open(url, toPathObj.query._menuCode)
      } else {
        // 刷新页签打开菜单
        this.addTabs(toPathObj.query, this.$store.state.tabContent.openTab, toPathObj.tabPath)
      }
    },
    getI18nName(menu) {
      return getI18nName(menu)
    }
  }
}
</script>
