<template>
	<view class="box flex justify-center flex-column">
		<view class="center flex flex-column flex-start" v-for="detail,index in list" :key="index">
			<span class="title">{{detail.title}}</span>
			<span class="span" style="margin-top: 20rpx;">
				<!-- <u-parse :content="detail.desc" :selectable="true"></u-parse> -->
			 	<rich-text :nodes="detail.desc" selectable user-select></rich-text>
			</span>
			<span  class="span" style="margin-top: 20rpx; color: #999999 ;">{{detail.createtime_text}}</span>
			<span class="jiao">
				<u-badge :isDot="true" type="error"></u-badge>
			</span> 
		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				list:[],
				loadStatus:'',
				loadStatus: 'loading'
			};
		},
		onLoad(option) {
			console.log(option)
			this.getDetail();
			this.resetLists()
		},
		onReachBottom() {
			this.page++;
			this.getDetail();
		},
		methods: {
			getDetail() {
				uni.$u.http.get('/api/school/message/message_list', {
					params: {
						page: this.page,
						limit: this.limit,
						status: 'system,activity',
						type: "1",
					}
				}).then(res => {
					if (res.code == 1) {
						this.list = [...res.data.list , ...this.list ]
						this.loadStatus = this.list.length >= res.data.count ? 'nomore' : 'loading';
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(error => {});
			},
			// 重置列表
			resetLists() {
				this.page = 1;
				this.alllist = [];
				this.loadStatus = 'loading'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #F1F2F8;
		width: 750rpx;
		height: 100vh;
		margin: 0 auto;
	}

	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.flex-start {
		align-items: flex-start;
	}

	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
	}

	.justify-center {
		justify-content: center;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.center {
		margin: 30rpx;
		width: 690rpx;
		height: 278rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		.span {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			line-height: 36rpx;
			color: #202020;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 34rpx;
			color: #202020 ;
		}
		.jiao {
			position: absolute;
			left: 0;
			top: 0;
		}
	}
</style>