<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.Notification }}</navigation>
		<!-- #ifdef H5 -->
		<view class="bodyH5">
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="body">
						<!-- #endif -->
			<view class="userItem" v-for="(item, index) in userInfoObj" :key="index" @click="gotoDetails(item.id)">
				<u-icon class="icon" :name="'../../static/home/ic_proclamation.png'" size="60rpx" width="60rpx">
				</u-icon>
				<view class="content">
					<view class="title">{{item.title}}</view>
					<view class="date">{{ i18n.Release }}: {{item.timestr}}</view>
				</view>
			</view>
		</view>
		<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0"></u-empty>
		<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" v-if="userInfoObj.length" height="80" />
	</view>
</template>

<script>
	import api from '@/utils/api'
	export default {
		name: "notification",
		data() {
			return {
				isLoadMore: false, //是否加载中
				loadStatus: 'loadmore',
				loadingText: this.$t("login").toload,
				loadmoreText: this.$t("login").pullup,
				nomoreText: this.$t("login").Nomore,
				form: {
					pageNumber: 1,
					pageSize: 20,
				},
				userInfoObj: [],
			};
		},
		computed: {
			i18n() {
				return this.$t("me");
			},
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.form.pageNumber += 1
				this.getRecordList();
			}
		},
		onLoad() {
			this.getRecordList()
		},
		onShow() {},
		methods: {
			// 公告列表
			getRecordList() {
				this.isLoadMore = true
				api.notices(this.form).then(res => {
					if (res.length) {
						if (this.form.pageNumber > 1) {
							this.userInfoObj = this.userInfoObj.concat(res)
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							}
						} else {
							this.userInfoObj = res
							for (var i = 0; i < this.userInfoObj.length; i++) {
								if (this.userInfoObj[i].addTime) {
									this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
										i].addTime)
								}
							}
                            
						}
						if (this.userInfoObj.length >= Number(res.length)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						} else {
							this.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
						this.userInfoObj = []
					}

					this.$forceUpdate()
				})
			},
			gotoDetails(index) {
				uni.navigateTo({
					url: `/pages/me/notificationDetails?id=${index}`
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {

		.body {
			overflow: hidden;
			margin-top: 200rpx !important;
			padding: 0 24rpx;

			.userItem {
				position: relative;
				background: #211F32;
				border-radius: 32rpx;
				display: flex;
				margin-top: 32rpx;
				height: 218rpx;
				overflow: hidden;
				box-sizing: border-box;

				.icon {
					height: 60rpx;
					margin-left: 20rpx;
					margin-right: 12rpx;
					margin-top: 20rpx;
				}

				.content {
					overflow: hidden;
					margin-top: 20rpx;
					height: 218rpx;

					.title {
						width: 574rpx;
						height: 116rpx;
						font-size: 28rpx;
						padding-right: 36rpx;
						// 超出字符省略成...
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						display: -webkit-box; //兼容
						white-space: normal !important;
						-webkit-line-clamp: 3; //显示行数
						-webkit-box-orient: vertical;
					}

					.date {
						width: 610rpx;
						height: 64rpx;
						line-height: 64rpx;
						font-size: 28rpx;
						color: #A1A0A8;
						border-top: 1px solid #323045;
						margin-top: 16rpx;
					}
				}





			}

		}
		
		
		.bodyH5{
			overflow: hidden;
			margin-top: 100rpx !important;
			padding: 0 24rpx;
		
			.userItem {
				position: relative;
				background: #211F32;
				border-radius: 32rpx;
				display: flex;
				margin-top: 32rpx;
				height: 218rpx;
				overflow: hidden;
				box-sizing: border-box;
		
				.icon {
					height: 60rpx;
					margin-left: 20rpx;
					margin-right: 12rpx;
					margin-top: 20rpx;
				}
		
				.content {
					overflow: hidden;
					margin-top: 20rpx;
					height: 218rpx;
		
					.title {
						width: 574rpx;
						height: 116rpx;
						font-size: 28rpx;
						padding-right: 36rpx;
						// 超出字符省略成...
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						display: -webkit-box; //兼容
						white-space: normal !important;
						-webkit-line-clamp: 3; //显示行数
						-webkit-box-orient: vertical;
					}
		
					.date {
						width: 610rpx;
						height: 64rpx;
						line-height: 64rpx;
						font-size: 28rpx;
						color: #A1A0A8;
						border-top: 1px solid #323045;
						margin-top: 16rpx;
					}
				}
		
		
		
		
		
			}
		
		}
		

	}
</style>
