<template>
	<div class="scope-slider">
		<!-- 主菜单 -->
		<div class="main-list">
			<div
				class="list"
				:class="[mainIndex == index ? 'active' : '']"
				v-for="(item, index) in menuGroup"
				:key="index"
				@click="pageMianTo(item, index)"
			>
				<i class="iconfont" :class="[item.icon]"></i>
				<div class="list-name">{{ item.name }}</div>
				<i v-if="!$util.isEmpty(item)" class="iconfont icontriangle-right"></i>
			</div>
		</div>
		<!-- 子菜单 -->
		<div class="sub-list" v-show="!$util.isEmpty(subData)">
			<div
				class="list"
				v-for="(item, index) in subData"
				:key="index"
				:class="[subIndex == index ? 'active' : '']"
				@click="pageSubTo(item, index)"
			>
				{{ item.name }}
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	name: 'scope-slide',
	data() {
		return {
			mainIndex: 0,
			subIndex: 0
		};
	},
	computed: {
		...mapGetters(['menuGroup']),
		subData() {
			// console.log('children', this.menuGroup[this.mainIndex]);
			let arr = this.menuGroup[this.mainIndex].children;
			if (this.$util.isEmpty(arr)) {
				return [];
			}
			return arr;
		}
	},
	mounted() {
		// console.log('menuGroup', this.menuGroup);
		this.init();
	},
	methods: {
		init() {
			let path = this.$route.path;
			for (let i in this.menuGroup) {
				if (this.menuGroup[i].children.length > 0) {
					for (let j in this.menuGroup[i].children) {
						if (path == this.menuGroup[i].children[j].path) {
							this.mainIndex = i;
							this.subIndex = j;
						}
					}
				} else if (path == this.menuGroup[i].path) {
					this.mainIndex = i;
					this.subIndex = 0;
				}
			}
		},
		pageMianTo(item, index) {
			this.mainIndex = index;
			if (this.$util.isEmpty(item.children)) {
				this.$router.push(item.path);
			} else {
				this.$router.push(item.children[0].path);
				this.subIndex = 0;
			}
		},
		pageSubTo(item, index) {
			this.subIndex = index;
			this.$router.push(item.path);
		}
	}
};
</script>

<style lang="scss" scoped>
.scope-slider {
	width: 100%;
	height: 100%;
	@include disFlex(flex-start, flex-start);
	.main-list {
		height: 100%;
		width: 130px;
		background-color: #3d3f42;
		box-shadow: 6px 6px 20px #ccc;
		.list {
			@include disFlex(center, flex-start);
			padding-left: 10px;
			padding-top: 16px;
			padding-bottom: 16px;
			color: #fff;
			font-size: 14px;
			cursor: pointer;
			.list-name {
				margin-left: 10px;
				margin-right: 16px;
			}
			.iconfont {
				color: #a1aab5;
				font-size: 14px;
			}
			&.active {
				color: $mainColor;
				background-color: #fff;
				.iconfont {
					color: $mainColor;
				}
			}
			&:hover {
				color: $mainColor;
				background-color: #fff;
				.iconfont {
					color: $mainColor;
				}
			}
		}
	}
	.sub-list {
		width: calc(100% - 130px);
		background-color: #fff;
		.list {
			height: 40px;
			line-height: 40px;
			padding-left: 10px;
			font-size: 14px;
			color: $fontColor2;
			&.active {
				color: $mainColor;
				background-color: #f0f2f6;
			}
			&:hover {
				color: $mainColor;
				background-color: #f0f2f6;
			}
		}
	}
}
</style>
