<template>
	<div class="wrap">
		<h4 class="wrap-tag">{{ menus.meta.title }}</h4>
		<div class="menu-wrap" v-for="(menu, idx) in menus.children" :key="idx">
			<p class="title">{{ menu.meta.title }}</p>
			<ul class="menu">
				<li v-for="(item, key) in menu.children" :key="key">
					<a
						href="javascript:void(0);"
						:class="{ actived: item.path == path }"
						@click="handleOpenPage(item)"
						v-if="!item.hidden"
						>{{ item.meta.title }}</a
					>
					<a
						target="_blank"
						:class="{ actived: item.path == path }"
						:href="item.path"
						v-else-if="
							(item.hidden &&
								item.path.indexOf('https://') !== -1) ||
							item.path.indexOf('http://') !== -1
						"
						>{{ item.meta.title }}</a
					>
				</li>
			</ul>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.wrap {
	padding: 24px 24px;
}
.wrap-tag {
	font-size: 18px;
	color: #303133;
}
.menu-wrap {
	margin: 24px 0;
}
.menu-wrap .title {
	font-size: 14px;
	font-weight: bold;
	color: #303133;
}
.menu-wrap .menu {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: 1px solid #dcdfe6;
}
.menu-wrap .menu li {
	margin-bottom: 10px;
}
.menu-wrap .menu li:not(:last-child) {
	margin-bottom: 10px;
}
.menu-wrap .menu li a {
	display: block;
	margin-left: -1px;
	font-size: 14px;
	color: #303133;
	padding-left: 24px;
}
.menu-wrap .menu li a.actived,
.menu-wrap .menu li a:hover {
	color: #4178d5;
	border-left: 2px solid #4178d5;
}
</style>
<script>
export default {
	name: 'SubMenu',
	data() {
		return {
			path: '/index',
			subMenus: [],
		};
	},
	props: {
		menus: {
			type: Object,
			required: false,
			default: () => {
				return {};
			},
		},
	},
	watch: {
		// 监听路由变化
		$route(to, from) {
			this.path = to.path;
		},
	},
	created() {
		this.path = this.$route.path;
	},
	methods: {
		handleOpenPage(item) {
			// console.log(item.hidden)
			this.$router.push({
				path: item.path,
			});
			console.log(this.path, '=this.path=');
			//记录最近打开菜单
			this.$http.post('Home/open', { menuId: item.id });
		},
	},
};
</script>
