<template>
	<el-space direction="vertical" class="full-width" :size="24">
		<el-radio-group class="radio-group-as-radius-btn top-radio-box">
			<el-space wrap>
				<el-radio-button
					v-for="item in moduleList"
					:key="item.moduleId"
					:value="item.moduleId"
					@click="() => gotoNewsModule(item.moduleId, item.moduleName, false)"
					>{{ item.moduleName }} ></el-radio-button
				>
				<!-- <el-radio-button value="nul"><img src="@/assets/icons/adjustment.png" /></el-radio-button> -->
			</el-space>
		</el-radio-group>

		<el-space :size="16" alignment="flex-start">
			<box-background width="712px" height="100%" title="今日要闻">
				<template #header-icon>
					<img src="@/assets/icons/Headlines-icon.svg" />
				</template>
				<div class="common-padding">
					<news-list :news="HeadlinesData" />
				</div>
			</box-background>

			<box-background width="712px" height="100%" title="中美博弈专题">
				<template #header-icon>
					<img src="@/assets/icons/subject-icon.png" />
				</template>

				<el-space :size="16" direction="vertical" fill class="full-width common-padding">
					<el-space
						v-for="(item, index) in subjectData.slice(0, 3)"
						:key="index"
						@click="() => gotoNewsDetail(item.newsId)"
						alignment="center"
					>
						<common-text
							class="text-bold text-hover"
							:color="
								index === 0
									? 'var(--color-red-100)'
									: index === 1
										? 'var(--color-orange-100)'
										: 'var(--text-primary-65-color)'
							"
						>
							{{ `${index + 1}` }}
						</common-text>
						<common-text class="text-bold text-hover" color="var(--text-primary-80-color)">{{
							item.newsTitle
						}}</common-text>
					</el-space>
					<el-space
						v-for="(item, index) in subjectData.slice(3)"
						:key="index"
						@click="() => gotoNewsDetail(item.newsId)"
					>
						<common-text class="text-regular text-hover" color="var(--text-primary-80-color)">{{
							"• " + item.newsTitle
						}}</common-text>
					</el-space>
				</el-space>
			</box-background>
		</el-space>
	</el-space>
</template>
<script setup>
import { ref, onMounted } from "vue";
import "@/styles/common.scss";
import "@/styles/container.scss";
import "@/styles/radio.scss";
import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news";
import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief";
import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow, ElRadioButton, ElRadioGroup } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue";
import BoxBackground from "@/components/base/boxBackground/overviewNormalBox.vue";
import NewsList from "./NewsList.vue";
//博弈专题新闻数据
const subjectData = ref([]);
// 今日要闻
const HeadlinesData = ref([]);
const moduleList = ref([]);
const gotoNewsDetail = useGotoNewsDetail();
const gotoNewsModule = useGotoNewsModule();
onMounted(async () => {
	await initData();
});

const handleGetModuleType = async () => {
	try {
		const res = await getMoudleType();
		console.log("模块类别", res);
		if (res.code === 200 && res.data) {
			moduleList.value = res.data;
		}
	} catch (error) {}
};

async function updateToday() {
	const { data: todayNews } = await getTodayNews();
	HeadlinesData.value = todayNews ?? [];
}
async function updateHotNews() {
	const { data: hotNews } = await getHotNews();
	subjectData.value = hotNews ?? [];
}

async function initData() {
	await handleGetModuleType();
	await updateToday();
	await updateHotNews();
}
</script>

<style lang="scss" scoped>
@import url("./style.css");

.top-radio-box {
	margin: 0 80px;
}
</style>
