<!-- 
	
-->
<template>
  <div v-if="!item.hidden" class="menu-wrapper">
	<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
		<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
			<li role="menuitem" :index="resolvePath(onlyOneChild.path, 4)" class="el-menu-item" :class="{'submenu-title-noDropdown':!isNest, 'menu-note':'true'}">
				<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
			</li>
		</app-link>
	</template>
	<ul v-else ref="subMenu" :index="resolvePath(item.path, 1)">
		<li role="menuitem" aria-haspopup="true" class="el-submenu" :class="{'main-node':item.isFirst}" @click="menuEvent($event, item)">
			<div v-if="item.meta" class="el-submenu__title" >
				<app-link v-if="isCustomPath(item.path)" :to="resolvePath(item.path, 3)">
					<item :icon="item.meta && item.meta.icon" :title="item.meta.title" />
				</app-link>
				<item v-else :icon="item.meta && item.meta.icon" :title="item.meta.title" />
				<i v-show="!item.isFirst" class="el-submenu__icon-arrow el-icon-arrow-right"></i>
			</div>
			<ul role="menu" class="el-menu el-menu--inline">
				<sidebar-item
					v-for="child in item.children"
					:key="child.path"
					:is-nest="true"
					:item="child"
					:base-path="resolvePath(child.path, 2)"
					class="nest-menu dir-menu"
				/>
			</ul>
		</li>
	</ul>
  </div>
</template>

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

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() {
		this.onlyOneChild = null;
		return {

		}
	},
	methods: {
		hasOneShowingChild(children, parent) {
		  children = children || []
		  const showingChildren = children.filter(item => {
			if (item.hidden) {
			  return false
			} else {
			  // Temp set(will be used if only has one showing child)
			  this.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) {
			this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
			return true
		  }

		  return false
		},
		resolvePath(routePath, mark) {
			if (isExternal(routePath)) {
				return routePath
			}
			/* if (isExternal(this.basePath)) {
				return this.basePath
			} */
			return path.resolve(this.basePath, routePath)
		},
		isCustomPath(path){
			path = typeof path === 'string' ? path : '';
			var pathArr = path.split('/');
			return pathArr[pathArr.length-1] ? 0 : 1
		},
		menuEvent(e, item){
			var tag = e.target || e.srcElement;
			if(item.isFirst){
				var menu = this.$el.firstElementChild.firstElementChild.lastElementChild;
				
				// is-active
				var vms = this.$parent.$el.children;
				for(var vm of vms){
					vm.classList.contains('is-active') && vm.classList.remove('is-active');
					if(vm === this.$el){
						vm.classList.add('is-active');
					};
				};
				
				// hide menu
				menu.style.display = 'none';
				setTimeout(() => {
					menu.style.display = '';
				}, 50);
			};
		},
	}
}
</script>
<style lang="scss" scope>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.cu-nav {
	height:.65rem;background-color:#2a3350;font-size:0;z-index:1001;max-height:50px;
	//width:$sideBarWidth !important;transition:width 0.28s;overflow:hidden;

	.el-menu{
		/* background-color:$leftMenuBg !important; */
		.el-menu-item{
			color:#fff;
		}
		.submenu-title-noDropdown{
			display:flex;align-items:center;
			&:hover{
				background:$subMenuHover !important;
				span, .svg-icon{color:#fff;}
			}
		}
	}
	.el-scrollbar__view{
		>.el-menu {
			display:flex;border:none;height:100%;/* width:100% !important; */
			>.menu-wrapper{
				height:100%;
				>a{
					>.el-menu-item{
						height:100%;
						background-color:$leftMenuBg;
					}
				}
				>ul{height:100%;}
			}
		}
	}

	.el-submenu{
		position:relative;
		&:hover{
			>.el-menu--inline{
				display:block;
			}
		}
		>.el-menu {
			position:absolute;top:100%;left:0;height:auto;min-width:100%;margin-top:3px;
		}
		.el-submenu{
			&:hover{
				.el-submenu__title{
					background:$subMenuHover !important;
					span{color:#fff;}
					.el-submenu__icon-arrow{color:#fff;}
				}
			}
		}
		.el-menu-item{
			&:hover{
				background:$subMenuHover !important;
				span, .svg-icon{color:#fff;}
			}
		}
	}

	.main-node{
		position:relative;height:100%;
		>.el-submenu__title{
			display:flex;align-items:center;color:#fff;height:100%;line-height:normal;/* line-height:.66rem; */
			border-bottom:2px solid transparent;
			span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
			&:hover{
				background: $leftMenuHover !important;	
			}
		}
		.el-menu--inline{
			display:none;background-color:#f5f8ff;
			>.dir-menu{border-style:solid;border-width:0 1px;border-color:#888;}
			>.dir-menu:first-child{border-top-width:1px;}
			>.dir-menu:last-child{border-bottom-width:1px;}
		}
		>.el-menu{
			margin-top:0;
			.el-submenu__title{
				height:43px;line-height:43px;
			}
		}
		.menu-note, .el-submenu{
			//background:linear-gradient(to right, #0d225b, #092469, #082374) !important;
			color:#000;
		}
		.menu-note{
			padding:0 !important;min-width:auto;text-align:center;height:40px;line-height:40px;
			//background-color: $subMenuBg !important;
			span{margin-right:18px;color:#333;}
		}
		.dir-menu{
			a{ 
				display:block;width:100%;overflow:hidden;
			}
			.el-submenu{
				.el-menu--inline{
					position:absolute;top:0;left:100%;height:auto;width:auto;
				}
			}
		}
		.el-icon-arrow-right {
			right:4px;margin-top:-4px;
		}

		.router-link-active{
			span, .svg-icon{color:#258EF6;}
		}
	}

	.is-active{
		.main-node{
			>.el-submenu__title{
				border-bottom-color:rgb(255, 208, 75);
				color:rgb(255, 208, 75)
			}
		}
	}

	.el-scrollbar{
		overflow:visible;height:100%;display:flex;
		.scrollbar-wrapper {
			//overflow-x:hidden !important;
			overflow:visible;margin:0 !important;flex:1;
			>div{height:100%;}
		}
	}

	.el-scrollbar__bar.is-vertical {
	  right: 0;
	}

	.is-horizontal {
	  display: none;
	}

	.svg-icon {
		margin-right: 8px;
	}
}
</style>