<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 class="font_name">系统管理</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 {
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	.tags {
		flex: 1;
		.tag {
			font-size: 14px;
			color: #fff;
			margin-right: 5px;
			display: inline-block;
			position: relative;
			background: #4c9898;
			border: #4c9898 1px solid;
			border-radius: 5px;
			margin-top: 7px;
			padding: 0 15px;
			i {
				position: absolute;
				top: 20%;
				right: -10px;
			}
		}
	}
	.btns {
		height: 50px;
		display: flex;
		align-items: center;
		i {
			font-size: 18px;
			color: #fff;
		}
		// .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>
