<template>
	<view class="message-info">
		<view>
			<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
				<view class="message-info-title">消息通知</view>
				<view slot="left"></view>
				<view slot="right" class="message-info-right-title" @click="cupRead()">一键全读</view>
			</uni-nav-bar>
		</view>
		<view class="">
			<view class="message-tab">
				<view :class="subIndex === 0 ? 'message-bottom meeage-change' : 'message-noChange'" @click="checkMessage(0)">
					<uni-badge size="small" :custom-style="subIndex === 0 ? customStyle:customStylet" :text="systemBadge" absolute="rightTop" type="error">系统消息</uni-badge>
				</view>
				<!-- <view :class="subIndex === 1 ? 'message-bottom meeage-change' : 'message-noChange'" @click="checkMessage(1)">
					<uni-badge size="small" :custom-style="subIndex === 1 ? customStyle:customStylet" :text="5" absolute="rightTop" type="error">平台公告</uni-badge>
				</view> -->
			</view>
		</view>
		<view class="">
			<systemMessage ref="systemRef" v-if="subIndex === 0" @systemCount="systemCount"></systemMessage>
			<!-- <platformMessage v-if="subIndex === 1" ></platformMessage> -->
		</view>
	</view>
</template>

<script>
import { back, go2 } from '@/utils/hook.js'
import systemMessage from './system-message.vue'
import platformMessage from './platform-message.vue'
export default {
	components:{
		systemMessage,
		platformMessage
	},
	data() {
		return {
			subIndex: 0,
			systemBadge:0,
			customStyle: {
				top: '5px',
				background:'#FF0000 '
			},
			customStylet:{
				top: '-13px',
				background:'#FF0000 '
			}
		}
	},
	methods: {
		back,
		checkMessage(item) {
			this.subIndex = item
		},
		systemCount(item){
			this.systemBadge = item
			console.log('this.systemBadge',this.systemBadge)
		},
		cupRead(){
			this.$refs.systemRef.allread()
		}
	}
}
</script>

<style lang="scss">
.message-info {
	.message-info-title {
		width: 100%;
		font-size: 36rpx;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
		font-weight: 500;
	}
	.message-info-right-title {
		font-size: 28rpx;
		color: #007aff;
		text-align: right;
		line-height: 40rpx;
		font-weight: 500;
	}
	.message-tab {
		display: flex;
		justify-content: space-around;
		height: 88rpx;
		background: #ffffff;
		align-items: center;
	}
	.message-bottom {
		line-height: 88rpx;
		border-bottom: 4rpx solid #007aff;
		border-bottom-right-radius: 2rpx;
		border-bottom-left-radius: 2rpx;
	}
	.message-noChange {
		font-size: 28rpx;
		color: #888888;
		text-align: center;
		font-weight: 400;
	}
	.meeage-change {
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		font-weight: 500;
	}
}
</style>
