<template>
    <home-container :customStyle="{ background: 'none' }" :customHomeStyle="{ overflow: 'hidden' }">
        <view class="workdocu-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.documentTitle }}
                        </view>
                    </template>
                    <template #default>
                        <view class="list-info">
                            <view class="list-meta">
                                <view class="author">{{ item.createBy || '管理员' }}</view>
                                <view class="date">{{ formatDate(item.createTime) }}</view>
                            </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">
                    <view class="empty-icon">📄</view>
                    <text>暂无工作文档</text>
                    <text class="empty-hint">暂无可用的工作文档，请稍后再试</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 { listWorkDocu } from "@/api/workDocu/workDocu.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}`;
        },

        // 跳转到详情页
        navigateToDetail(item) {
            if (!item || !item.documentId) return;

            uni.navigateTo({
                url: '/pages/workDocu/workDocuDetail?id=' + item.documentId
            });
        },

        onRefresh() {
            this.pageNum = 1;
            this.refresherTriggered = true;
            this.loadData();
        },

        // 加载数据方法
        async loadData() {
            if (this.loading) return;

            this.loading = true;
            try {
                // 调用真实的文档列表API
                const response = await listWorkDocu({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    status: 1
                });

                // 处理响应数据
                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>
.workdocu-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;
            }
        }
    }

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

    /* 空状态样式优化 */
    .no-data {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 120rpx 40rpx;
        font-size: 28rpx;
        color: #999;

        .empty-icon {
            font-size: 120rpx;
            margin-bottom: 30rpx;
        }

        .empty-hint {
            font-size: 26rpx;
            color: #bbb;
            margin-top: 20rpx;
        }
    }
}
</style>