<template>
	<div class="has-logo">
		<div class="logo" :style="{ width: sidebar.opened ? '200px' : '54px' }">
			<img v-if="sidebar.opened" src="~@/assets/logo/logo.png" width="185" />
			<img v-else src="~@/assets/logo/mini_logo.png" width="30" />
		</div>
		<div class="sidebar-box">
			<div class="sidebar-box-item" :class="{ active: active == 'index' }" @click="toIndex">
				<router-link to="/index">风险办公</router-link>
			</div>
			<div v-for="item in sidebarRouters" :key="item.path" class="sidebar-box-item" :class="{ active: item.path == active }" @click="toMainMenu(item)">
				<item :icon="item.icon" :title="item.menuName" />
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Item from './Sidebar/Item'

export default {
	components: { Item },
	data() {
		return {
			active: sessionStorage.getItem('sidebarActive') || 'index'
		}
	},
	computed: {
		...mapState(['settings']),
		...mapGetters(['sidebarRouters', 'sidebar'])
	},
	methods: {
		toIndex() {
			this.active = 'index'
			sessionStorage.setItem('sidebarActive', 'index')
		},
		toMainMenu(item) {
			if (this.$route.query.id == item.menuId) {
				return
			}
			this.active = item.path
			sessionStorage.setItem('sidebarActive', item.path)
			this.$router.replace({
				path: '/mainMenu',
				query: {
					id: item.menuId,
					title: item.menuName
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
	img {
		height: auto;
	}
}
.sidebar-box {
	width: 100%;
	.sidebar-box-item {
		width: 100%;
		height: 49px;
		font-size: 16px;
		color: #fff;
		text-align: center;
		line-height: 49px;
		cursor: pointer;
		user-select: none;
		border-bottom: 1px dashed #535559;
		&:hover {
			background-color: #535559;
		}
		&.active {
			background-color: #4c9898;
		}
	}
}
</style>
