<template>
	<template v-for="navMenu in navMenus" v-bind:key="navMenu">
		<el-menu-item v-if="!hasChildren(navMenu)" :index="navMenu.path"> 
			<a v-if="navMenu.iframe" :href="navMenu.path" target="_blank" @click.stop></a>
			<el-icon v-if="navMenu.meta.icon"><component :is="menuIcon(navMenu.meta.icon)" /></el-icon>
			<template #title>
				<div v-if="menuIsCollapse" class="menu-collapse-popper">
					<el-icon v-if="navMenu.meta.icon"><component :is="menuIcon(navMenu.meta.icon)" /></el-icon>
					<span>{{ navMenu.meta.title }}</span>
				</div>
				<span v-else>{{ navMenu.meta.title }}</span>
			</template>
		</el-menu-item>
		<el-sub-menu v-else :index="navMenu.path">
			<template #title>
				<a v-if="navMenu.iframe" :href="navMenu.path" target="_blank" @click.stop></a>
				<el-icon v-if="navMenu.meta.icon"><component :is="menuIcon(navMenu.meta.icon)" /></el-icon>
				<span>{{ navMenu.meta.title }}</span>
			</template>
			<NavMenu :navMenus="navMenu.children"></NavMenu>
		</el-sub-menu>
	</template>
</template>

<script>
	import config from "@/config/iconSelect";

	export default {
		name: "NavMenu",
		props: {
			navMenus: { type: Array, default: () => [] }
		},
		data() {
			return {}
		},

		computed: {
			menuIsCollapse() {
				return this.$store.state.global.menuIsCollapse;
			},

			menuIcon() {
				return function(icon) {
					return config.selectIcon(icon) || "el-icon-link";
				}
			}
		},

		methods: {
			hasChildren(item) {
				return item.children && !item.children.every(item => item.meta.hidden);
			}
		}
	}
</script>

<style lang="scss" scoped>
.el-menu-item.is-active:has(.menu-collapse-popper)::before {
  display: none;
}

.menu-collapse-popper {
  display: flex;
  align-items: center;
  margin: 1px 0;
  line-height: 22px;

  .el-icon {
    margin-right: 8px;
    font-size: 16px;
  }

  .el-icon + span {
    cursor: default;
    font-size: 14px;
    color: var(--el-menu-active-color);
  }
}
</style>