<template>
	<div class="news-box">
		<div class="box3-header">
			<div class="box3-header-left">
				<div class="box3-header-icon">
					<img src="@/assets/images/box3-header-icon.png" alt="" />
				</div>
				<div class="box3-header-title">{{ "新闻资讯" }}</div>
				<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
			</div>
		</div>
		<div class="box3-main">
			<div class="box3-item" v-for="(news, index) in normalizedList" :key="index"
				@click="handleClickToNewsDetail(news)">
				<div class="left">
					<img :src="getProxyUrl(news.newsImage) || defaultImg" alt="" referrerpolicy="no-referrer"
						@error="e => (e.target.src = errImg || News1)" />
				</div>
				<div class="right">
					<div class="right-top">
						<div class="title">{{ news.newsTitle || news.title }}</div>
						<div class="time">
							{{ news.newsDate ? news.newsDate.slice(5) : "" }} {{ news.newsOrg ? "-" + news.newsOrg : "" }}
						</div>
					</div>
					<div class="right-footer">{{ news.newsContent || news.description }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue";
import router from "@/router/index";
import News1 from "@/assets/images/news1.png"; // 错误图片
import defaultNew from "@/assets/images/default-icon-news.png"; // 默认图片

let { list, newsList, errImg, defaultImg } = defineProps({
	list: {
		type: Array,
		default: () => []
	},
	// 兼容历史用法：部分页面使用 newsList 作为入参
	newsList: {
		type: Array,
		default: undefined
	},
	defaultImg: {
		type: String,
		default: defaultNew
	},
	errImg: {
		type: String,
		default: ''
	}
});

// 统一对外渲染数据源：优先使用 list，其次兼容 newsList
const normalizedList = computed(() => {
	return (Array.isArray(list) && list.length ? list : newsList) || [];
});

// 处理图片代理
const getProxyUrl = url => {
	if (!url) return "";
	const urlStr = String(url);
	// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
	if (
		!urlStr.startsWith("http") ||
		urlStr.includes("images.weserv.nl") ||
		urlStr.includes("localhost") ||
		urlStr.includes("127.0.0.1")
	) {
		return url;
	}
	// 移除协议头 http:// 或 https://
	const cleanUrl = urlStr.replace(/^https?:\/\//i, "");
	return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
const handleClickToNewsDetail = news => {
	const route = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: news.newsId ?? news.id
		}
	});
	window.open(route.href, "_blank");
};

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};
</script>

<style lang="scss" scoped>
.news-box {
	width: 792px;
	height: 450px;
	border-radius: 10px;
	box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
	background: rgba(255, 255, 255, 1);

	.box3-header {
		height: 48px;
		border-bottom: 1px solid rgba(240, 242, 244, 1);
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: relative;

		.box3-header-left {
			display: flex;

			.box3-header-icon {
				margin-left: 21px;
				margin-top: 16px;
				width: 19px;
				height: 19px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.box3-header-title {
				margin-top: 11px;
				margin-left: 20px;
				height: 26px;
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 700;
				line-height: 26px;
			}
		}

		.more {
			width: 49px;
			height: 24px;
			position: absolute;
			top: 14px;
			right: 27px;
			color: rgba(20, 89, 187, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			cursor: pointer;
		}
	}

	.box3-main {
		height: 402px;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 6px 0;

		.box3-item {
			display: flex;
			height: 77px;
			width: 749px;
			margin-left: 21px;
			border-bottom: 1px solid rgba(240, 242, 244, 1);
			cursor: pointer;

			&:hover {
				background: var(--color-bg-hover);
			}

			.left {
				width: 72px;
				height: 48px;
				margin-top: 15px;

				img {
					width: 100%;
					height: 100%;
					border-radius: 4px;
				}
			}

			.right {
				width: 657px;
				margin-left: 20px;

				.right-top {
					width: 657px;
					display: flex;
					justify-content: space-between;

					&:hover {
						text-decoration: underline;
						color: var(--color-main-active);

						.title {
							color: var(--color-main-active);
						}
					}

					.title {
						margin-top: 13px;
						width: 500px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.time {
						width: 157px;
						text-align: right;
						height: 22px;
						margin-top: 19px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.right-footer {
					width: 657px;
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
}
</style>
