<template>
	<div class="back-btn" @click="back">
		<div class="icon">
			<img src="@/assets/icons/arrow-left.png" alt="" />
		</div>
		<div class="text">{{ "返回" }}</div>
	</div>
	<div class="wrapper">
		<div>
			<div class="news-header" style="text-align: left">今日要闻</div>
			<div class="news-desc" style="margin-bottom: 20px">基于情报价值评估预测算法，掌握全球重要潜在动向</div>
		</div>
		<div class="main">
			<div class="main-header">
				<div
					v-for="(item, index) in areaList"
					:key="index"
					class="header-btn"
					:class="{ headerBtnSelect: areaActive === item.id }"
					@click="changeModule(item)"
				>
					{{ item.name }}
				</div>
			</div>
			<div class="content-box">
				<div class="item" v-for="(item, index) in HeadlinesData" :key="index">
					<div class="item-left">
						<div class="title">{{ item.title }}</div>
						<div class="content">
							<div class="source">新闻来源： {{ item.from }}</div>
							<div class="time">发表时间：{{ item.time }}</div>
						</div>
						<div class="tag-box">
							<div v-for="(tag, index) in item.tag" class="tag" :key="index">
								{{ tag }}
							</div>
						</div>
					</div>
					<div class="item-right">
						<img :src="item.image" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getAreaList, getTodayNewByArea } from "@/api/news/newsBrief";
import { ElMessage } from "element-plus";

// 模块类别
const areaList = ref([]);

const areaActive = ref("");

const handleGetTodayNewsByArea = async () => {
	const params = {
		industryId: areaActive.value
	};
	try {
		const res = await getTodayNewByArea(params);
		console.log("领域今日要闻", res);
		if (res.code === 200 && res.data) {
			HeadlinesData.value = res.data;
		} else {
			ElMessage.error(res.message);
			HeadlinesData.value = [];
		}
	} catch (error) {
		HeadlinesData.value = [];
	}
};

const handleGetModuleList = async () => {
	try {
		const res = await getAreaList();
		console.log("领域列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
			areaActive.value = areaList.value[0].id;
			handleGetTodayNewsByArea();
		}
	} catch (error) {}
};

const HeadlinesData = ref([
	// {
	// 	title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
	// 	from: "人民网",
	// 	time: "2025-10-05",
	// 	tag: ["以色列", "美国"],
	// 	image: "/testData/HeadlinesData-img.png"
	// },
	// {
	// 	title: "IMF上调中东和北非地区经济增长预期",
	// 	from: "CNN",
	// 	time: "2025-10-05",
	// 	tag: ["经济", "中东", "IMF"],
	// 	image: "/testData/HeadlinesData-img.png"
	// }

]);

function changeModule(btn) {
	areaActive.value = btn.id;
	handleGetTodayNewsByArea();
}

const emit = defineEmits(["back"]);
function back() {
	emit("back", "home");
}

onMounted(() => {
	handleGetModuleList();
});
</script>
<style lang="scss" scoped>
// @import url("./style.css");
.newsBrief-page {
	height: 100%;
	background: url("@/assets/images/background.png") no-repeat;
	background-position: center -100px;
	background-size: 100% 100%;
	position: relative;
	.back-btn {
		position: absolute;
		top: 24px;
		left: 40px;
		width: 92px;
		height: 40px;
		display: flex;
		gap: 4px;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 32px;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0 0 10px 10px var(--color-bg-hover);
		cursor: pointer;
		&:hover {
			background: var(--color-bg-hover);
		}
		.icon {
			width: 16px;
			height: 16px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.text {
			height: 30px;
			color: rgba(95, 101, 108, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: center;
		}
	}
	.wrapper {
		height: 930px;
		position: relative;

		.news-header {
			margin-top: 80px;
			margin-left: 484px;
			height: 60px;
			color: rgba(34, 41, 52, 1);
			font-family: YouSheBiaoTiHei;
			font-size: 46px;
			font-weight: 400;
			line-height: 60px;
			letter-spacing: 0px;
			text-align: left;
		}
		.news-desc {
			margin-top: 2px;
			margin-left: 484px;
			height: 30px;
			color: rgba(95, 101, 108, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: left;
		}
		.main {
			margin: 0 auto;
			width: 1000px;
			height: 778px;
			box-sizing: border-box;
			border: 1px solid rgba(231, 243, 255, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.8);
			.main-header {
				// height: 64px;
				display: flex;
				flex-wrap: wrap;
				gap: 16px;
				padding-top: 24px;
				padding-left: 24px;
				.header-btn {
					height: 40px;
					line-height: 40px;
					padding: 0 20px;
					border-radius: 32px;
					border: 1px solid rgba(32, 33, 35, 0.07);
					background: rgba(32, 33, 35, 0.07);
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					letter-spacing: 0px;
					text-align: center;
					cursor: pointer;
				}
				.headerBtnSelect {
					box-sizing: border-box;
					border: 1px solid rgba(174, 214, 255, 1);
					border-radius: 32px;
					background: rgba(231, 243, 255, 1);
					color: var(--color-main-active);
				}
			}
			.content-box {
				margin: 0 auto;
				width: 952px;
				height: 674px;
				overflow: hidden;
				overflow-y: auto;
				.item {
					width: 952px;
					height: 114px;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding-top: 16px;
					.item-left {
						width: 710px;
						.title {
							height: 30px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: left;
						}
						.content {
							margin-top: 2px;
							display: flex;
							gap: 16px;
							height: 22px;
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
						}
						.tag-box {
							margin-top: 4px;
							display: flex;
							gap: 4px;
							.tag {
								height: 24px;
								padding: 0 8px;
								border-radius: 4px;
								background: rgba(223, 226, 231, 0.41);
								line-height: 24px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 20px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}
}
</style>
