<template>
    <home-container :customStyle="{ background: 'none' }" :customHomeStyle="{ overflow: 'hidden' }">
        <view class="announcement-list">
            <scroll-view scroll-y="true" @refresherrefresh="onRefresh" refresher-enabled
                :refresher-triggered="refresherTriggered" @scrolltolower="loadMore" :style="{ height: '100%' }"
                enable-back-to-top="true">
                <list-card v-for="item in list" :key="item.id" @click="navigateToDetail(item)">
                    <template #title>
                        <view class="list-title">
                            {{ item.noticeTitle }}
                        </view>
                    </template>
                    <template #default>
                        <view class="list-info">
                            <view class="list-meta">
                                <view class="author">{{ item.createUser || '管理员' }}</view>
                                <view class="date">{{ formatDate(item.createTime) }}</view>
                            </view>
                            <view class="content">
                                {{ stripHtmlTags(item.noticeContent) }}
                            </view>
                        </view>
                    </template>
                </list-card>

                <!-- 加载状态提示 -->
                <view v-if="loading" class="load-more">
                    <text>加载中...</text>
                </view>
                <view v-else-if="!hasMore && list.length > 0" class="no-more">
                    <text>没有更多数据了</text>
                </view>
                <view v-else-if="list.length === 0" class="no-data">
                    <text>暂无公告</text>
                </view>
            </scroll-view>
        </view>
    </home-container>
</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";
import ListCard from "@/components/list-card/list-card.vue";
import { getNoticeList } from "@/api/announcement/announcement.js";

export default {
    components: {
        HomeContainer,
        ListCard
    },
    data() {
        return {
            list: [],
            // 分页参数
            pageNum: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            hasMore: true,
            // scroll-view下拉刷新状态控制
            refresherTriggered: false
        }
    },
    methods: {
        // 格式化日期
        formatDate(timeString) {
            if (!timeString) return '';
            const date = new Date(timeString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },

        // 去除HTML标签，只保留纯文本
        stripHtmlTags(html) {
            if (!html) return '';
            // 使用正则表达式去除HTML标签
            return html.replace(/<[^>]+>/g, '');
        },
        // 跳转到详情页（如果有的话）
        navigateToDetail(item) {
            // 这里可以根据需要跳转到公告详情页
            // 目前先打印日志
            uni.navigateTo({
                url: '/pages/announcement/announcementDetail?id=' + item.noticeId
            });

        },
        onRefresh() {
            this.pageNum = 1;
            this.refresherTriggered = true;
            this.loadData();
        },
        // 加载数据方法
        async loadData() {
            if (this.loading) return;

            this.loading = true;
            try {
                const query = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    noticeType: 2, // 根据之前的组件，这里固定为2
                    status: 0
                };

                let response = await getNoticeList(query);

                // 处理响应数据
                const data = response.rows || response.list || [];

                if (this.pageNum === 1) {
                    this.list = data;
                } else {
                    this.list = [...this.list, ...data];
                }

                this.total = response.total || 0;
                this.hasMore = this.list.length < this.total;
            } catch (error) {
                console.error('加载公告数据失败:', error);
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
            } finally {
                this.loading = false;
                // 重置下拉刷新状态
                this.refresherTriggered = false;
                uni.stopPullDownRefresh();
            }
        },
        // 加载更多数据
        loadMore() {
            if (this.loading || !this.hasMore) return;
            this.pageNum++;
            this.loadData();
        }
    },
    mounted() {
        this.loadData();
    },
    onShow() {
        // 页面再次展示时刷新数据
        this.pageNum = 1;
        this.loadData();
    }
}
</script>

<style lang="scss" scoped>
.announcement-list {
    height: calc(100vh - 177rpx);
    margin-bottom: 20rpx;

    // 标题样式
    .list-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
    }

    // 信息样式
    .list-info {
        .list-meta {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 11px;
            font-size: 16px;
            color: #666666;
            align-items: center;

            .author {
                margin-right: 30rpx;
            }
        }

        .content {
            font-size: 28rpx;
            color: #666666;
            line-height: 42rpx;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    /* 加载状态样式 */
    .load-more,
    .no-more,
    .no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40rpx;
        font-size: 28rpx;
        color: #999;
    }
}
</style>