<template>
	<div class="banner">
		<div class="selector" @mouseenter="showSelector = true" @mouseleave="showSelector = false">
			<div class="current-selected">
				<a-icon v-if="list[current].icon" theme="filled" :type="list[current].icon" />
				{{ list[current].name }}
				<a-icon type="down" />
				<transition name="slide-fade">
					<div class="select-list" v-if="showSelector">
						<div class="select-item" v-for="(item, index) in list" @click.stop="handleSelectorClick(item, index)">
							<a-icon v-if="item.icon" theme="filled" :type="item.icon" />
							{{ item.name }}
						</div>
					</div>
				</transition>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "SwitchBanner",
	data: function () {
		return {
			list: [
				{
					name: '文件',
					icon: 'file'
				},
				{
					name: '路由',
					icon: 'trademark-circle'
				},
				{
					name: '组件',
					icon: 'interaction'
				}
			],
			current: 0,
			showSelector: false
		}
	},
	methods: {
		handleSelectorClick(item, index) {
			this.current = index;
			this.showSelector = false;
			this.bus.$emit('left-up-selector-change', item);
		}
	},
}
</script>

<style scoped lang="scss">
.slide-fade-enter-active {
	transition: all .3s ease;
}
.slide-fade-leave-active {
	transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
	transform: translateY(-10px);
	opacity: 0;
}
.banner {
	text-align: left;
	height: 30px;
	display: flex;
	position: relative;
	z-index: 1;
	align-items: center;
	font-size: 14px;
	background: #3B4754;
	border-bottom: 1px solid black;
	.selector {
		margin-left: 10px;
		position: relative;
		cursor: pointer;
		height: 100%;
		display: flex;
		align-items: center;
		.select-list {
			position: absolute;
			top: 100%;
			background: #3C3F41;
			width: 150px;
			padding: 5px 0;
			border: 1px solid #87939A;
			.select-item {
				padding: 0 10px;
			}
			.select-item:hover {
				cursor: pointer;
				background: #4B6EAF;
			}
		}
	}
}
</style>
