<template>
	<div class="p-menu">
		<!-- <div style="height:60px;background-color: #0b82ff;"></div> -->
		<!-- <el-card class="card" ref="menuCard"> -->
		<el-menu class="el-menu-vertical-demo" :default-active="getDefaultActive" router :collapse="collapse"
			@open="handleOpen" @close="handleClose" active-text-color="#71A6FD">
			<div class="menu-logo" style="height: 60px; line-height: 60px">
				<img width="95%" style="text-align: center; vertical-align: middle" src="../assets/newlogo.png"
					alt="" />
			</div>
			<!-- 引入组件 -->
			<div class="menuScoll">
				<menuItem :menuData="data" class="menuScoll-box">
				</menuItem>
			</div>
		</el-menu>
		<!-- </el-card> -->
	</div>
</template>

<script>
	export default {
		props: {
			//菜单数据源类型Array<JsonObject>，具体格式参考data/menu-list.js
			data: {
				required: false,
				type: Array,
				default () {
					return [];
				},
			},
		},
		components: {
			menuItem: () => import( /* webpackChunkName: "system" */ "./p-menu-item"),
		},
		computed: {
			getDefaultActive() {
				return this.$store.state.defaultActive;
			},
			collapse() {
				return this.$store.state.collapse;
			},
		},
		data() {
			return {
				defaultActiveMenuItem: {},
			};
		},
		mounted() {
			if (this.data.length > 0) {
				this.recursion(this.data);
			}
		},
		updated() {
			if (this.data.length > 0) {
			
				this.recursion(this.data);
				
			}
		},
		methods: {
			recursion(data) {
				for (let item of data) {
					if (item.children != "") {
						this.recursion(item.children);
					} else if (item.rountPath == this.$route.path) {
						if (item.systemflag != "1") {
							this.handelRouterTo(item);
							return;
						}
					}
				}
			},
			handleOpen(e) {
				if (e.indexOf("/") != -1) {
					if (this.$route.path != e) {
						this.$router.push(e);
					}
				}
			},
			handleClose() {},
			handelRouterTo(item) {
				if (item.systemflag == "1") {
					return;
				}
				let defaults = this.$store.state.tabList.filter((row) => {
					let rountPath = row.hasOwnProperty("rountPath") ?
						row.rountPath :
						row.jspUrl;
					if (rountPath == item.rountPath) {
						return row;
					}
				});
				if (defaults.length == 1) {
					return;
				}
				let set = new Set([...this.$store.state.tabList, item]);
				set.add(item);
				this.$store.commit("setDefaultActive", item.rountPath);
				this.$store.commit("setTabList", Array.from(set));
			},
		},
	};
</script>
<style>
	.el-menu--collapse .menu-logo {
		background-image: url(../assets/leftlogo.png);
		background-repeat: no-repeat;
		background-size: 50% 50%;
		background-position-x: 50%;
		background-position-y: 50%;
	}

	.menu-logo {
		border: 1px solid #f2f2f2;
	}

	.el-menu--collapse .menu-logo img {
		display: none;
	}

	.el-menu--collapse .el-submenu__title span {
		display: none;
	}

	.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
		display: none;
	}

	.p-menu .el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
</style>
<style scoped="scoped" lang="scss">
	.p-menu {
		height: 100%;
		// padding-left: 50px;
		// padding-top: 38px;
		max-width: 200px;
		background-color: white;
		overflow: hidden;

		.card {
			width: 100%;
			flex-grow: 0;
			flex-shrink: 0;
			height: 100%;
			max-height: 100%;

			::v-deep .el-card__body {
				padding: 0px;
			}
		}
	}

	.menuScoll {
		width: 100%;
		height: 100%;
		overflow: hidden;

		.menuScoll-box {
			width: calc(100% + 20px);
			max-height: calc(100vh - 60px);
			padding-bottom: 60px;
			overflow-y: scroll;
		}
	}
</style>
