<!--
 * @Author: XHC
 * @Date: 2025-05-19 15:19:14
 * @LastEditors: XHC
 * @LastEditTime: 2025-06-05 17:46:03
 * @Description: 消息
-->
<template>
    <view class="message">
		<view class="notice">
			<view class="notice-list" v-for="(item, index) in noticeList" :key="index">
				<view class="title">
					<uni-icons fontFamily="iconfont" color="#1571F3" :size="24">{{'&#xe651;'}}</uni-icons>
					<text class="title-text">{{ item.title }}</text>
				</view>
				<view class="info">{{ item.info }}</view>
				<view class="bottom">
					<view class="time"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</view>
					<view class="detail"><text>查看详情</text> <uni-icons type="right" color="#0F64B9" size="20" /></view>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<view class="top-back" @click="topBack" v-if="isShow">
			<uni-icons type="up" size="16" color="#fff"></uni-icons>
			<text>顶部</text>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onPageScroll } from "@dcloudio/uni-app";

let isShow = ref(false)

// 通知列表
const noticeList = reactive([
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
	{ title: '系统通知', info: '即将开展“控制楼巡检”任务，请…', time: '2025-02-20' },
])

// 根据滚动距离以推断是否有显示返回顶部功能
onPageScroll((e) => {
	isShow.value = e.scrollTop >= 300
});

//  点击绑定的事件
const topBack = () => {
	uni.pageScrollTo({
		scrollTop: 0, // 滚动到顶部
		duration: 300 // 动画时长 300ms
	});
};

</script>

<style lang="scss" scoped>
.message {
	.notice {
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 20rpx;
		padding: 10rpx 0;
		.notice-list {
			margin: 20rpx;
			padding: 20rpx;
			background: #F1F6FD;
			border-radius: 10rpx;
			.title {
			   color: #004291;
			   font-weight: bold;
			   font-size: 32rpx;
			   .title-text {
				   display: inline-block;
				   max-width: 90%;
			   }
		   }
		   .info, .bottom {
			   color: #75777A;
			   font-size: 23rpx;
			   padding: 20rpx 0;
			}
			.info {
			   border-bottom: 3rpx solid #fff;
		   	}
			.title-text, .info {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		   .bottom, .detail {
				display: flex;
				justify-content: space-between;
    			align-items: center;
		   }
		}
	}
}
</style>