<template>
	<div class="aside-menu">
		<div class="logo_title" :style="$i18n.locale === 'en-US' ? {fontSize: '18px'} : ''" @click="goIndex">
			<div class="nameImg">
				<img src="~@/assets/img/cqqf-LOGO.png" alt="">
				<div class="system-title">
				{{$t('login.title')}}</img>

				</div>
			</div>
		</div>
		<el-aside theme="dark" router unique-opened background-color="#393A40" text-color="#fff"
			active-text-color="#fff" :width="menuShow ? '231px' : '0px'" class="aside-container">
			<el-scrollbar class="editScroll">
				<el-menu ref="sidemenu" unique-opened class="el-menu-vertical" :default-active="activeIndex"
					@select="handleSelect">
					<div v-for="menu in currentSubMenu" active-text-color="#000"
						style="min-width: 230px; max-width: 230px" :key="menu.alias">
						<!-- + alias + '/'  -->
						<el-submenu :index="'/platLayout/' + menu.alias"
							v-if="menu.children && menu.children.length > 0" class="firstLevel">
							<template slot="title">
								<svgIcon icon-style="icon header-icon" :icon-class="
                                        menu.menuIcon ? menu.menuIcon : ''
                                    " />
								<span class="firstLevelTitle" style="font-size: 14px">{{ menu.name }}</span>
							</template>
							<!-- menu.alias + '/' + -->
							<el-menu-item :index="'/platLayout/' + submMenu.alias" v-for="submMenu in menu.children"
								:key="submMenu.alias" class="subLevel">
								<template slot="title">
									<svgIcon icon-style="icon header-icon" :icon-class="
                                            submMenu.menuIcon
                                                ? submMenu.menuIcon
                                                : ''
                                        " />
									<span class="subLevelTitle">{{
                                        submMenu.name
                                    }}</span>
								</template>
							</el-menu-item>
						</el-submenu>
						<el-menu-item v-else :index="'/platLayout/' + menu.alias">
							<svgIcon icon-style="icon header-icon" :icon-class="menu.menuIcon ? menu.menuIcon : ''" />
							<span slot="title" class="firstLevelTitle">{{
                                menu.name
                            }}</span>
						</el-menu-item>
					</div>
				</el-menu>
			</el-scrollbar>
		</el-aside>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import menu from '@/api/menu.js'
	export default {
		props: {
			menuShow: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				currentSubMenu: [],
				activeIndex: '',
			}
		},
		watch: {
			// 监听路由，如果为首页等非菜单页面，取消菜单选中项
			$route(to, from) {
				if (to.meta.isHome) {
					this.activeIndex = ''
				} else {
					this.filterSubMenu()
				}
			},
		},
		computed: {
			...mapState({
				frontMenus: (state) => {
					// console.log(state.menu.frontMenus, 'dfsdsddf')
					return state.menu.frontMenus
				},
			}),
		},
		mounted() {
			this.activeIndex = this.$route.path
			console.log(this.activeIndex, 'this.activeIndex')
			const currentUser = this.$store.state.login.currentUser
			if ((!this.frontMenus || this.frontMenus.length == 0) && currentUser) {
				let this_ = this
				this.$store.dispatch('menu/actionFrontMenus').then((data) => {
					this.filterSubMenu()
				})
			} else {
				this.filterSubMenu()
			}
			this.$bus.$on('frontMenuShow', () => {
				this.handleMenuCollapse()
			})
			this.$bus.$on('roterPush', (path) => {
				console.log('监听到了')
				this.activeIndex = path
			})
		},
		created() {},
		methods: {
			goIndex() {
				this.$store.dispatch('menu/actionFrontMenus').then((res) => {
					let dataArr =
						res &&
						res.filter(
							(item) =>
							item.alias === 'bigScreen'
						)
					if (dataArr && dataArr.length !== 0) {
						window.localStorage.setItem("activeIndex", dataArr[0].children[0].alias);
						this.$router.push({
							// path: `/business`,
							path: `/${dataArr[0].children[0].alias}`
						})
					}
				})
			},
			// 菜单的收折
			handleMenuCollapse() {
				this.$emit('update:menuShow', !this.menuShow)
			},
			// 选中菜单跳转 不启用el-menu router模式 否则无法选中 暂未查明原因，改用手动推路由
			handleSelect(path, isJump) {
				// this.$router.push(path) //梁
				// console.log(path, 'alias')
				let alias
				let _this = this
				if (path && path.indexOf('/platLayout/href') == -1) {
					// url 菜单
					let i = path.lastIndexOf('/')
					alias = path.slice(i + 1)
				} else {
					alias = path.replace('/platLayout/', '')
				}
				menu.getMenuByAlias(alias, (m) => {
					// debugger
					console.log(m, 3333)
					m && _this.$emit('menuChange', m)
					if (m && m.openType == '2' && isJump) {
						if (m.alias.indexOf('href/') == -1) {
							let openPath = '/platLayout/' + m.alias
							let routeUrl = this.$router.resolve({
								path: openPath
							})
							// let token = JSON.parse(window.sessionStorage.getItem('currentUser')).token
							window.open(routeUrl.href, '_blank')
							// window.open(
							//   window.context.yhxt + `${routeUrl.href}` + '?token=' + token,
							//   '_blank'
							// )
						} else {
							let tempwindow = window.open()
							tempwindow.location = m.href
						}
					} else if (m && m.parent) {
						// console.log(path)
						this.$router.push(path)
						this.activeIndex = path
					}
				})
			},
			// 筛选出选中菜单
			filterSubMenu() {
				this.alias = this.$route.path.split('/')[2].replace('/', '')
				if (this.frontMenus) {
					let currentMenu = this.frontMenus.filter(
						(item) => item.alias == 'normal'
					)[0]
					if (currentMenu) {
						this.currentSubMenu = currentMenu.children
					}
					this.$refs.sidemenu.activeIndex = this.$route.path
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/css/element-variables.scss';

	.logo_title {
		height: 75px;
		color: #fff;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		// line-height: 75px;
		cursor: pointer;
		display: flex;
		justify-content: space-evenly;

		
	}
	.nameImg{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: start;
		// font-size: 24px;
		// font-weight: bold;
		// line-height: 75px;
		cursor: pointer;
		img {
			width: 50px;
			height: 45px;
			// margin-right: 10px;
		}
		.system-title {
			height: 100%;
			flex: 1;
			font-size: 20px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			// word-wrap:break-word; 
    		// word-break:break-all; 
		}
	}

	.aside-container {
		height: calc(100% - 75px);
		transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
		background-color: rgb(57, 58, 64);
	}

	.aside-menu {
		height: 100% !important;
		position: relative;
		background-color: $--menu-bg;
		box-shadow: 0 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
	}

	.el-menu-vertical {
		height: 100% !important;

		.header-icon {
			margin-right: 10px;
			font-size: 16px;
			vertical-align: middle;
			margin-top: -1px;
		}
	}

	/deep/ .el-submenu__title {
		padding: 0 20px !important;
		// height: 46px;
		// line-height: 46px;
		color: $--menu-icon;
	}

	/deep/ .el-menu-item {
		padding: 0 20px !important;

		// height: 56px;
		// line-height: 56px;
		span,
		svg {
			font-size: 14px !important;
			color: $--menu-text;
		}

		svg {
			color: $--menu-icon;
			font-size: 16px !important;
		}
	}

	/deep/ .el-submenu .el-menu-item {
		padding: 0 40px !important;
		// height: 46px;
		// line-height: 46px;
	}

	/deep/ .el-menu {
		border-right: none;
		background-color: $--menu-bg;
	}

	/deep/ .el-submenu__title .firstLevelTitle {
		font-size: 14px !important;
		color: $--menu-text !important;
	}

	.firstLevel .header-icon {
		font-size: 16px;
		margin-top: -4px;
	}

	.subLevel .header-icon {
		font-size: 16px;
		margin-top: -4px;
	}

	.el-submenu__title *,
	.el-menu-item * {
		vertical-align: baseline;
	}

	.aside-container /deep/ .el-submenu__title:hover {
		background-color: $--menu-hover !important;
	}

	.aside-container /deep/ .el-menu-item.is-active,
	.aside-container /deep/ .el-menu-item:focus {
		background-color: $--menu-active !important;

		// background-color: transparent;
		span,
		svg {
			color: $--menu-text !important;
		}
	}

	.aside-container /deep/ .el-menu-item:hover {
		background-color: $--menu-hover !important;
	}

	.editScroll {
		height: 100%;
		// overflow-x: hidden;
	}

	/deep/ .el-scrollbar__wrap {
		height: calc(100% + 9px) !important;
		// height: 100%;
		// margin-right: 0px !important;
	}
</style>
