<template>
    <el-space direction="vertical" class="full-width" :size=24>
        <el-radio-group class="radio-group-as-radius-btn">
            <el-space>
                <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" 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");
</style>