<template>
	<div class="card card-content" @click="handleClick">
		<div class="preview">
			<img :src="item.coverImage || ''" alt="" />
		</div>
		<div class="flex flex-col gap-12">
			<div class="title h-60">{{ item.title || '' }}</div>
			<div class="description h-72">
				{{ item.summary || '' }}
			</div>
		</div>
		<div class="bottom">
			<div class="flex items-center gap-12">
				<div class="circle"></div>
				<div class="text">{{ item.author || '' }}</div>
			</div>
			<div class="flex items-center gap-8">
				<img src="/ToolDetail/icon_thumb.png" alt="" />
				<div class="text">{{ item.likeCount || 0 }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: () => ({})
		},
	},
	data() {
		return {
		}
	},
	methods: {
		handleClick() {
			this.$emit('refresh', this.item);
			this.$api.article.recordArticleClick(this.id);
		}
	},
}
</script>

<style scoped lang="scss">
.gap-12 {
	gap: 12px;
}
.gap-8 {
	gap: 8px;
}
.h-60 {
	height: 60px;
}
.h-72 {
	height: 72px;
}
.card {
	padding: 20px;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}
.card-content {
	width: 256px;
	gap: 20px;
	display: flex;
	flex-direction: column;
	cursor: pointer;

	&:active {
		opacity: 0.8;
	}

	.preview {
		height: 100px;
		border-radius: 6px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.circle {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			border: 1px solid #64748B;
		}
		.text {
			font-size: 14px;
			color: #C8CFD7;
			font-family: 'Poppins-Regular';
			line-height: 18px;
		}
		img {
			width: 14px;
			height: 14px;
		}
	}
	.title {
		font-size: 20px;
		color: #3A4A65;
		font-family: 'Poppins-SemiBold';
		font-weight: 600;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.description {
		color: #64748B;
		font-family: 'Poppins-Regular';
		height: auto;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
