<template>
	<el-space direction="vertical" class="full-width news-image-background">
		<el-button class="float-btn" @click="gotoNewsBrief(false)"
			><el-icon>
				<Back />
			</el-icon>
			返回</el-button
		>
		<el-space style="width: 993px" direction="vertical" alignment="flex-start">
			<div id="ref-news-list" style="margin-top: 50px; margin-bottom: 24px; margin-left: 24px">
				<common-text class="text-title-0-show" color="var(--text-primary-90-color)">{{ moduleName }}</common-text>
				<common-text class="text-regular" color="var(--text-primary-65-color)"
					>基于情报价值评估预测算法，掌握全球重要潜在动向</common-text
				>
			</div>
			<el-space direction="vertical" fill alignment="flex-start" class="background-as-card common-padding">
				<el-radio-group v-model="currentAreaId" class="radio-group-as-gap-btn">
					<el-space direction="horizontal" wrap alignment="center">
						<el-radio-button :label="''" @click="changeArea('')">全部</el-radio-button>
						<el-radio-button v-for="(t, i) in AreaList" :key="i" :label="t.id" @click="changeArea(t.id)"
							>{{ t.name }}
						</el-radio-button>
					</el-space>
				</el-radio-group>
				<el-divider style="margin: 10px 0px"></el-divider>
				<div v-if="NewsData?.content?.length > 0">
					<news-list :news="NewsData.content" />
				</div>
				<el-empty v-else></el-empty>
				<el-pagination
					background
					layout="total, ->, prev, pager, next"
					:current-page="modulePage"
					:total="NewsData?.totalElements ?? 0"
					v-on:current-change="onCurrentChange"
				/>
			</el-space>
		</el-space>
	</el-space>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import "@/styles/container.scss";
import "@/styles/radio.scss";
import NewsList from "./NewsList.vue";
import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief";
import { ElSpace, ElDivider, ElRadioButton, ElRadioGroup, ElButton, ElIcon, ElEmpty, ElPagination } from "element-plus";
import { Back } from "@element-plus/icons-vue";
import CommonText from "@/components/base/texts/CommonText.vue";
import { useGotoNewsBrief } from "@/router/modules/news";
import { scrollToElement } from "@/router/common";
const route = useRoute();
const gotoNewsBrief = useGotoNewsBrief();
const moduleId = ref(route.params.id);
const moduleName = ref(route.query.name ?? "");
const modulePage = ref(1);
const NewsData = ref({});
const AreaList = ref([]);
const currentAreaId = ref("");

onMounted(async () => {
	console.log(route.query.name, moduleId.value, moduleName.value);
	const { data: areaList } = await getAreaList();
	AreaList.value = areaList ?? [];
	await updateDate("");
});
const onCurrentChange = async e => {
	await updateDate(currentAreaId.value, e - 1);
	scrollToElement("ref-news-list");
};
async function updateDate(id, page = 0) {
	const { data } = await getHotNewsByArea({
		moduleId: moduleId.value,
		industryId: id ? id : null,
		currentPage: page
	});
	data?.content?.forEach(item => {
		item.newsImage = item.coverUrl ?? "";
	});
	NewsData.value = data ?? [];
	modulePage.value = (data?.number ?? 0) + 1;
}
async function changeArea(id) {
	await updateDate(id, 0);
}
</script>

<style lang="scss" scoped>
@use "@/styles/common.scss" as *;
@import url("./style.css");

.float-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;
	@extend .text-regular;
	color: var(--text-primary-65-color);
}
</style>
