<template>
    <div class="content">
        <div class="newsList">
            <ul class="infinite-list" v-infinite-scroll="load" style="overflow: auto;height: 80vh;" >
                <li v-for="(item, index) in newList" class="infinite-list-item" :key="index">
                    <div class="list_item">
                        <div class="list_item_top">
                            <div class="title">{{ item.newsTitle }}</div>
                            <div class="date">{{ item.updateDate }}</div>
                        </div>
                        <div class="tips">{{ item.newsContent }}</div>
                    </div>
                    <el-divider></el-divider>
                </li>
            </ul>
        </div>
    </div>
</template>
<script >
import { getNewsList } from "@/api/news";
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            deptBudgetTotal: "",
            newList: [],
            id: "", //用户id
            check: true, //下拉刷新开关
        };
    },
    mounted() {
        this.id = localStorage.getItem("ws-pf_userId");
        // this.getList();
    },
    methods: {
        getList() {
            this.listLoading = true;
            getNewsList({
                reCommonId: this.id,
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            })
                .then((response) => {
                    this.newList = response.data.records;
                    this.deptBudgetTotal = response.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        load() {
            this.pageSize += 10;
            this.getList()
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    background: #f6f7fc;
    height: 100vh - 7vh;
    padding-top: 30px;
}

.newsList {
    width: 80%;
    // height: 80vh;
    border-radius: 6px;
    background: #ffffff;
    // overflow:auto;
    margin: 0 auto;

    .list_item {
        .list_item_top {
            display: flex;
            margin: 10px 0;

            .title {
                font-size: 20px;
                font-weight: 600;
                width: 20%;
            }

            .date {
                text-align: right;
                width: 80%;
                margin-right: 20px;
            }
        }

        .tips {
            color: #8890b1;
        }
    }
}
</style>
