<template>
	<view class="bigBox">
		<view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}">
    		<u-icon @click="Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon>
    		<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">消息列表</view>
    	</view>
		<view :style="{'padding-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight)+'px'}">
			<scroll-view class="msg" scroll-y>
				<view class="empty" v-show="empty == true">
					<view :style="{'text-align':'center'}">
						<image class="empty_icon" src="/static/imgs/wuxiaoxizhanweitu.png"></image>
					</view>
					<view  class="empty_text">——暂无消息，去品尝杯咖啡吧——</view>
					<button class="empty_button" @click="goHome">去品尝</button>
				</view>
				<view class="msg_item" v-for="item in list" @click="toRead(item)" :key="item.id">
					<view class="msg_item_title_time">
						<view v-if="item.isRead == 1" class="sign"></view>
						<h3 class="title">{{ item.title || 'HOOLOO' }}</h3>
						<view class="time">{{ item.createdAt }}</view>
					</view>
					<view class="msg_content">{{ item.message }}</view>
				</view>
				<show-toast ref="toast"/>
			</scroll-view>
		</view>
	</view>

</template>

<script>
import Mine from '@/request/mine'
import Utils from '@/utils/utils'
export default {
	data() {
		return {
			empty: false,
			list: [],
			Utils
		}
	},
	onShow() {
		this.getList()
	},

	computed:{
		systemBarHeight(){
          return  this.$store.state.user.systemBarHeight
        }
	},

	methods: {
		async getList() {
			const { data } = await Mine.getMsg();
			this.list = data.rows
			if(this.list && this.list.length>0) {
				this.empty = false;
			} else {
				this.empty = true;
			}
		},
		async toRead(item) {
			const { id,targetId,type } = item
			const res = await Mine.read({ id, isRead: 2 })
			if (res) {
				this.getList()
			}
			if(type==1) {
				uni.setStorageSync('orderId', targetId);
				let url = '/orderSubPackage/pages/orderInfo/index'
				uni.navigateTo({ url })
			} else {
				let url = '/mineSubPackage/pages/coupon/index'
				uni.navigateTo({ url })
			}

		},
		goHome() {
			uni.switchTab({ url: '/pages/menu/menu' });
		}
	}

}
</script>

<style lang="scss" scoped>
.bigBox {
	.topBar{
		position: fixed;
		width: 100%;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999;
		padding-left: 34rpx;
		.tabTitle{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			text-align: center;
			width: 79%;
			color: #333333
		}
	}
}

.empty {
	 position: fixed;
	 /* 居中对齐begin */
	 left: 50%;
	 /* 兼容老版本的方法 */
	 -webkit-transform: translateX(-50%);
	 transform: translateX(-50%);
	 margin-top: 311rpx;
	
	.empty_icon {
		 width: 324rpx;
		 height: 236rpx;
		 
	}
	.empty_text {
		margin-top: 44rpx;
		width: 414rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.empty_button {
		margin-top: 35rpx;
		width: 167rpx;
		height: 64rpx;
		border-radius: 2rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		background: #0050F6;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 64rpx;
	}
	.empty_button::after{
		border-radius: 2rpx;
	}
}

.msg_item {
	width: 100%;
	background: #FFFFFF;
	padding: 24rpx 32rpx;
	box-sizing: border-box;
	margin-left: 30rpx;

	.msg_item_title_time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.sign {
			width: 16rpx;
			height: 16rpx;
			background: #0050F6;
			border-radius: 50%;
			position: absolute;
			left: -30rpx;
			top: 30%
		}

		.title {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 34rpx;
		}

		.time {
			font-size: 20rpx;
			font-family: ArialMT;
			color: #999999;
			line-height: 22rpx;
			margin-right: 32rpx;
		}
	}

	.msg_content {
			width: 438rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 8rpx;
			line-height: 28rpx;
	}


}
</style>