<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">
				<custom-container style="margin-bottom: 16px" block title="新闻内容" :titleIcon="houseIcon" height="1180px">
					<template #header-right>
						<div class="page-content-right-switch">
							<el-switch v-model="highlightEntities" />
							高亮实体
						</div>
						<el-button type="primary" @click="handleToDetail"> 译文 </el-button>
					</template>

					<template #default>
						<!-- 内容区域 - 分三块-->
						<div class="page-content-news-abstract">
							<div class="news-abstract-header">
								<img src="./assets/images/abstract-header.png" alt="" />
							</div>
							<div class="news-abstract-content">
								{{
									"       美国众议院共和党人正在起草一项新提案，以限制美国对中国的投资。此前，参议院已将其纳入国防政策立法中。知情人士向Semafor透露，众议院工作人员希望在11月7日前就该提案达成共识，并将财政部的反馈纳入由肯塔基州共和党众议员安迪·巴尔提出的配套提案中（尽管政府停摆可能推迟这一时间表）。随后，众议员将利用该文本与参议员就最终《国防授权法案》的内容进行协商。此前一届国会中，类似的尝试因北卡罗来纳州前众议员帕特里克·麦克亨利的反对而失败，但本届国会中，“所有人都在共同努力”。知情人士补充说，领导人并不担心此举会剥夺特朗普在周四与中国领导人习近平会谈时的谈判筹码，因为财政部已开始实施类似的指导方针。"
								}}
							</div>
						</div>
						<div class="page-content-news-artical">
							<div class="page-content-news-artical-zn">
								{{ newsContentInfo.newsContent }}
								<!-- <p>
										据<span class="highlight">华盛顿邮报</span>报道，了解谈判情况的知情人士透露，<span
											class="highlight"
											>美国众议院</span
										>、<span class="highlight">共和党人</span
										>正在起草一项新的提案，以限制美国对华投资。目前<span class="highlight">参议院</span
										>已将其相关法案作为国防政策立法的一部分通过。
									</p>

									<p>
										谈判各方希望能在11月7日前就这项措施的文本达成共识（尽管政府停摆、可能推迟这一日期）。该措施已将财政部的反馈意见纳入<span
											class="highlight"
											>肯塔基州</span
										>、<span class="highlight">共和党众议员</span
										><span class="highlight">安迪·巴尔</span>的<span class="highlight">配套提案中</span>。
									</p>

									<p>
										此后，<span class="highlight">国会议员</span
										>们将利用这份文本来与参议员进行协商，以决定哪些内容能最终纳入定版的《国防授权法案》中。
									</p>

									<p>
										在上届国会期间，类似的立法尝试曾因<span class="highlight">北卡罗来纳州</span>、<span
											class="highlight"
											>共和党前众议员</span
										><span class="highlight">帕特里克·麦克亨利</span>的反对而失败。但在本届国会中，<span
											class="highlight"
											>一位知情人士</span
										>表示，"现在所有人实际上都在共同努力"。
									</p>

									<p>
										该人士还补充说，领导层并不担心此举会剥夺<span class="highlight">特朗普</span
										><span class="highlight">总统</span>的一个谈判工具。
									</p> -->
							</div>

							<div class="page-content-news-artical-en">
								<!-- <p class="indented-paragraph">
										<span class="highlight">House Republicans</span> are drafting a fresh proposal to curb US
										investments in China after the <span class="highlight">Senate</span> passed its bill as
										part of defense policy legislation, people familiar with the talks told Semafor.
									</p>

									<p class="indented-paragraph">
										Staff hope to reach consensus on the measure, which incorporates
										<span class="highlight">Treasury Department</span> feedback into a companion proposal from
										Rep. <span class="highlight">Andy Barr</span>, R-Ky., by
										<span class="highlight">Nov. 7</span> (though the shutdown could delay that date).
									</p>

									<p class="indented-paragraph">
										Members will then use that text to negotiate with senators over what makes it into the
										final <span class="highlight">National Defense Authorization Act</span>.
									</p>

									<p class="indented-paragraph">
										Last Congress, similar attempts to add language implored amid pushback from former Rep.
										<span class="highlight">Patrick McHenry</span>, R-N.C.; this Congress, "everyone's
										actually working together" now, one of the people said.
									</p>

									<p class="indented-paragraph">
										They added that leaders are unconcerned about depriving
										<span class="highlight">Trump</span> of a negotiating tool in talks with Chinese leader
										<span class="highlight">Xi Jinping</span> on Thursday because
										<span class="highlight">Treasury</span> is already implementing parallel guidance.
									</p> -->
							</div>
						</div>

						<div class="page-content-news-img">
							<el-image :src="newsContentInfo.newsImage" alt="新闻图片" fit="contain" />
							<!-- <el-image :src="newsImg2" alt="新闻图片" fit="contain" />
								<el-image :src="newsImg3" alt="新闻图片" fit="contain" /> -->
						</div>
					</template>
				</custom-container>
				<custom-container block title="关系图谱" :titleIcon="linkIcon" height="500px">
					<template #default>
						<Graph />
					</template>
				</custom-container>
			</div>
			<div class="right">
				<custom-container style="margin-bottom: 16px" block title="事件脉络" :titleIcon="houseIcon" height="630px">
					<template #default>
						<div class="box4">
							<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
								<div class="box4-item-left">
									<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
									<div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
								</div>
								<div class="box4-item-right">
									<div class="box4-item-right-header">
										<span class="box4-item-right-header-title" :title="item.title">{{ item.title }}</span>
										<span class="box4-item-right-header-desc">{{ item.desc }}</span>
									</div>
									<div class="box4-item-right-content">
										{{ item.content }}
									</div>
								</div>
							</div>
						</div>
					</template>
				</custom-container>

				<custom-container block title="相关新闻" :titleIcon="houseIcon" height="500px">
					<template #default>
						<div class="news-list">
							<NewsList :list-data="customNewsData" />
						</div>
					</template>
				</custom-container>
			</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 Graph from "./relation.vue";
import newsImg from "@/assets/images/img-news.png";
import openIcon from "@/assets/images/icon-open.png";
import dotIcon from "@/assets/images/dot.png";

import newsImg1 from "@/assets/images/news-image-1.png";
import newsImg2 from "@/assets/images/news-image-2.png";
import newsImg3 from "@/assets/images/news-image-3.png";
import newsImg4 from "@/assets/images/news-img.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([
	{
		image: newsImg4,
		title: "市场因结束美国政府关门协议的希望而提振",
		time: "",
		source: "",
		description: "2017-08-30 · Channel NewsAsia..."
	},
	{
		image: newsImg4,
		title: "市场因结束美国政府关门协议的希望而提振",
		time: "",
		source: "",
		description: "2017-08-30 · Channel NewsAsia..."
	},
	{
		image: newsImg4,
		title: "市场因结束美国政府关门协议的希望而提振",
		time: "",
		source: "",
		description: "2017-08-30 · Channel NewsAsia..."
	},
	{
		image: newsImg4,
		title: "市场因结束美国政府关门协议的希望而提振",
		time: "",
		source: "",
		description: "2017-08-30 · Channel NewsAsia..."
	}
]);
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 {
	/* padding: 20px; */
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
}

.page-header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px;
	background: #fff;
	padding: 0 160px;

	&-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;
	.left {
		width: 1063px;
	}
	.right {
		width: 520px;
	}
	&-news-abstract {
		height: 260px;
		width: 100%;
		padding: 10px;
		background: linear-gradient(to bottom, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0));
		font-size: 16px;
		font-weight: 400;
		line-height: 30px;
		border-radius: 4px;
		border: 1px solid rgba(246, 250, 255, 1);
		text-indent: 2em;
		.news-abstract-header {
			margin-top: 6px;
			width: 135px;
			height: 32px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.news-abstract-content {
			margin-top: 16px;
			font-family: Microsoft YaHei;
			font-style: Regular;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: justify;
		}
	}
	&-news-artical {
		// height: 480px;
		margin-top: 16px;
		line-height: 1.8;
		color: #303133;
		// display: flex;
		// align-items: flex-start;
		// justify-content: space-between;
		gap: 25px;
		&-zn,
		&-en {
			width: 100%;
			font-family: Microsoft YaHei;
			font-style: Regular;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: justify;
		}
		p {
			text-align: justify;
			text-indent: 2em; /* 段落开头缩进2个字符 */
			margin-bottom: -1px;
			line-height: 28px;
		}
		.highlight {
			color: rgba(5, 95, 194, 1); /* 指定的蓝色高亮 */
			font-weight: 500;
		}
	}

	&-news-img {
		height: 370px;
		// border-top: 1px solid rgba(234, 236, 238, 1);
		padding: 15px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		overflow: hidden;
		overflow-y: auto;
	}
	.box4 {
		.box4-item {
			display: flex;
			gap: 10px;
			align-items: flex-start;
			padding-bottom: 30px;
			.box4-item-left {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 8px;
				position: relative;
				.box4-item-left-icon {
					width: 10px;
					height: 10px;
				}
				.box4-item-left-line {
					width: 1px;
					height: 120px;
					position: absolute;
					top: 15px;
					border-left: 1px solid rgba(10, 87, 166, 0.3);
				}
			}
			.box4-item-right {
				display: flex;
				flex-direction: column;
				gap: 5px;
				.box4-item-right-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 12px;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					&-title {
						width: 60%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 16px;
						color: rgba(59, 65, 75, 1);
						font-weight: 700;
					}
					&-desc {
						font-size: 14px;
						font-weight: 400;
						color: rgba(95, 101, 108, 1);
					}
				}
				.box4-item-right-content {
					// margin-top: 10px;
					font-size: 16px;
					font-weight: 400;
					color: rgba(95, 101, 108, 1);
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					height: 48px;
					line-height: 24px;
				}
			}
		}
	}
}
</style>
