<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">中美博弈专题</div>
			<div class="news-desc">汇聚全球资讯，呈现全球动态，掌握时事脉搏</div>
		</div>
		<div class="main">
			<div class="main-header">
				<div
					v-for="(item, index) in btnList"
					:key="index"
					class="header-btn"
					:class="{ headerBtnSelect: btnSelect === item }"
					@click="changeBtn(item)"
				>
					{{ item }}
				</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="`src/assets/icons/arrow-${item.arrow}.png`" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";

const btnList = ref(["全部", "军事", "政治", "经济", "敌我"]);
const btnSelect = ref("新闻纵览");
const HeadlinesData = ref([
	{
		title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
		from: "人民网",
		time: "2025-10-05",
		tag: ["以色列", "美国"],
		arrow: "0"
	},
	{
		title: "IMF上调中东和北非地区经济增长预期",
		from: "CNN",
		time: "2025-10-05",
		tag: ["经济", "中东", "IMF"],
		arrow: "1"
	},
	{
		title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
		from: "人民网",
		time: "2025-10-05",
		tag: ["日本", "访华"],
		arrow: "1"
	},
	{
		title: "韩日因独岛主权争议暂停本月联合搜救演习",
		from: "凤凰网",
		time: "2025-10-05",
		tag: ["独岛", "联合军演", "韩国", "日本"],
		arrow: "0"
	},
	{
		title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
		from: "央视网",
		time: "2025-10-05",
		tag: ["美国", "航母", "加勒比海"],
		arrow: "0"
	}
]);
function changeBtn(btn) {
	btnSelect.value = btn;
}

const emit = defineEmits(["back"]);
function back() {
	emit("back", "home");
}
</script>
<style lang="scss" scoped>
.newsBrief-page {
	max-width: 100vw;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 5vh 10vw 20vh 10vw;
	background: url("@/assets/images/background.png") no-repeat;
	background-position: center -100px;
	background-size: 100% 100%;
	min-height: 100vh;
	.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: 30px 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;
				gap: 16px;
				padding-top: 24px;
				padding-left: 24px;
				.header-btn {
					height: 40px;
					line-height: 40px;
					padding: 0 20px;
					border-radius: 32px;
					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;
				}
				.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>
