<template>
  <div>
    <!--包含子菜单-->
    <template  v-if="checkChildren(item)">
      <el-submenu v-if="!item.hidden" @click="openMenu(item)"
                  popper-append-to-body :index="resolvePath(item.path)" >
        <template slot="title">
          <item  :icon="item.meta && item.meta.icon"
                :title="(item.meta&&item.meta.title)||item.name" :text="item.name"/>
        </template>
        <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true"
                      :item="child" :base-path="resolvePath(child.path)" class="nest-menu"  @menuClick="openMenu"/>
      </el-submenu>
    </template>
    <template  v-else>
    <!--叶子菜单,只有叶子菜单才能触发点击事件-->
      <el-menu-item v-if="!item.hidden" @click="openMenu(item)" :class="{'submenu-title-noDropdown':!isNest}"
                     :index="resolvePath(item.path)"  >
          <item  :icon="item.meta&&item.meta.icon" :title="(item.meta&&item.meta.title)||item.name" :text="item.name" />
          <sidebar-item  v-if="checkChildren(item)" v-for="child in item.children" :key="child.path" :is-nest="true"
                      :item="child" :base-path="resolvePath(child.path)" class="nest-menu" @menuClick="openMenu"/>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
import path from 'path'
import Item from './Item'
import FixiOSBug from './FixiOSBug'
export default {
  name: 'SidebarItem',
  components: { Item },
  mixins: [FixiOSBug],
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    checkChildren(item){
      let hasChildren=item.children && item.children.length>0;
      if(hasChildren){
         return item.children.filter((c)=>{return c.hidden!==true}).length>0;
      }
      return hasChildren;
    },openMenu(item){
        this.$emit("menuClick",item);
    },resolvePath(routePath,url) {
      if (this.$d.isExternal(routePath)) {
        return routePath
      }
      if (this.$d.isExternal(this.basePath)) {
        return this.basePath
      }
      let result="";
      if(url && url.includes('?')){
          let queryString=this.$d.getQueryString(url,true);
          result= path.resolve(this.basePath, routePath)+"?"+queryString;
      }else{
          result= path.resolve(this.basePath, routePath)
      }
      return result;
    }
  }
}
</script>
