<template>
	<div class="shortcut" :style="{ height: moreStatus ? 'auto' : '50px' }" @mouseleave="moreClose">
		<div class="tags" @mouseenter="moreOpen">
			<router-link v-for="i in 20" :key="i" to="/" class="tag">
				<span>系统管理</span>
				<i class="el-icon-error" v-show="delStatus"></i>
			</router-link>
		</div>
		<div class="btns">
			<a href="javascript:void(0);" title="删除" @click="delStatus = !delStatus">
				<i class="el-icon-delete"></i>
			</a>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				moreStatus: false,
				delStatus: false
			}
		},
		computed: {
			theme() {
				return this.$store.state.settings.theme
			}
		},
		methods: {
			isActive(route) {
				return route.path === this.$route.path
			},
			activeStyle(tag) {
				if (!this.isActive(tag)) return {}
				return {
					'background-color': this.theme,
					'border-color': this.theme
				}
			},
			moreOpen() {
				this.moreStatus = true
			},
			moreClose() {
				this.moreStatus = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.shortcut {
		min-height: 50px;
		line-height: 50px;
		padding: 0 10px;
		overflow: hidden;
		display: flex;
		.tags {
			flex: 1;
			.tag {
				font-size: 14px;
				color: #999093;
				margin-right: 20px;
				display: inline-block;
				position: relative;
				i {
					position: absolute;
					top: 20%;
					right: -10px;
				}
			}
		}
		.btns {
			width: 50px;
			display: flex;
			justify-content: space-between;
			.more-open i {
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg);
				-moz-transform: rotate(-90deg);
				-o-transform: rotate(-90deg);
				-mz-transform: rotate(-90deg);
			}
			.more-close i {
				transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				-mz-transform: rotate(90deg);
			}
		}
	}
</style>
