<template>
	<div class="newsBrief-page">
		<div v-if="showPage === 'home'">
			<div style="justify-content: space-between">
				<div class="news-header">新闻速览</div>
				<div class="input-box">
					<el-input placeholder="请输入关键词" :suffix-icon="searchInput" clearable style="width: 800px; height: 48px">
					</el-input>
				</div>

				<div class="btn-box">
					<div
						v-for="(item, index) in btnList"
						:key="index"
						:class="btnSelect !== item ? 'header-btn' : 'header-btn-select'"
						@click="changeBtn(item)"
					>
						<div class="btn-box-text">{{ item }}</div>
						<div class="btn-box-icon">
							<img v-if="btnSelect === item" src="@/assets/icons/btn-arrow-right-active.png" alt="" />
							<img v-else src="@/assets/icons/btn-arrow-right.png" alt="" />
						</div>
					</div>
					<div class="header-btn-more">
						<img src="@/assets/icons/adjustment.png" />
					</div>
				</div>
			</div>
			<div class="main">
				<div class="box">
					<div class="box-header">
						<div class="box-header-img">
							<img src="@/assets/icons/Headlines-icon.svg" />
						</div>
						<div class="box-header-title" @click="changePage('headlines')">今日要闻 ></div>
					</div>
					<div class="divider"></div>
					<div v-for="(item, index) in HeadlinesData" :key="index">
						<div class="box1-item">
							<div class="box1-item-left">
								<div class="box1-item-title">
									{{ item.title }}
								</div>
								<div class="box1-item-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" :key="index" class="tag">
										{{ tag }}
									</div>
								</div>
							</div>
							<div style="margin-left: auto; padding: 10px">
								<img :src="item.image" />
							</div>
						</div>

						<div class="divider"></div>
					</div>
				</div>
				<div class="box">
					<div class="box-header">
						<div class="box-header-img"><img src="@/assets/icons/subject-icon.png" /></div>
						<div class="box-header-title" @click="changePage('subject')">中美博弈专题</div>
					</div>
					<div class="divider"></div>
					<div v-for="(item, index) in subjectData" :key="index">
						<div class="subject-line">
							<div style="display: flex; align-items: center">
								<div class="subject-line-id" :class="{ subjectLineId1: index===0, subjectLineId2: index === 1, subjectLineId3: index === 2 }">
									{{ index <= 2 ? index + 1 : "•" }}
								</div>
								<div class="text" :class="{ textTop: index < 3 }">
									{{ item.text }}
								</div>
							</div>
							<img :src="`src/assets/icons/arrow-${item.arrow}.png`" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
		<Subject v-if="showPage === 'subject'" @back="changePage" />
	</div>
</template>

<script setup>
import { ref } from "vue";
import Headlines from "./Headlines.vue";
import Subject from "./Subject.vue";
// import style from './style.css'

//顶部数据搜索
const searchInput = ref("");
const btnList = ref(["新闻纵览", "焦点新闻", "全球热点", "军事热点", "台湾动向", "美国政治", "亚洲局势", "东亚动态"]);
const btnSelect = ref("新闻纵览");
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"
	},
	{
		title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
		from: "人民网",
		time: "2025-10-05",
		tag: ["日本", "访华"],
		image: "/testData/HeadlinesData-img.png"
	},
	{
		title: "韩日因独岛主权争议暂停本月联合搜救演习",
		from: "凤凰网",
		time: "2025-10-05",
		tag: ["独岛", "联合军演", "韩国", "日本"],
		image: "/testData/HeadlinesData-img.png"
	},
	{
		title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
		from: "央视网",
		time: "2025-10-05",
		tag: ["美国", "航母", "加勒比海"],
		image: "/testData/HeadlinesData-img.png"
	}
]);

function changeBtn(btn) {
	btnSelect.value = btn;
}

//当前页面显示
const showPage = ref("home");
function changePage(page) {
	console.log(page);
	showPage.value = page;
}
//博弈专题新闻数据
const subjectData = ref([
	{ id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 },
	{ id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 },
	{ id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 },
	{ id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 },
	{ id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 },
	{ id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 },
	{ id: 7, text: "中国女法官张玲玲以第一高票当选联合国上诉法庭法官", arrow: 0 },
	{ id: 8, text: "美股三大股指17日收盘普跌 比特币跌破92000美元", arrow: 1 },
	{ id: 9, text: "高盛大幅下调2026年布伦特和WTI原油价格预测", arrow: 1 },
	{ id: 10, text: "2026米兰冬奥会火炬传递完整路线公布 将穿越意大利全部20个大区", arrow: 1 },
	{ id: 11, text: "特朗普宣称若重掌白宫将推动美国开展自1992年以来首次核试验", arrow: 1 },
	{ id: 12, text: "欧盟发布2025年秋季经济预测 欧元区今年GDP预计增长1.3%", arrow: 1 }
]);
</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%;
	padding-top: 50px;
}
</style>
