<template>
	<div class="item flex items-center" @click="gotoLink(item.value)" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
		<div class="icon flex items-center justify-center">
			<img :src="getImageSrc()" alt="" />
		</div>
		<div class="text">{{ item.key || '' }}</div>
	</div>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		},
	},
	data() {
		return {
			isHovered: false
		}
	},
	methods: {
		// 跳转链接
		gotoLink(url) {
			if (!url) {
				return false;
			}
			window.open(url, '_blank');
		},

		// 获取图标路径
		getImageSrc() {
			if (this.isHovered && this.item.key) {
				return `/launches/link/icon_${this.item.key}_selected.png`;
			}
			return this.item.key ? `/launches/link/icon_${this.item.key}.png` : '';
		}
	}
}
</script>


<style scoped lang="scss">
.item {
	border-radius: 12px;
	padding: 14px 10px;
	gap: 16px;
	margin-bottom: 6px;
	color: #64748B;
	font-size: 18px;
	font-family: 'Poppins-Medium';
	cursor: pointer;
	.icon {
		width: 24px;
		height: 24px;
		border-radius: 4px;
		padding: 5px;
		box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
		img {
			width: 14px;
			height: 14px;
		}
	}
	&:hover {
		background-color: #f5f5f5;
		color: #7B61FF;
	}
}
</style>
