<template>
	<view class="pages">
		<view v-if="tableList.length == 0" style="text-align: center;margin-top: 60rpx;color:#808080;">暂无数据</view>
		<view class="contents">
			<view class="box" v-for="(item,index) in tableList" @click="getDetail(item)">
				<view style="width:70%">
					<view class="title">
						{{item.announcementTitle}}
					</view>
					<view class="desc">
						<view v-html="item.announcementContent"></view>
					</view>
				</view>
				<view class="more">
					<view class="more-num" v-if="item.isRead == '0'">1</view>
					<view class="icon-more">{{formatDateTime(item.releaseTime)}}</view>
				</view>
				<!-- 	<view class="time">
					{{formatDateTime(item.createTime)}}
				</view> -->

			</view>
		</view>
		<view v-if="isLoading" style="text-align: center; padding: 20rpx;">加载中...</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [],
				pageindex: {
					pageNumber: 0,
					pageSize: 20,
				},
				isLoading:false
			}
		},
		onLoad(option) {

		},
		onShow(option) {

		},
		mounted() {
			this.getALL()
		},
		methods: {
			formatDateTime(dateTimeString) {
				// 将输入的日期时间字符串转换为Date对象
				const inputDate = new Date(dateTimeString);
				const now = new Date();

				// 获取年、月、日来进行比较
				const inputYear = inputDate.getFullYear();
				const inputMonth = inputDate.getMonth();
				const inputDay = inputDate.getDate();

				const currentYear = now.getFullYear();
				const currentMonth = now.getMonth();
				const currentDay = now.getDate();

				// 检查输入的日期是否为今天
				const isToday = (inputYear === currentYear) && (inputMonth === currentMonth) && (inputDay === currentDay);

				// 格式化时间为HH:mm
				const hours = inputDate.getHours().toString().padStart(2, '0');
				const minutes = inputDate.getMinutes().toString().padStart(2, '0');
				const timeString = `${hours}:${minutes}`;

				// 如果是今天，则在时间前面加上'今天'
				return isToday ? `今天${timeString}` : timeString;
			},
			onReachBottom() {
			    // 滚动到底部时加载更多数据
			    this.loadMoreData();
			},
			getALL() {
				this.isLoading = true;
				this.$http.sendRequest('/cereAnnouncement/queryByPage', 'POST', this.pageindex, 1).then(res => {
					
					this.tableList = res.data.data.content
					this.isLoading = false;
				})
			},
			loadMoreData() {
			    if (this.isLoading) return; // 如果正在加载，不重复请求
			    this.isLoading = true;
			    this.pageindex.pageNumber++;
			   this.$http.sendRequest('/cereAnnouncement/queryByPage', 'POST', this.pageindex, 1).then(res => {
			        this.tableList = this.tableList.concat(res.data.data.content);
			        this.isLoading = false;
			    });
			},
			getDetail(items) {
				uni.navigateTo({
					url: `/pages/procedure/procedure?item=${encodeURIComponent(JSON.stringify(items))}`
					// url: `/pagesA/procedureList/procedureDetail?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		text-align: right;

		.more-num {
			display: inline-block;
			background-color: #f04746;
			border-radius: 100rpx;
			color: #fff;
			font-size: 20rpx;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
		}

		.icon-more {
			margin-top: 14rpx;
			font-size: 28rpx;
			color: #afafaf;
		}
	}

	.pages {
		width: 100vw;
		height: 100%;
		position: relative;
		overflow-y: auto;
		background-color: #f6f6f6;

		.contents {
			width: 100%;

			background-color: #fff;
			margin-top: 20rpx;

			.box {
				width: 94%;
				margin: 0 auto;
				padding: 28rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 30rpx;
					font-weight: bold;
				}

				.time {
					margin: 20rpx 0;
					color: #888D9C;
					font-size: 24rpx;
				}

				.desc {
					color: #888D9C;
					font-size: 24rpx;
					text-align: justify;
					margin-top: 10px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;

				}
			}
		}
	}
</style>