<template>
	<div class="page-container">
		<div class="page-header">
			<div class="page-header-left">
				<el-image :src="summaryInfo.newsImg" alt="新闻" class="page-header-left-img"></el-image>
				<div class="page-header-left-top">
					<div class="page-header-left-top-title">{{ summaryInfo.newsTitle }}</div>
					<div class="page-header-left-top-en">{{ summaryInfo.newsETitle }}</div>
					<div class="page-header-left-top-desc">
						<div class="text">{{ summaryInfo.newsDateTime }} · {{ summaryInfo.newsOrg }}</div>
						<div class="tag-box">
							<div class="tag" v-for="(tag, index) in summaryInfo.industryList" :key="index">
								{{ tag.industryName }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="page-header-right">
				<!-- <el-button type="primary">
					<el-image :src="openIcon" alt="打开" class="page-header-right-icon"></el-image>
					查看原网页
				</el-button> -->
			</div>
		</div>

		<div class="page-content">
			<div class="left">
				<div class="box1">
					<div class="box-header">
						<div class="icon"></div>
						<div class="title">{{ "新闻内容" }}</div>
						<div class="header-right">
							<el-switch v-model="highlightEntities" />
							高亮实体
						</div>
					</div>
					<div class="box1-main">
						<div class="main-header">
							<div class="main-header-left">{{ "原文" }}</div>
							<div class="main-header-center"></div>
							<div class="main-header-right">
								<div class="text">{{ "展开" }}</div>
								<div class="icon">
									<img src="./assets/images/arrow-down.png" alt="" />
								</div>
							</div>
						</div>
						<div class="main-content">
							<!-- {{ newsContentInfo.newsContent }} -->
							{{
								`       据华盛顿邮报报道，了解谈判情况的知情人士透露，美国众议院    共和党人正在起草一项新的提案，以限制美国对华投资。目前参议院    已将其相关法案作为国防政策立法的一部分通过。
       谈判各方希望能在11月7日前就这项措施的文本达成共识（尽管政府停摆    可能推迟这一日期）。该措施已将财政部的反馈意见纳入肯塔基州    共和党众议员安迪·巴尔    的配套提案中。
       此后，议员们将利用这份文本来与参议员进行协商，以决定哪些内容能最终纳入定版的《国防授权法案》    中。
       在上届国会期间，类似的立法尝试曾因北卡罗来纳州    共和党前众议员帕特里克·麦克亨利    的反对而失败。但在本届国会中，一位知情人士表示，“现在所有人实际上都在共同努力”。
       该人士还补充说，领导层并不担心此举会剥夺特朗普    总统的一个谈判工具。`
							}}
						</div>
						<div class="main-img-box">
							<img :src="newsContentInfo.newsImage" alt="新闻图片" />
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="box2">
					<div class="box-header">
						<div class="icon"></div>
						<div class="title">{{ "相关新闻" }}</div>
					</div>
					<div class="box2-main">
						<div class="news-list">
							<NewsList :list-data="customNewsData" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getNewsSummary, getNewsContent, getNewsEvent, getRelationNews } from "@/api/news/newsDetail";
import CustomContainer from "@/components/Container/index.vue";
import NewsList from "@/views/exportControl/components/news.vue";
import newsImg from "@/assets/images/img-news.png";
import openIcon from "@/assets/images/icon-open.png";
import dotIcon from "@/assets/images/dot.png";

const route = useRoute();

const summaryInfo = ref({
	newsImg: "",
	newsTitle: "",
	newsETitle: "",
	newsDateTime: "",
	newsOrg: "",
	industryList: [],
	newsSrc: "",
	newsId: ""
});
const handleGetNewsSummary = async () => {
	const params = {
		newsId: route.query.newsId
	};
	try {
		const res = await getNewsSummary(params);
		console.log("新闻全局信息", res);
		if (res.code === 200 && res.data) {
			summaryInfo.value = res.data;
			summaryInfo.value.newsDateTime = summaryInfo.value.newsDateTime.replace("T", " ");
		}
	} catch (error) {}
};

const highlightEntities = ref(false);
const handleToDetail = () => {
	// window.open("https://www.foxnews.com/technology/house-republicans-draft-new-china-investment-curbs");
};

// 新闻内容
const newsContentInfo = ref({
	newsId: "",
	newsDate: "",
	newsContent: "",
	newsTitle: "",
	newsOrg: "",
	newsImage: ""
});
const handleGetNewsContent = async () => {
	const params = {
		newsId: route.query.newsId
	};
	try {
		const res = await getNewsContent(params);
		console.log("新闻内容", res);
		if (res.code === 200 && res.data) {
			newsContentInfo.value = res.data;
		}
	} catch (error) {}
};

// 事件脉络
const sanctionProcessList = ref([
	{
		title: "减税与就业法案的出台与立法博弈",
		desc: "2025-08-30  11:30",
		content: "2017年，美国通过了一项自里根时代以来最为重大的税制改革——《减税与就业法案..."
	},
	{
		title: "信用评级机构穆迪下调美国信用评级",
		desc: "2025-08-16  13:00",
		content: "2025年5月16日，信用评级机构穆迪自2011年以来第三次下调美国主权信用评级，直..."
	},
	{
		title: "马斯克与特朗普决裂",
		desc: "2025-08-16  11:05",
		content: "马斯克5月30日离任政府效率部负责人时与特朗普友好告别，但6月3日突然批评OBB..."
	},
	{
		title: "马斯克成立“美国党”​",
		desc: "2025-08-16  08:30",
		content: "7月5日（法案签署次日），马斯克宣布成立新政党“美国党”，计划参与2026年中期..."
	},
	{
		title: "“90天关税暂缓期”即将到期",
		desc: "2025-08-14 18:00",
		content: "法案通过恰逢美国对多国“90天关税暂缓期”即将到期（2025年7月9日）。欧盟、..."
	}
]);
const handleGetNewsEvent = async () => {
	const params = {
		newsId: route.query.newsId
	};
	try {
		const res = await getNewsEvent(params);
		console.log("事件脉络", res);
		if (res.code === 200 && res.data) {
		} else {
			sanctionProcessList.value = [];
		}
	} catch (error) {
		sanctionProcessList.value = [];
	}
};

// 相关新闻
const customNewsData = ref([]);
const handleGetRelationNews = async () => {
	const params = {
		newsId: route.query.newsId
	};
	try {
		const res = await getRelationNews(params);
		console.log("相关新闻", res);
		if (res.code === 200 && res.data) {
		} else {
			customNewsData.value = [];
		}
	} catch (error) {
		customNewsData.value = [];
	}
};

onMounted(() => {
	handleGetNewsSummary();
	handleGetNewsContent();
	handleGetNewsEvent();
	handleGetRelationNews();
});
</script>

<style scoped lang="scss">
.page-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
}

.page-header {
	position: sticky;
	top: 0;
	display: flex;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	height: 120px;
	background: #fff;
	padding: 0 160px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	&-left {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15px;
		margin-right: auto;
		&-img {
			width: 72px;
			height: 72px;
		}
		&-top {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 5px;
			&-title {
				color: rgba(59, 65, 75, 1);
				height: 32px;
				font-family: Microsoft YaHei;
				font-style: Bold;
				font-size: 24px;
				font-weight: 700;
				line-height: 32px;
				letter-spacing: 0px;
				text-align: left;
			}
			&-en {
				height: 24px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-style: Regular;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
			}
			&-desc {
				height: 24px;
				display: flex;
				gap: 12px;
				.text {
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}
				.tag-box {
					height: 24px;
					display: flex;
					gap: 4px;
					.tag {
						height: 24px;
						line-height: 24px;
						padding: 0 8px;
						border-radius: 4px;
						background: rgba(231, 243, 255, 1);
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 14px;
						font-weight: 400;
						letter-spacing: 0px;
					}
				}
			}
		}
	}

	&-right {
		&-icon {
			width: 12px;
			height: 12px;
			margin-right: 5px;
		}
	}
}

.page-content {
	padding: 20px 160px;
	display: flex;
	gap: 17px;
	.box-header {
		height: 50px;
		display: flex;
		position: relative;
		.icon {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-top: 14px;
			margin-left: 14px;
			height: 26px;
			color: var(--color-main-active);
			font-family: Source Han Sans CN;
			font-style: Bold;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: left;
		}
		.header-right {
			position: absolute;
			top: 18px;
			right: 37px;
		}
	}
	.left {
		width: 1063px;
		.box1 {
			width: 1063px;
			height: 865px;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			.box1-main {
				width: 992px;
				margin: 0 auto;
				.main-header {
					width: 992px;
					margin-top: 22px;
					display: flex;
					align-items: center;
					height: 24px;
					.main-header-left {
						width: 36px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Source Han Sans CN;
						font-style: Bold;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}
					.main-header-center {
						margin-left: 12px;
						width: 878px;
						height: 1px;
						background: rgba(234, 236, 238, 1);
					}
					.main-header-right {
						display: flex;
						gap: 12px;
						margin-left: 12px;
						.text {
							width: 32px;
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Source Han Sans CN;
							font-style: Regular;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
						.icon {
							width: 10px;
							height: 5px;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
				.main-content {
					margin-top: 22px;
					font-family: Source Han Sans CN;
					font-style: Regular;
					font-size: 16px;
					color: rgb(59, 65, 75);
					font-weight: 400;
					line-height: 30px;
					letter-spacing: 0px;
					text-align: justify;
				}
				.main-img-box {
					margin-top: 30px;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					img {
						height: 240px;
						width: auto;
					}
				}
			}
		}
	}
	.right {
		width: 520px;
		.box2 {
			width: 520px;
			height: 400px;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
		}
	}
}
</style>
