<template>
	<view>
		<u-navbar title="消息" :is-back="false" :title-bold="true">
			<view slot='right'>
				<view class="rigBtn" @click="clearMsg">
					清除未读
					<u-image width="32rpx" height="32rpx" src="../../static/clear.png"
						style="margin-left: 12rpx;transform: translateY(5rpx);"></u-image>
				</view>
			</view>
		</u-navbar>

		<!-- 	<view class="navBar">
			<view class="content">
				消息
			</view>
			<view class="rigBtn" @click="clearMsg">
				清除未读
				<u-image width="32rpx" height="32rpx" src="../../static/clear.png"
					style="margin-left: 12rpx;transform: translateY(5rpx);"></u-image>
			</view>
		</view> -->
		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="(item, index) in mesList" :key="index" @click="toMesgInfo(item)">
				<view class="left">
					<u-image width="88rpx" height="88rpx" border-radius="50%" :src="item.photo" class="img">
					</u-image>
				</view>
				<view class="right">
					<view class="title u-relative" >
						{{item.name}}
						<view class="dian" v-if="!item.isRed">
							
						</view>
					</view>
					<view class="info">
						{{item.content}}
					</view>
				</view>
				<view class="time">
					{{item.time}}
				</view>
			</view>
		</view>
		<u-modal v-model="show" confirm-color="#F44D4D" @cancel="show =false" @confirm="confirm"
			:show-cancel-button="true" :show-title="false">
			<view class="text">
				确定清除未读消息？
			</view>
		</u-modal>
		<u-tabbar v-model="vuex_current" :inactive-color="vuex_inactiveColor" :activeColor="vuex_activeColor"
			:list="vuex_tabBar"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mesList: [
					// {
					// 	photo: '../../static/mes1.png',
					// 	name: '会员中心',
					// 	content: '恭喜您，您获得了一次免费体验高级会员的机会…',
					// 	time: '12:34',
					// 	isRed: false,
					// },
					// {
					// 	photo: '../../static/mes2.png',
					// 	name: '上链成功',
					// 	content: '你的订单P06023400已成功上链！',
					// 	time: '12:34',
					// 	isRed: false,
					// },
					// {
					// 	photo: '../../static/mes3.png',
					// 	name: '签约成功',
					// 	content: '你的订单P06023400已成功签约！',
					// 	time: '12:34',
					// 	isRed: false,
					// },
				],
				show: false
			}
		},
		methods: {
			submit() {

			},
		
			toMesgInfo(item) {
				item.isRed = true
				this.mesgLength()
				uni.navigateTo({
					url: './mesgInfo/mesgInfo'
				})
			},
			clearMsg() {
				this.show = true
			},
			confirm() {
				this.mesList.forEach(item => {
					item.isRed = true
				})
				this.mesgLength()
			},
			mesgLength(){
				let arr = this.mesList.filter(item => {
				 	return item.isRed === false
				})
				this.$u.vuex('vuex_tabBar[1].count', arr.length)
			}
		},
		onLoad(){
			this.mesgLength()
		}
	}
</script>

<style lang="scss" scoped>
	
	.rigBtn {
		display: flex;
		color: #606060;
		padding-right: 20rpx;
	}

	.navBar {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		box-shadow: 0px 0px 22rpx 0px #ebebeb;

		.content {
			margin-left: 340rpx;
			font-size: 36rpx;
			font-weight: 600;
			margin-right: 146rpx;
		}
	}

	.list {
		.item {
			position: relative;
			display: flex;
			height: 148rpx;
			padding-top: 30rpx;
			// padding: 0 36rpx;
			padding-left: 36rpx;

			.left {
				margin-right: 24rpx;
			}

			.right {
				flex: 1;
				border-bottom: 2rpx solid #f1f1f1;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
				}
				.dian {
					position: absolute;
					top: 0;
					left: 135rpx;
					width: 10rpx;
					height: 10rpx;
					background-color: red;
					border-radius: 50%;
				}

				.info {
					color: #909399;
					font-size: 24rpx;
					width: 566rpx;
					overflow: hidden;
					/*超出部分隐藏*/
					white-space: nowrap;
					/*禁止换行*/
					text-overflow: ellipsis;
					/*省略号*/
					height: 64rpx;
				}
			}

			.time {
				position: absolute;
				top: 35rpx;
				right: 36rpx;
				color: #BFC2CC;
			}
		}
	}

	.text {
		height: 188rpx;
		line-height: 188rpx;
		border-radius: 24rpx;
		text-align: center;
	}
</style>
