<template>
	<view class="container">
		<view class="list-wrap">
			<view class="item" v-for="item in list.data" :key="item.id">
				<msg-list-item :content="item.content" :title="item.title"
					:create-time="item.createTime"></msg-list-item>
			</view>
		</view>
		<u-loadmore :status="list.status"></u-loadmore>
	</view>
</template>

<script setup>
	// 导入 Vue 的响应式 API
	import {
		onMounted,
		reactive
	} from 'vue'
	import {
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getUserMsgPageReq
	} from '@/common/api/account/message'

	import MsgListItem from '@/components/msg-list-item/msg-list-item.vue'

	const list = reactive({
		page: 1,
		size: 10,
		status: 'loading',
		data: []
	});

	onMounted(() => {
		getMessageList()
	})

	const getMessageList = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		let res = await getUserMsgPageReq({
			page: list.page,
			size: list.size
		})

		if (list.page == 1) {
			list.data = res.records;
		} else {
			list.data.push(...res.records);
		}

		if (res.pageNumber == res.totalPage || res.records.length == 0) {
			list.status = 'nomore';
		}
		uni.hideLoading();
	}

	onReachBottom(() => {
		if (list.status != 'nomore') {
			list.page++;
			getMessageList();
		}
	});
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F7F7F7;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding: 30rpx 30rpx 0 30rpx;

		.list-wrap {
			flex: 1;
		}
	}
</style>