<template>
	<div class="article-item-box flex" @click="goToNewsDetail">
		<div class="dot-container">
			<div class="dot"></div>
		</div>
		<div class="container">
			<div class="title">
				{{ item.title || '' }}
			</div>
			<div class="content">
				{{ item.summary || '' }}
			</div>
			<div class="source">
				Source: TechCrunch
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	methods: {
		goToNewsDetail() {
			if (this.item && this.item.slug) {
				this.articleClick(this.item.id);
				this.$router.push('/tools-detail?news_slug=' + this.item.slug + '&type=news')
			}
		},
		// 记录文章点击次数
		async articleClick(id) {
			if (id) {
				await this.$api.article.recordArticleClick(id);
			}
		}
	}
}
</script>

<style scoped lang="scss">
.article-item-box {
	gap: 10px;

	&:active {
		opacity: 0.8;
	}

	.dot-container {
		padding-top: 8px;
	}

	.dot {
		background: $header-backgroungd;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.container {
		flex: 1;
	}

	.title {
		font-size: 18px;
		font-family: 'Poppins-SemiBold', serif;
		font-weight: 600;
		color: #3A4A65;
	}

	.content {
		font-family: 'Poppins-Regular', serif;
		color: #64748B;
		margin-top: 20px;
	}

	.source {
		font-family: 'Poppins-Regular', serif;
		color: #C8CFD7;
		margin-top: 10px;
		font-size: 14px;
	}
}
</style>
