<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 }}</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">
			<el-row :gutter="20">
				<el-col :span="17">
					<custom-container 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>
							<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>
				</el-col>

				<el-col :span="7">
					<custom-container 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>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="17">
					<custom-container block title="关系图谱" :titleIcon="linkIcon" height="500px">
						<template #default>
							<Graph />
						</template>
					</custom-container>
				</el-col>
			</el-row>
		</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%;
	overflow-x: hidden;
}

.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;
	&-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-artical {
		height: 480px;
		line-height: 1.8;
		color: #303133;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 25px;
		&-zn,
		&-en {
			width: 50%;
		}
		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 {
		border-top: 1px solid rgba(234, 236, 238, 1);
		padding: 15px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}
	.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>
