<script>
export default {
	props: {
		likeCount: {
			type: Number,
			default: 0
		},
		id: {
			type: Number,
			default: 0,
		},
		type: {
			type: String,
			default: 'tool',
		},
	},
	data() {
		return {
			isActive: false,
			throttleTimer: null,
		}
	},
	methods: {
		// 添加点赞
		async addLike() {
			// 节流控制 - 如果已有定时器则阻止执行
			if (this.throttleTimer) {
				return false;
			}

			// 设置节流定时器
			this.throttleTimer = setTimeout(() => {
				this.throttleTimer = null;
			}, 3000);

			if (!this.id) {
				// 清除定时器
				clearTimeout(this.throttleTimer);
				this.throttleTimer = null;
				return false;
			}

			if (this.type === 'tool') {
				const {data: res} = await this.$api.tool.clickToolLike(this.id);
				const {code} = res;
				if (code === 0) {
					this.$message.success('Like successful');
					this.$emit('like-success');
				} else {
					// 请求失败时清除定时器，允许重新点击
					clearTimeout(this.throttleTimer);
					this.throttleTimer = null;
				}
			} else {
				const {data: res} = await this.$api.article.clickArticleLike(this.id);
				const {code} = res;
				if (code === 0) {
					this.$message.success('Like successful');
					this.$emit('like-success');
				} else {
					// 请求失败时清除定时器，允许重新点击
					clearTimeout(this.throttleTimer);
					this.throttleTimer = null;
				}
			}
		}
	}
}
</script>

<template>
	<div class="box flex flex-col items-center" :style="{background: !isActive && '#FFFFFF'}" @click="addLike">
		<img :src="isActive ? '/ToolDetail/icon_thumb_selected.png' : '/ToolDetail/icon_thumb.png'" alt="" />
		<span :style="{color: isActive ? '#ffffffcc' : '#64748b'}">{{ likeCount }}</span>
	</div>
</template>

<style scoped lang="scss">
.box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	box-shadow: 0 4px 6px 0 #0000000d;
	background: $header-backgroungd;
	padding: 5px;
	font-family: 'Poppins-Regular', serif;
	font-size: 12px;
	cursor: pointer;
	img {
		width: 20px;
		height: 20px;
	}
	&:active {
		opacity: 0.8;
	}
}
</style>
