<template>
	<nav class="mui-bar mui-bar-tab">
		<router-link :to="router[0]" :class="'mui-tab-item '+(routeName==router[0]['name']?'mui-active':'')">
			<span class="mui-icon iconfont icon-shouye2"></span>
			<span class="mui-tab-label">首页</span>
		</router-link>
		<router-link :to="router[1]" :class="'message-nav mui-tab-item '+(routeName==router[1]['name']?'mui-active':'')">
			<span class="mui-icon iconfont icon-xiaoxi1"></span>
			<span class="mui-tab-label">消息</span>
			<i v-show="wd_message_num && wd_message_num>0" v-text="wd_message_num"></i>
		</router-link>
		<router-link :to="router[2]" :class="'mui-tab-item '+(routeName==router[2]['name']?'mui-active':'')">
			<span class="mui-icon iconfont icon-wode1"></span>
			<span class="mui-tab-label">我的</span>
		</router-link>
	</nav>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'NavMenu',
		props: {
			visible: {
				require: false,
				default: true,
			},
			router: {
				require: true,
				type: Array,
				default: [{
					name: 'Home'
				}, {
					name: 'Home'
				}, {
					name: 'Home'
				}],
			},
		},
		created() {
			console.log(this.$route);
		},
		methods: {},
		mounted() {},
		computed: {
			routeName: {
				// getter
				get: function() {
					return this.$route.name;
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...mapGetters({
				wd_message_num: 'wd_message_num',
			})
		}
	}
</script>

<style src="$project/assets/css/iconfont.css"></style>
<style scoped>
	.message-nav {
		position: relative;
	}

	.message-nav i {
		position: absolute;
		top: 1px;
		right: 40px;
		background-color: red;
		border-radius: 9px;
		color: #fff;
		padding: 0px 6px;
		font-size: 12px;
		line-height: 18px;
		z-index: 99;
	}
</style>
