<template>
	<div class="header">
		<div class="nav-list">
			<div class="nav-item"
			     v-for="(item, index) in navList"
			     @mouseenter="item.hovered = true"
			     @mouseleave="item.hovered = false"
			>
				<div class="title">
					<a-icon class="icon" v-if="item.icon" :type="item.icon" />
					{{ item.name }}
					<transition name="slide-fade">
						<div class="child-list" v-if="item.children && item.hovered">
							<div class="child-item"
							     :class="{
									checkbox: each.type === 'checkbox'
							     }"
							     v-for="each in item.children"
							     :title="each.explain"
							     @click="handlerClick($event, each)"
							>
								<a-icon class="icon" v-if="each.icon" :type="each.icon" />
								<div>{{ each.name }}</div>
								<a-icon class="right-check-icon" v-if="each.type === 'checkbox'" :type="each.value ? 'check' : 'close'" />
							</div>
						</div>
					</transition>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {getType, isType} from '@/util/util';
import layout from '@/layout/header';
import Icon from 'ant-design-vue/lib/icon';
export default {
	name: "Header",
	components: {
		AIcon: Icon
	},
	data: function () {
		return {
			navList: []
		}
	},
	mounted() {
		this.navList = layout.nav;
		this.bus.$on('iframe-ready', this.processingPretreatment);
	},
	methods: {
		handlerClick(event, item) {
			if (!isType('function', item.click)) {
				throw new Error(`TypeError: 处理函数类型不正确, 需要的类型为 Function, 传入的为 ${getType(item.click).toString()}`);
			} else {
				item.click(event, item, this);
			}
		},
		processingPretreatment() {
			setTimeout(() => {
			    this.navList.forEach(item => {
			    	item.children && item.children.forEach(each => {
			    		if (each.pretreatment) {
			    			each.pretreatment.bind(this)(each);
					    }
				    })
			    });
			},500)
		}
	},
	beforeDestroy() {
		this.bus.$off('iframe-ready', this.processingPretreatment);
	}
}
</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: translateX(10px);
	opacity: 0;
}
.header {
	width: 100%;
	height: 50px;
	border-bottom: 1px solid white(0.25);
	position: relative;
	z-index: 101;
	.nav-list {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 10px;
		.nav-item {
			height: 100%;
			padding: 0 10px;
			margin-right: 20px;
			cursor: pointer;
			position: relative;
			&:after {
				position: absolute;
				content: '';
				width: 1px;
				height: 30px;
				background: white(0.25);
				right: -10px;
				top: 50%;
				transform: translateY(-50%);
			}
			.icon {
				margin-right: 5px;
			}
			.title {
				height: inherit;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			&:hover {
				background: #4B6EAF;
			}
			.child-list {
				position: absolute;
				min-width: 150px;
				max-width: 300px;
				left: 0;
				top: 100%;
				border: 1px solid white(0.05);
				border-top: none;
				background: #3C3F41;
				box-shadow: rgba(255-17, 255-12, 255-46, 0.15) 0 48px 100px 0;
				.child-item {
					display: flex;
					white-space: nowrap;
					align-items: center;
					padding: 15px;
					position: relative;
					&.checkbox {
						padding-right: 40px;
					}
					&:hover {
						background: #4B6EAF;
					}
					.right-check-icon {
						position: absolute;
						right: 15px;
					}
				}
			}
		}
	}
}
</style>
