<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 moduleList"
						:key="index"
						:class="moduleActiveId !== item.moduleId ? 'header-btn' : 'header-btn-select'"
						@click="handleToWorldHot(item)"
						@mouseenter="handleActiveModule(true, item)"
						@mouseleave="handleActiveModule(false, item)"
					>
						<div class="btn-box-text">{{ item.moduleName }}</div>
						<div class="btn-box-icon">
							<img v-if="moduleActiveId === item.moduleId" 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" v-if="moduleList.length">
						<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">中美博弈专题</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.newsTitle }}
								</div>
							</div>
							<img v-if="item.hot" :src="`src/assets/icons/arrow-0.png`" />
							<img v-else :src="`src/assets/icons/arrow-1.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, onMounted } from "vue";
import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief";
import { useRoute } from "vue-router";
import Headlines from "./Headlines.vue";
import Subject from "./Subject.vue";
// import style from './style.css'

const route = useRoute();

//顶部数据搜索
const searchInput = ref("");
const moduleList = ref([]);
const moduleActiveId = ref("");
const handleGetModuleType = async () => {
	try {
		const res = await getMoudleType();
		console.log("模块类别", res);
		if (res.code === 200 && res.data) {
			moduleList.value = res.data;
		}
	} 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"
	},
	{
		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"
	}
]);
const handleGetTodayNews = async () => {
	try {
		const res = await getTodayNews();
		console.log("今日要闻", res);
		if (res.code === 200 && res.data) {
		} else {
			HeadlinesData.value = [];
		}
	} catch (error) {
		HeadlinesData.value = [];
	}
};

//当前页面显示
const showPage = ref("home");
const 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 },
]);
const handleGetHotNews = async () => {
	try {
		const res = await getHotNews();
		console.log("中美博弈专题", res);
		if (res.code === 200 && res.data) {
			subjectData.value = res.data;
		} else {
			subjectData.value = [];
		}
	} catch (error) {
		subjectData.value = [];
	}
};

const handleActiveModule = (isIn, module) => {
	moduleActiveId.value = isIn ? module.moduleId : "";
};

const handleToWorldHot = () => {
	showPage.value = "subject";
	moduleActiveId.value = "";
};

onMounted(() => {
	handleGetModuleType();
	handleGetTodayNews();
	handleGetHotNews();
});
</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;
	overflow: hidden;
	overflow-y: auto;
}
</style>
