<template>
	<view class="body" style="background: #f7f4f8;">

		<view class="font">
			<uni-icons
				style="z-index: 1111;position: relative; padding-left: 11px;color: white;font-weight: 100;cursor: pointer;"
				type="back" size="23" @click="backs"></uni-icons>
			<text style="margin-left: 36%;color: white;">Message</text>
		</view>

		<view class="empty_item" v-if="app_Mes.length == 0">
			<view class="empty_item_img">
				<image src="../../static/img/message.png" mode=""></image>
			</view>
			<!-- <view>No comment!</view> -->
			<!-- <view><button @click="gotoindex()">Go to see</button></view> -->
		</view>
		<view class="mask" v-show="isShwo" @click="isShwo=false"></view>
		<button class="body-btn" style="z-index: 10; position: relative;" @click="shop()">Continue shopping</button>

		<view>
			<!-- <uni-nav-bar  left-icon="left" :statusBar="true"  title="Message" 
					color="#fff" backgroundColor="#000000"  @clickLeft="back"  :border="false"/> -->
			<!-- 	<view class="one">
					<image src="../../static/img/left_white.png" mode="" @click="back()"></image>
					<view class="one_text">Message</view>
				</view> -->
			<view class="bodys">
				<view class="msg_item" v-for="(item,index) in list.blocks" :key="item.block_title"
					@click="gotopage(item)">
					<view class="msg_time">{{item.block_avaiable_from | Mes}}</view>
					<!-- <text class="y_red" v-show="item.block_id">●</text> -->
					<!-- <view class="msg_content">{{item.}}</view> -->
					<view class="msg_img" v-if="item.block_pic">
						<image :src="item.block_pic" class="imagesize"></image>
					</view>
					<view class="msg_title">{{item.block_title}}</view>
				</view>
				<view class="msg_item" v-for="(item,index) in app_Mes" :key="item.id" @click="gotopage(item)">

					<view class="msg_time">{{ item.add_time | Mes}}</view>
					<text class="y_red" v-show="item.unread == 1">●</text>
					<view class="msg_title">{{ item.mtitle }}</view>
					<view class="msg_content">
					</view>
				</view>
				<!-- <view class="msg_item">
							<view class="msg_time">21/04/2022 14:42:31</view>
							<view class="msg_title">Message heading</view>
							<view class="msg_content">
								estimated to be deliverd on estimated to be deliverd on estim
								ated to be deliverd on estimated to be deliverd on
							</view>
							<view class="msg_img"></view>
						</view> -->
			</view>
		</view>

	</view>

</template>

<script>
	import {
		defaultRequest
	} from '../../api/index.js'
	export default {
		data() {
			return {
				list: [],
				//个人信息
				myMes: {
					_action: 'getmessagelist',
					type: 1,
					importance: '',
					label: '',
					title: '',
					page_index: 1,
					page_size: 100
				},
				//系统信息
				myMes1: {
					_action: 'getmessagelist',
					type: 0,
					importance: '',
					label: '',
					title: '',
					page_index: 1,
					page_size: 100
				},
				app_Mes: [],

			}
		},
		filters: {
			Mes(e) {
				let str = e
				str = str.substring(0, 10);
				const year = str.substring(0, 4)
				let date = str.substring(5, 10)
				date = date.replace('-', '/')
				let time = date + '/' + year
				return time
			}
		},
		methods: {
			// getList(){
			// 	let data={_action:'getfavourableactivities'}
			// 	defaultRequest(data).then(res=>{
			// 		console.info(res)
			// 		if(res.error==0){
			// 			// this.list=res.data

			// 		}
			// 	})
			// },
			getMes() {
				let data = {
					_action: 'getpagedata',
					pagecode: '006-PERSONALCENTERPAGE'

				}

				defaultRequest(data).then(res => {

					let list = res.data.zones

					list.map(item => {
						if (item.zone_code == 'XIAOXI') {
							this.list = item
							console.log(this.list)
						}
					})


				})
				defaultRequest(this.myMes).then(res => {
					console.log(res)
					let i = 0
					if (res.error == 0) {
						this.app_Mes = res.data.message_list
						this.app_Mes.map(item => {
							// console.log(item)
							if (item.unread == 1) {
								i++
							}
						})
						console.log(i)
					}


				})
				defaultRequest(this.myMes1).then(res => {
					// console.log(res)

					if (res.error == 0) {
						this.app_Mes = res.data.message_list
						console.log(this.app_Mes)
					}

				})
			},
			gotopage(item) {
				let data = {
					_action: 'readmessage',
					message_id: ''
				}
				console.log(item)
				if (item.id) {
					data.message_id = item.id
				}
				// else{
				// 	data.message_id = item.block_id
				// }

				defaultRequest(data).then(res => {
					if (res.error == 0) {
						uni.showToast({
							title: 'Read',
							icon: 'none',
							duration: 2000
						})
						console.log(res)
						this.getMes()
					}
				})
				if (item.block_link) {
					if (item.block_link.includes('goodslist')) {
						const i = item.block_link.indexOf('?')
						const src = item.block_link.substring(i)
						uni.navigateTo({
							url: '../category/productList' + src
						})
					} else {
						uni.navigateTo({
							url: '../productDetails/index' + src
						})
					}
				}

			},
			backs() {
				// uni.navigateTo({
				// 	url:'../category/index'
				// })
				// uni.navigateTo({
				// 	// url:'index'
				// 	// url: '../index'
				// 	url:'../account/index'
				// })	
				uni.navigateBack({
					delta: 1,
				})
			},
			shop() {
				uni.navigateBack({
					delta: 1,
				})
			}
		},
		onLoad() {
			let that = this;
			let s = 0;
			let time = setInterval(() => {
				uni.getNetworkType({
					success: (res) => {
						console.log(res.networkType, s);
						if (res.networkType == 'none') {
							uni.showToast({
								icon: 'none',
								title: 'Please connect to the network',
								duration: 3000,
							})
						} else if (res.networkType !== 'none') {
							that.typee = 2;
							clearInterval(time);
							
						}
					}
				})
				s++;
			}, 1000);
			// this.getList()
			this.getMes()
		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #f7f4f8 !important;;
	}
	.font {
		display: flex;
		position: fixed;
		background-color: #000;
		height: 50px;
		// height: 44px;
		width: 100%;
		z-index: 999;
		// padding-top: 28px;
		align-items: center;
		text-align: center;
		top: 0;
		left: 0;
		font-size: 16px;
		padding-top: 20px;
		// font-weight: bold;
	}

	.empty_item {
		height: auto;
		margin: 79px 0 0;
		padding: 10px 50px 0 50px;

		&_img {
			margin-bottom: 0;
		}
	}

	.body {
		padding: 0 32rpx;
		background: #f7f4f8 !important;

		&-btn {
			// margin-top: 42px;
			background: #000;
			border-radius: 8px;
			color: #fff;
			width: 200px;
			height: auto;
			transform: scale(.5);
			z-index: 11;
		}
	}

	.more {
		text-align: right;
		position: relative;

		// margin-top: 20rpx;
		image {
			width: 24rpx;
			height: 6.67rpx;
		}

		.more_delete {
			background-image: url(@/static/img/message.png);
			background-size: 100% 100%;
			width: 102.67rpx;
			height: 67.33rpx;
			position: absolute;
			right: 0;
			bottom: 20rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 24rpx;
			z-index: 999;
		}
	}

	.mask {
		background-color: white;
		opacity: 0;
	}

	.uni-navbar {
		font-size: 32rpx;
		font-weight: bold;
	}

	.y_red {
		font-size: 19rpx;
		color: #940000;
		;
	}

	.bodys {
		// border-top: 13.33rpx #F7F7F7 solid;
		// padding: 50.67rpx 26.67rpx;
		width: 100%;
	}

	.msg_item {
		width: 100%;
		padding-top: 17rpx;
		padding-bottom: 28rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		background-color: #fff;
		// border-bottom: 1px solid #E2E2E2;
		margin-bottom: 30rpx;
		align-items: center;
		&:first-child {
			margin-top: 122.67rpx;
		}

		.msg_time {
			font-size: 25.33rpx;
			font-weight: 400;
			text-align: center;
			// margin-top: 51.33rpx;
		}

		.msg_title {
			font-size: 28rpx;
			margin-top: 20rpx;
			margin-left: 10rpx;
		}

		.msg_content {
			color: #555555;
			font-size: 25.33rpx;
			font-weight: 400;

		}

		.msg_img {
			margin-top: 27.33rpx;
			border-radius: 10rpx;
			width: 100%;
			height: 281.33rpx;
			background-color: #ffdcd3;


		}
	}

	.msg_item:last-child {
		border-bottom: none;
	}

	.imagesize {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
</style>
