<template>
	<div class="tool-card" :class="{ 'checkedBg': item.active, 'hovered': isHover && !item.active }"
		 @click="handleClick"
		 @mouseenter="handleMouseEnter"
		 @mouseleave="handleMouseLeave">
		<div class="content">
			<div class="icon-container">
				<img :src="iconBase64 || item.icon || ''" alt="" class="icon-base" />
				<img :src="iconSelectedBase64 || item.iconSelected || ''" alt="" class="icon-selected" />
			</div>
			<span class="text">{{ item.name || '' }}</span>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			iconBase64: '',
			iconSelectedBase64: '',
			isHover: false
		}
	},
	created() {
		// 组件创建时预加载图标
		this.preloadIcons();
	},
	methods: {
		// 处理点击事件
		handleClick() {
			if (this.item.active) {
				this.$set(this.item, 'active', false);
			} else {
				// 先重置所有项，再激活当前项
				// 这里我们需要通知父组件来完成全局重置
				this.$emit('tool-selected', this.item);
			}
		},
		// 处理鼠标进入事件
		handleMouseEnter() {
			// 当项已激活时，不触发hover效果
			if (this.item.active) {
				return;
			}
			this.isHover = true;
		},
		// 处理鼠标离开事件
		handleMouseLeave() {
			// 当项已激活时，不触发hover效果
			if (this.item.active) {
				return;
			}
			this.isHover = false;
		},
		// 预加载图标并转换为base64
		async preloadIcons() {
			// 预加载普通图标
			if (this.item.icon && this.item.icon !== '') {
				try {
					this.iconBase64 = await this.convertToBase64(this.item.icon);
				} catch (error) {
					// console.warn('Failed to load icon:', this.item.icon, error);
				}
			}

			// 预加载选中图标
			if (this.item.iconSelected && this.item.iconSelected !== '') {
				try {
					this.iconSelectedBase64 = await this.convertToBase64(this.item.iconSelected);
				} catch (error) {
					// console.warn('Failed to load iconSelected:', this.item.iconSelected, error);
				}
			}
		},

		// 将图片URL转换为base64
		convertToBase64(url) {
			return new Promise((resolve, reject) => {
				const img = new Image();
				img.crossOrigin = 'Anonymous'; // 处理跨域问题
				img.onload = () => {
					try {
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');
						canvas.width = img.width;
						canvas.height = img.height;
						ctx.drawImage(img, 0, 0);
						const dataURL = canvas.toDataURL('image/png');
						resolve(dataURL);
					} catch (error) {
						reject(error);
					}
				};
				img.onerror = (error) => {
					reject(error);
				};
				img.src = url;
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.tool-card {
	background: #FFFFFF;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	padding: 10px 16px;
	font-weight: 600;
	font-family: 'Poppins-SemiBold';
	cursor: pointer;
	width: fit-content;

	.content {
		@include display-flex;
		white-space: nowrap;
		max-width: 220px;

		.icon-container {
			position: relative;
			width: 24px;
			height: 24px;
			margin-right: 5px;
		}

		.icon-base,
		.icon-selected {
			position: absolute;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
			transition: opacity 0.2s ease;
		}

		// 基础状态：显示普通图标，隐藏选中图标
		.icon-base {
			opacity: 1;
		}

		.icon-selected {
			opacity: 0;
		}

		.text {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

// 激活状态样式
.checkedBg {
	color: $white;
	background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
	.icon-container {
		.icon-base {
			opacity: 0 !important;
		}
		.icon-selected {
			opacity: 1 !important;
		}
	}
}

// 悬停状态样式（非激活时）
.hovered {
	color: $white;
	background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
	// 悬停状态（非激活时）：显示选中图标，隐藏普通图标
	.icon-container {
		.icon-base {
			opacity: 0 !important;
		}
		.icon-selected {
			opacity: 1 !important;
		}
	}
}
</style>
