<template>
	<div class="down-menu">
		<div class="title hover-bottom-animation" to="#">
			{{ title }}
			<span class="iconfont icon-arrow-down-bold"></span>
		</div>
		<div class="child" :class="position">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, onUnmounted } from 'vue'
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		position: {
			type: String as () => 'left' | 'right' | 'center',
			default: 'left'
		}
	})
</script>
<style scoped lang="less">
	.down-menu {
		position: relative;
		> .title {
			margin: 0 14px;
			color: #fff;
			font-size: 14px;
			text-decoration: none;
			line-height: 37px;
			display: inline-block;
			position: relative;
			cursor: pointer;
			&::before {
				content: '';
				position: absolute;
				height: 2px;
				width: 0;
				right: 0;
				left: auto;
				bottom: 0;
				transition: width 0.2s ease-in-out;
				-webkit-transition: width 0.2s ease-in-out;
				background-color: #fff;
			}
			&:hover::before {
				width: 100%;
				left: 0;
				right: auto;
			}
			&.router-link-exact-active:not(.parent):before {
				width: 100%;
			}
			> .iconfont {
				opacity: 0.5;
				font-size: 10px;
				margin-left: 5px;
			}
		}
		> .child {
			position: absolute;
			bottom: 0;
			visibility: hidden;
			width: 250px;
			height: auto;
			padding: 10px 0;
			box-sizing: border-box;
			border: 1px solid #e1e1e1;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			--translate-x: 0;
			transform: translate(var(--translate-x), calc(100% + 5px));
			> * {
				display: inline-block;
				padding: 10px 15px;
				color: #000;
				font-size: 15px;
				text-decoration: none;
				text-align: left;
				&:hover {
					opacity: 0.5;
				}
			}
			left: 0;
			right: auto;
			&.right {
				left: auto;
				right: 0;
			}
			&.center {
				left: 50%;
				right: auto;
				--translate-x: -50%;
			}
		}
		&:hover > .child {
			animation: child-show 0.2s linear both;
		}
		@keyframes child-show {
			0% {
				visibility: hidden;
				// opacity: 0;
			}
			100% {
				// opacity: 1;
				transform: translate(var(--translate-x), 100%);
				visibility: visible;
			}
		}
	}
</style>
