<!-- 消息中心 -->
<template>
	<view class="container">
		
		<view v-if="data.msgList.length" class="list" v-for="(item,index) in data.msgList"
			:key='index'>
			<image class="icon" src="@/static/me/message.png" mode="aspectFit"></image>
			<view class="item-right">
				<view class="top">
					<view class="title">{{item.title}}</view>
					<view class="text-gray">{{item.createAt}}</view>
				</view>
				<view class="text-gray">{{item.content}}</view>
			</view>
		</view>
		<emprty-card v-if="!data.msgList.length" />
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onLoad,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { selectMessageByUserId } from '@/api/me/message.js';
	
	let data = reactive({
		page: 1,
		limit: 10,
		msgList: []
	})
	
	onLoad(() => {
		getMsg()
	})
	async function getMsg() {
		uni.showLoading({
			title: '加载中'
		})
		
		let params = {
			page: data.page,
			limit: data.limit,
			state: 5
		}
		let res = await selectMessageByUserId(params)
		uni.hideLoading()
		uni.stopPullDownRefresh();
		if (data.page == 1) {
			data.msgList = res.list
			uni.stopPullDownRefresh();
			return
		}
		data.msgList = [...data.msgList, ...res.list]
	}
	onReachBottom(() => {
		data.page = data.page + 1;
		getMsg()
	})
	onPullDownRefresh(() => {
		data.page = 1;
		data.msgList = []
		getMsg()
	})
	
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}
	.container{
		padding: 0 30rpx;
	}
	.list{
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e4e7ed;
		.icon{
			width: 85rpx;
			height: 85rpx;
		}
		.item-right{
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #333;
			.top{
				display: flex;
				justify-content: space-between;
				.title{
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
			}
		}
	}
</style>