<template>
	<scroll-view class="msg" scroll-y>
		<view class="empty" v-show="empty == true">
			<image class="empty_icon" src="/static/imgs/none_content.png"></image>
			<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>
	</scroll-view>
</template>

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

	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 } = item
			const res = await Mine.read({ id, isRead: 2 })
			if (res) {
				this.getList()
			}
		},
		goHome() {
			uni.switchTab({ url: '/pages/menu/menu' });
		}
	}

}
</script>

<style lang="scss" scoped>
	
.empty {
	 position: fixed;
	 /* 居中对齐begin */
	 left: 50%;
	 /* 兼容老版本的方法 */
	 -webkit-transform: translateX(-50%);
	 transform: translateX(-50%);
	 margin-top: 200rpx;
	
	.empty_icon {
		 width: 325rpx;
		 height: 296rpx;
		 
	}
	.empty_text {
		font-size: 20rpx;
		margin-top: 10rpx;
		font-family: ArialMT;
		color: #666666;
		text-align: center;
	}
	.empty_button {
		width: 128rpx;
		height: 46rpx;
		margin-top: 10rpx;
		background: #006ECF;
		border-radius: 10rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 46rpx;
		color: #fff;
	}
}

.msg_item {
	width: 100%;
	height: 116rpx;
	background: #FFFFFF;
	padding: 24rpx 62rpx;
	box-sizing: border-box;

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

		.sign {
			width: 16rpx;
			height: 16rpx;
			background: #006ECF;
			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: PingFangSC-Regular,
				PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 28rpx;
		}
	}

	.msg_content {
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
	}


}
</style>