<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>
							<!-- <text>{{?tableList[0].content:''}}</text> -->
						</view>
					</view>
				</view>
				<view class="more">
					<!-- <view class="more-num">{{tableList.length}}</view> -->
					<view class="icon-more">{{formatDateTime(tableList[0]?tableList[0].createdAt:'')}}</view>
				</view>
			</view>
			<!-- <view class="list">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/msg2.png')" mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>新订单提醒</text>
						</view>
						<view class="describe">
							<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num">2</view>
					<view class="icon-more">11:28</view>
				</view>
			</view>
			<view class="list">
				<view class="icon-data">
					<view class="icon">
						<image  :src="$imgUrl('/msg3.png')"   mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>发货提醒</text>
						</view>
						<view class="describe">
							<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num">2</view>
					<view class="icon-more">11:28</view>
				</view>
			</view>
			<view class="list">
				<view class="icon-data">
					<view class="icon">
						<image  :src="$imgUrl('/msg4.png')"  mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>退款/售后提醒</text>
						</view>
						<view class="describe">
							<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num">2</view>
					<view class="icon-more">11:28</view>
				</view>
			</view>
			<view class="list">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/msg5.png')"  mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>库存提醒</text>
						</view>
						<view class="describe">
							<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num">2</view>
					<view class="icon-more">11:28</view>
				</view>
			</view>
			<view class="list">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/msg6.png')" mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>活动通知</text>
						</view>
						<view class="describe">
							<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num">2</view>
					<view class="icon-more">11:28</view>
				</view>
			</view>
			<view class="list">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/msg7.png')" mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>临时铺位申请</text>
						</view>
						<view class="describe">
							<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num">2</view>
					<view class="icon-more">11:28</view>
				</view>
			</view> -->
			<!-- <view class="list">
				<view class="icon-data">
					<view class="icon">
						<image :src="$imgUrl('/msg7.png')" mode=""></image>
					</view>
					<view class="data">
						<view class="title">
							<text>缴费通知</text>
						</view>
						<view class="describe">
							<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="more-num">2</view>
					<view class="icon-more">11:28</view>
				</view>
			</view> -->
		</view>
		
		<!-- <view class="message-list">
			<view class="bidding-title"><view class="bidding-title-line"></view>消息<text>(5)</text></view>
			<view class="message-list" style="padding: 0;">
				<view class="list" v-for="(item,index) in 4" :key="index" @click="toDialogue">
					<view class="icon-data">
						<view class="icon">
							
						</view>
						<view class="data">
							<view class="title">
								<text>李雷有四</text>
							</view>
							<view class="describe">
								<text>这里有最新消息这里有最新消息这里有最新消息这里有最新消息</text>
							</view>
						</view>
					</view>
					<view class="more">
						<view class="more-num">2</view>
						<view class="icon-more">11:28</view>
					</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
				}
			}
		},
		onLoad() {
		
		},
		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()
		},
		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;
			},
			getALL(){
					this.$http.sendRequest('/cereMessageNotification/queryByPage','POST',this.pagesize,1).then(res => {
						
						 this.tableList =res.data.data.content 
					})
						},
			toDialogue(){
				uni.navigateTo({
					url:'/pages/dialogue/dialogue'
				})
			},
			toMsgList(){
				uni.navigateTo({
					url:'/pages/procedureList/procedureList'
				})
			},

		}
	}
</script>

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