<template>
	<view class="page">
		<view style="position: absolute; top: 0; width: 100%;">
			<image :src="$imgUrl('/bg.png')" style="width: 100%; height: 490rpx;border-radius: 0 0 40rpx 40rpx;"></image></view>
		<view class="my-top">
			<view class="head" :style="'background-color: rgba(38,197,112,'+(scrollTop/50)+');'">
				<view class="logo-title">
					<image :src="$imgUrl('/logo.png')" ></image>
				</view>
				<view class="title">
					
				</view>
				<view class="setting-mess"></view>
			</view>
		</view>
		<view class="main">
		<view class="message-list">
<!-- 			<view class="list" @click="toMsgList">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/msg1.png')"  mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>通知消息</text>
						</view>
						
						<view class="describe">
							<view v-if="tableList.length>0" >
								<view v-html="tableList[0].content"></view>
							</view>
							<view v-else >暂无</view>
						</view>
					</view>
				</view>
				<view class="more" v-if="tableList.length>0">
					<view class="icon-more">{{formatDateTime(tableList[0]?tableList[0].createdAt:'')}}</view>
				</view>
			</view> -->
			<view class="list" @click="gopath('/pagesA/procedureList/procedureList?type=通知消息')">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/xtxx.png')"  mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>系统通知</text>
						</view>
						
						<view class="describe">
							<view v-if="tzlist.length>0" >
								<view v-if="tzlist[0].content.type == '2'">{{tzlist[0].content.title}}【图片】</view>
								<view v-else >{{tzlist[0].content.title}}</view>
							</view>
							<view v-else >暂无</view>
							<!-- <text>{{?tableList[0].content:''}}</text> -->
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num" v-if="tzlist.length>0">{{tzlist.length}}</view>
					<view class="icon-more" v-if="tzlist.length>0">{{formatDateTime(tzlist[0]?tzlist[0].createTime:'')}}</view>
				</view>
			</view>
			<view class="list" @click="gopath('/pagesA/procedureList/procedureList?type=物业缴费通知')">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/zjjf.png')"  mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>物业缴费通知</text>
						</view>
						
						<view class="describe">
							<view v-if="wylist.length>0" >
								<view v-if="wylist[0].content.type == '2'">{{wylist[0].content.title}}【图片】</view>
								<view v-else >{{wylist[0].content.title}}</view>
							</view>
							<view v-else >暂无</view>
							<!-- <text>{{?tableList[0].content:''}}</text> -->
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num" v-if="wylist.length>0">{{wylist.length}}</view>
					<view class="icon-more" v-if="wylist.length>0">{{formatDateTime(wylist[0]?wylist[0].createTime:'')}}</view>
				</view>
			</view>
			<view class="list" @click="gopath('/pagesA/procedureList/procedureList?type=租金缴费通知')">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/wyjf.png')"  mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>租金缴费通知</text>
						</view>
						
						<view class="describe">
							<view v-if="zjlist.length>0" >
								<view v-if="zjlist[0].content.type == '2'">{{zjlist[0].content.title}}【图片】</view>
								<view v-else >{{zjlist[0].content.title}}</view>
							</view>
							<view v-else >暂无</view>
							<!-- <text>{{?tableList[0].content:''}}</text> -->
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num" v-if="zjlist.length>0">{{zjlist.length}}</view>
					<view class="icon-more" v-if="zjlist.length>0">{{formatDateTime(zjlist[0]?zjlist[0].createTime:'')}}</view>
				</view>
			</view>
			<view class="list" @click="gopath('/pagesA/procedureList/procedureList?type=租赁提醒')">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/zlxx.png')"  mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>租赁提醒</text>
						</view>
						
						<view class="describe">
							<view v-if="zllist.length>0" >
								<view v-if="zllist[0].content.type == '2'">{{zllist[0].content.title}}【图片】</view>
								<view v-else >{{zllist[0].content.title}}</view>
							</view>
							<view v-else >暂无</view>
							<!-- <text>{{?tableList[0].content:''}}</text> -->
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num" v-if="zllist.length>0">{{zllist.length}}</view>
					<view class="icon-more" v-if="zllist.length>0">{{formatDateTime(zllist[0]?zllist[0].createTime:'')}}</view>
				</view>
			</view>
		</view>

		
		</view>
		<!-- tabbar -->
		<tabbar :tabBarShow="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				scrollTop: 0,
				tableList:[],
				pagesize :{
					pageNumber: 1,
					pageSize: 2,
					receiverMerchant:''
				},
				zllist:[],
				tzlist:[],
				zjlist:[],
				wylist:[]
			}
		},
		
		onShow() {
			const isLogin = uni.getStorageSync('token');
			if (isLogin == '') {
				// 如果未登录，跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				
				this.$http.sendRequest('/cerePlatformMerchant/queryByPage', 'POST',{"pageSize":10,pageNumber:0,phone:uni.getStorageSync('user').phone}).then(res => {
					 if(res.data.code == '20004' || res.data.code == '20003'){
						 uni.navigateTo({
						 	url: '/pages/login/login'
						 })
					 }
				})
			}

		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		mounted() {
			this.getALL()
		},
		onShow() {
			this.getmsg()
		},
		methods:{
			getmsg() {
				this.zllist = []
				this.tzlist = []
				this.zjlist = []
				this.wylist = []
				let info = {
					phone:uni.getStorageSync('user').phone,
					// phone:'18121815598',
					isRead:'0'
				}
				
				this.$http.sendRequest('/cereMessage/viewMessage', 'POST',{...info,messageType:'租赁提醒'},1).then(res => {
					let obj = res.data.data
					for(let prop in obj) {
					    if(obj.hasOwnProperty(prop)) { // 确保只访问实例上的属性，不包括继承的
							obj[prop][0].content = JSON.parse(obj[prop][0].content)
							this.zllist.push(obj[prop][0])
					    }
					}
					this.zllist.reverse()
				})
				this.$http.sendRequest('/cereMessage/viewMessage', 'POST',{...info,messageType:'通知消息'},1).then(res => {
					let obj = res.data.data
					for(let prop in obj) {
					    if(obj.hasOwnProperty(prop)) { // 确保只访问实例上的属性，不包括继承的
							obj[prop][0].content = JSON.parse(obj[prop][0].content)
							this.tzlist.push(obj[prop][0])
					    }
					}
					this.tzlist.reverse()
					console.error(this.tzlist)
				})
				this.$http.sendRequest('/cereMessage/viewMessage', 'POST',{...info,messageType:'租金缴费通知'},1).then(res => {
					let obj = res.data.data
					for(let prop in obj) {
					    if(obj.hasOwnProperty(prop)) { // 确保只访问实例上的属性，不包括继承的
							obj[prop][0].content = JSON.parse(obj[prop][0].content)
							this.zjlist.push(obj[prop][0])
					    }
					}
					this.zjlist.reverse()
					console.error(this.zjlist)
				})
				this.$http.sendRequest('/cereMessage/viewMessage', 'POST',{...info,messageType:'物业缴费通知'},1).then(res => {
					let obj = res.data.data
					for(let prop in obj) {
					    if(obj.hasOwnProperty(prop)) { // 确保只访问实例上的属性，不包括继承的
							obj[prop][0].content = JSON.parse(obj[prop][0].content)
							this.wylist.push(obj[prop][0])
					    }
					}
					this.wylist.reverse()
					console.error(this.wylist)
				})
			},
			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;
			},
			getALL(){
				// this.pagesize.receiverMerchant = uni.getStorageSync('user').phone
					this.$http.sendRequest('/cereMessageNotification/queryByPage','POST',this.pagesize,1).then(res => {
						
						 this.tableList =res.data.data.content 
					})
						},
			toDialogue(){
				uni.navigateTo({
					url:'/pages/dialogue/dialogue'
				})
			},
			gopath(e) {
				uni.navigateTo({
					url:e
				})
			},
			toMsgList(){
				uni.navigateTo({
					url:'/pages/procedureList/procedureList'
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'message.scss';
</style>
