<script>
import IconCommentSelected from '/static/ToolDetail/icon_comment_selected.png';
import IconComment from '/static/ToolDetail/icon_comment.png';

export default {
	props: {
		commentCount: {
			type: Number,
			default: 0,
		}
	},
	data() {
		return {
			isActive: false,
			isHovered: false,
		}
	},
	computed: {
		// 根据状态返回不同的图片路径
		getImageSrc() {
			// 如果已经点赞，显示选中的图片
			if (this.isActive) {
				return IconCommentSelected;
			}
			// 如果鼠标悬停或点击，显示高亮的图片
			if (this.isHovered) {
				return IconCommentSelected;
			}
			// 默认显示普通图片
			return IconComment;
		}
	},
	methods: {
		// 鼠标悬停
		onMouseEnter() {
			this.isHovered = true;
		},
		// 鼠标离开
		onMouseLeave() {
			this.isHovered = false;
		},
		// 点击事件
		onClick() {
			const commentElement = document.querySelector('.comment-content');
			if (commentElement) {
				commentElement.scrollIntoView({ behavior: 'smooth' });
			}
		}
	}
}
</script>

<template>
	<div class="box flex flex-col items-center" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @click="onClick">
		<img :src="getImageSrc" alt="" />
		<span>{{ commentCount }}</span>
	</div>
</template>

<style scoped lang="scss">
.box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	box-shadow: 0 4px 6px 0 #0000000d;
	background: #fff;
	padding: 5px;
	font-family: 'Poppins-Regular';
	font-size: 12px;
	cursor: pointer;
	img {
		width: 20px;
		height: 20px;
	}
	span {
		color: #64748b;
	}
	&:hover {
		background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
		span {
			color: #ffffffcc;
		}
	}
	&:active {
		background: linear-gradient(90deg, #2563EB 22%, #7B61FF 73%);
		opacity: 0.8;
		span {
			color: #ffffffcc;
		}
	}
}
</style>
