<template>
	<div class="news-list">
		<div v-for="(item, index) in listData" :key="index" class="news-item" @click="handleItemClick(item)">
			<div class="news-image">
				<img :src="item.image" :alt="item.title" />
			</div>
			<div class="news-content">
				<div class="news-header">
					<div class="news-title">{{ item.title }}</div>
					<div class="news-meta">
						<span class="news-time">{{ item.time }}</span> ·
						<span class="news-source">{{ item.source }}</span>
					</div>
				</div>
				<div class="news-description">{{ item.description }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	listData: {
		type: Array,
		default: () => [
			{
				image: "https://via.placeholder.com/72x48/4A90E2/FFFFFF?text=News",
				title: "美国智库激辩人工智能监管路径",
				time: "11-4",
				source: "华盛顿邮报",
				description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析指出..."
			}
		]
	}
});

const emit = defineEmits(["item-click"]);

const handleItemClick = item => {
	emit("item-click", item);
};
</script>

<style scoped>
.news-list {
	width: 100%;
	max-width: 800px;
}

.news-item {
	display: flex;
	padding: 10px 0;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	transition: background-color 0.3s;
}

.news-item:hover {
	background-color: #f9f9f9;
}

.news-item:last-child {
	border-bottom: none;
}

.news-image {
	width: 72px;
	height: 48px;
	flex-shrink: 0;
	margin-right: 16px;
	border-radius: 4px;
	overflow: hidden;
}

.news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.news-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.news-title {
	font-family: "微软雅黑";
	font-size: 16px;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	line-height: 24px;
	flex: 1;
	margin-right: 12px;
}

.news-meta {
	display: flex;
	align-items: center;
	height: 24px;
	line-height: 24px;
	flex-shrink: 0;
	font-size: 14px;
	color: #999;
}

.news-time {
	/* margin-bottom: 2px; */
}

.news-source {
	/* color: #666; */
}

.news-description {
	font-family: "微软雅黑";
	font-size: 16px;
	font-weight: 400;
	color: rgba(59, 65, 75, 1);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
