<script>
export default {
	props: {
		config: {
			type: Object,
			default: () => ({})
		},
		categorySlug: {
			type: String,
			default: '',
		}
	},
	data() {
		return {}
	},
	methods: {
		goToToolDetail() {
			if (this.config.slug && this.config.categoryName && this.categorySlug) {
				this.recordToolClick(this.config);
				this.$router.push(`/detail?tool_slug=${this.config.slug}&category_slug=${this.categorySlug}&category_name=${this.config.categoryName}`);
			}
		},
		// 记录点击次数
		async recordToolClick(item) {
			if (item.id) {
				await this.$api.tool.recordToolClickNum(item.id);
			}
		},
		/**
		 * 检测文本是否包含有效的HTML标签
		 * @param {string} text - 要检测的文本
		 * @returns {boolean} - 是否包含有效的HTML标签
		 */
		containsHtml(text) {
			if (!text || typeof text !== 'string') {
				return false;
			}
			// 简单检测常见HTML标签格式，实际项目中可能需要更复杂的验证
			const htmlRegex = /<[^>]*>/;
			return htmlRegex.test(text);
		}
	}
}
</script>

<template>
	<div class="card-caontainer" @click="goToToolDetail">
		<div class="title">
			<div class="icon">
				<img :src="config.iconUrl || '/'" alt="" />
			</div>
			<span class="title-text">
				{{ config.name || '' }}
			</span>
		</div>
		<div class="text">
			{{ config.memo ? config.memo : '' }}
		</div>
	</div>
</template>

<style scoped lang="scss">
.card-caontainer {
	background: #FFFFFF;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
	border-radius: 8px;
	padding: 16px;
	border: 1px solid #E2E8F0;
	height: 100%;
	box-sizing: border-box;

	&:hover {
		cursor: pointer;
		box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
		@include gradient-border($linear-gradient-start, $linear-gradient-end);
	}

	&:active {
		opacity: 0.8;
		@include gradient-border($linear-gradient-start, $linear-gradient-end);
	}

	.title {
		display: flex;
		align-items: center;
		gap: 10px;

		.title-text {
			font-size: 18px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.icon {
			width: 40px;
			height: 40px;
			border-radius: 6px;
			background: #f9fafc;
			padding: 6px;
			img {
				width: 28px;
				height: 28px;
				flex-shrink: 0;
			}
		}

		span {
			color: $main-font-color;
			font-size: $big-font-size;
			font-weight: 600;
			font-family: 'Poppins-SemiBold';
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.text {
		color: $grey-color;
		font-family: 'Poppins-Regular';
		margin-top: 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}
</style>
