<template>
    <view class='container'>
		<view class="wapper">
			<scroll-view style="height: 100%;" scroll-y @scrolltolower="scrolltolower">
				<view class="msg-list">
					<view @click="$wskj.to('/pages/home/msg/systemmsgdetails?msgId=' + item.id)" v-for="(item, index) in 2" :key="index" class="item">
						<image src="@/static/logo.png"></image>
						<view class="bottom">
							<text class="fs-36 fw-600">标题</text>
							<text class="fs-28 mt-30" style="color: #999;">描述</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			currentPage: 1,
			msgList: [],
			isEmpty: false
        };
    },
    onLoad() {
		this.getMsgList()
    },
    methods: {
		getMsgList(){
			const params = {
				url: '/api/index/newslist',
				data: {
					page: this.currentPage
				}
			}
			this.$request(params).then(res => {
				// console.log(res)
				this.msgList = this.msgList.concat(res.data)
				if(res.data.length === 0) {
					this.isEmpty = true
				}
			}).catch(err => {
					
			})
		},
		scrolltolower(){
			if(!this.isEmpty) {
				this.currentPage += 1
				this.getMsgList()
			}
		}
    },
};
</script>

<style scoped>
	.container {
		height: 100%;
	}
	
	.wapper {
		padding: 40rpx 40rpx;
		height: 100%;
		background-color: #F5F5F5;
	}
	
	.msg-list {
		height: 100%;
	}
	
	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;
		background-color: #FFF;
		border-radius: 20rpx;
	}
	.item:last-child {
		margin-bottom: 0;
	}
	.item > image {
		width: 100%;
		height: 340rpx;
		border-radius: 15rpx;
	}
	.bottom {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	}
	.time {
		text-align: center;
		margin-top: 50rpx;
		color: #999999;
		font-size: 24rpx;
	}
</style>
