<template>
	<div class="page-container">
		<div class="page-header">
			<div class="page-header-left">
				<el-image
					:src="summaryInfo.newsImage ? summaryInfo.newsImage : DefaultNewsImage"
					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-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" @click="handleWarning">
							<div class="mask"></div>
							<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> -->
						<el-empty v-if="!newsContentInfo.newsContent" description="暂无新闻内容数据" :image-size="150" />
						<div class="main-content">
							<!-- {{ newsContentInfo.newsContent }} -->
							{{ newsContentInfo.newsContent }}
						</div>
						<el-empty v-if="!newsContentInfo.newsImage" description="暂无图片数据" :image-size="100" />
						<div class="main-img-box" v-if="newsContentInfo.newsImage">
							<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">
						<el-empty
							v-if="!relevantNews.length"
							style="padding-top: 120px"
							description="暂无数据"
							:image-size="150"
						/>
						<div v-else class="box2-item" v-for="(item, index) in relevantNews" :key="index">
							<div class="box2-item-left">
								<img :src="item.newsImage" alt="" />
							</div>
							<div class="box2-item-right">
								<div class="title">{{ item.newsTitle }}</div>
								<div class="info">{{ item.newsDate + " · " + item.newsOrg }}</div>
							</div>
						</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";
import { ElMessage } from "element-plus";
import DefaultNewsImage from "@/assets/icons/default-icon-news.png";

const route = useRoute();

const summaryInfo = ref({
	newsImage: "",
	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 handleWarning = () => {
	ElMessage.warning("当前功能正在开发中，敬请期待！");
	return;
};
// 相关新闻
const relevantNews = ref([
	{
		newsImage: null,
		newsTitle: "美国将6家中企列入实体清单，合肥宝龙达被移出！",
		newsETitle: null,
		newsDateTime: null,
		newsDate: "2025-01-08",
		newsOrg: "芯智讯",
		industryList: null,
		newsSrc: null,
		newsId: null
	},
	{
		newsImage: null,
		newsTitle: "美国将39家中企列入“实体清单”，还有42个实体被列入SDN名单！",
		newsETitle: null,
		newsDateTime: null,
		newsDate: "2024-08-24",
		newsOrg: "芯智讯",
		industryList: null,
		newsSrc: null,
		newsId: null
	},
	{
		newsImage: null,
		newsTitle: "美国商务部实体清单新增列6个实体，包括2家中国企业",
		newsETitle: null,
		newsDateTime: null,
		newsDate: "2024-07-05",
		newsOrg: "贸易与合规",
		industryList: null,
		newsSrc: null,
		newsId: null
	},
	{
		newsImage: null,
		newsTitle: "近日美国商务部新增实体清单条目，涉及多家中国实体",
		newsETitle: null,
		newsDateTime: null,
		newsDate: "2024-02-29",
		newsOrg: "贸易与投资便利化促进会",
		industryList: null,
		newsSrc: null,
		newsId: null
	}
]);

const handleGetRelationNews = async () => {
	const params = {
		newsId: route.query.newsId
	};
	try {
		const res = await getRelationNews(params);
		console.log("相关新闻", res);
		if (res.code === 200 && res.data) {
			relevantNews.value = res.data;
		} else {
			relevantNews.value = [];
		}
	} catch (error) {
		relevantNews.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: auto;
			height: 72px;
		}
		&-top {
			height: 72px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 12px;
			&-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;
			}

			&-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;
			cursor: pointer;
			.mask {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9999;
			}
		}
	}
	.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;
					text-indent: 2em;
				}
				.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: 600px;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			.box2-main {
				width: 483px;
				height: 520px;
				margin: 0 auto;
				overflow: hidden;
				overflow-y: auto;
				.box2-item {
					width: 483px;
					height: 60px;
					display: flex;
					margin-bottom: 8px;
					.box2-item-left {
						margin-left: 8px;
						margin-top: 6px;
						width: 64px;
						height: 48px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.box2-item-right {
						width: 395px;
						height: 48px;
						margin-left: 14px;
						margin-top: 5px;
						.title {
							width: 395px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.info {
							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;
						}
					}
				}
			}
		}
	}
}
</style>
