<template>
    <!-- 企业最新动态组件 -->
    <analysis-box title="最新动态" :showAllBtn="false">
        <!-- 顶部分隔线 -->
        <el-divider></el-divider>

        <!-- 新闻列表 -->
        <el-space :size="0" direction="vertical">
            <news-item class="list-item" v-for="(t, i) in newsPage.content" :key="i" :news="t"></news-item>
        </el-space>

        <!-- 底部分隔线 -->
        <el-divider></el-divider>

        <!-- 分页组件 -->
        <el-pagination style="margin: 25px;" background layout="total, ->, prev, pager, next"
            :total="newsPage.totalElements" v-on:current-change="onCurrentChange">
        </el-pagination>
    </analysis-box>
</template>

<script setup>
// 导入API
import { getEnterpriseNewDynamicPage } from '@/api/companyPages';
// 导入组件
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue';
import NewsItem from '@/components/base/newsList/NewsItem.vue';
import { ElDivider, ElSpace, ElPagination } from 'element-plus';
// 导入Vue组合式API
import { ref, watch } from 'vue';

// 响应式数据
const newsPage = ref({}) // 新闻分页数据

// 定义组件属性
const props = defineProps({
    enterpriseInfo: {
        type: Object,
        default: {}
    }
});

/**
 * 更新新闻列表
 * @param {string} id - 企业ID
 * @param {number} page - 页码（从0开始）
 */
const updateNews = async (id, page) => {
    // 获取企业最新动态分页数据
    const res = await getEnterpriseNewDynamicPage(`${id}?pageNumber=${page}`);
    if (res?.code === 200) {
        // 处理新闻数据，添加来源信息
        res.data?.content?.forEach(t => {
            t.from = `${t.time} · ${t.orgName}`
        });
        // 更新新闻分页数据
        newsPage.value = res.data;
    }
}

// 监听企业信息变化，当企业信息更新时重新获取新闻
watch(() => props.enterpriseInfo, async (newVal, oldVal) => {
    if (newVal) {
        await updateNews(newVal.id, 0) // 默认从第0页开始
    }
}, { immediate: true }) // immediate: true 表示组件挂载时立即执行

/**
 * 分页变化处理函数
 * @param {number} e - 当前页码（从1开始）
 */
const onCurrentChange = e => {
    console.log(e) // 打印当前页码
    updateNews(props.enterpriseInfo.id, e - 1) // 转换为从0开始的页码
}
</script>

<style lang="css" scoped>
/* 新闻列表项样式 */
.list-item {
    margin-bottom: 20px;
    /* 底部外边距 */
    border-bottom: 1px solid rgba(240, 242, 244, 1);
    /* 底部边框 */
}
</style>