<template>
	<div class="article-box" @click="handleClick">
		<div class="line"></div>
		<div class="flex gap-20">
			<div class="flex flex-col justify-center">
				<div class="preview-box">
					<img :src="item.coverImage || ''" alt="" class="wh-100">
				</div>
				<div class="flex items-center gap-6">
					<img src="/ToolDetail/icon_clock1.png" alt="" class="wh-16" />
					<div class="time">{{ formatPublishTime(item.publishTime || '') }}</div>
				</div>
			</div>
			<div class="content flex flex-col justify-between">
				<div class="description">{{ item.summary || '' }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	methods: {
		handleClick() {
			this.$emit('refresh', this.item);
		},
		formatPublishTime(timeString) {
			if (!timeString) return '';

			const date = new Date(timeString);

			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const year = date.getFullYear();

			return `${year}-${month}-${day}`;
		},
	},
}
</script>

<style scoped lang="scss">
.gap-20 {
	gap: 20px;
}
.gap-6 {
	gap: 6px;
}
.time {
	color: #869EC2;
	font-family: 'Poppins-Regular';
	font-size: 14px;
	line-height: 16px;
}
.article-box {
	cursor: pointer;
	&:active {
		opacity: 0.8;
	}
	.preview-box {
		width: 104px;
		height: 52px;
		border-radius: 6px;
		margin-bottom: 12px;
	}
	.content {
		height: 104px;
		flex: 1;
		.description {
			color: #1E293B;
			font-family: 'Poppins-Medium';
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
</style>
