<script>
export default {
	data() {
		return {
			category_slug: '',
		};
	},
	props: {
		config: {
			type: Object,
			default: () => {
				return {}
			}
		},
	},
	methods: {
		goToToolDetail() {
			if (this.config.slug && this.category_slug) {
				this.$router.push('/detail?tool_slug=' + this.config.slug + '&category_slug=' + this.category_slug);
			}
		}
	},
	mounted() {
		this.category_slug = this.$route.query.category_slug;
	},
	watch: {
		'$route': function (newVal) {
			this.category_slug = newVal.query.category_slug;
		},
	}
}
</script>

<template>
	<div class="similar-card-container" @click="goToToolDetail">
		<div class="title">
			<img :src="config.iconUrl || ''" alt="" />
			<span style="font-size: 18px">
								{{ config.name || '' }}
							</span>
		</div>
		<div class="text">
			{{ config.memo || '' }}
		</div>
	</div>
</template>

<style scoped lang="scss">
.similar-card-container {
	background: #FFFFFF;
	box-shadow: 0 10px 30px 0 #0000000d;
	border-radius: 8px;
	padding: 16px 16px 10px;
	border: 1px solid #BACFFF;
	max-width: 305px;
	cursor: pointer;

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

	&:active {
		opacity: 0.8;
	}

	.title {
		display: flex;
		align-items: center;

		img {
			width: 40px;
			height: 40px;
			margin-right: 4px;
		}

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

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