<template>
	<footer class="footer">
		<ul>
			<li @click="navValue = 1">
				<router-link to="/">
					<img :src="navValue == 1 ? require('../assets/home_active.png') : require('../assets/home.png')" alt="首页">
				</router-link>
			</li>
			<li @click="navValue = 2">
				<router-link to="Find">
					<img :src="navValue == 2 ? require('../assets/find_active.png') : require('../assets/find.png')"  alt="发现">
					</router-link>
			</li>
			<li>
			</li>
			<li @click="navValue = 5">
				<router-link to="Foot">
					<img :src="navValue == 4 ? require('../assets/foot_active.png') : require('../assets/foot.png')" alt="足迹">
					</router-link>
			</li>
			<li @click="navValue = 5">
				<router-link to="HomeYX">
					<img :src="navValue == 5 ? require('../assets/my_active.png') : require('../assets/my.png')" alt="我的">
					</router-link>
			</li>
			<div class="center" @click="backgroundShow">
				<img src="../assets/center.png" alt="">
			</div>
		</ul>
		
	</footer>
</template>

<script>
	export default {
	  props:['BottomNav'],
	  data (){
		  return {
			navValue:this.BottomNav,
		  }
	  },
	   methods: {
		backgroundShow() {
		  this.$parent.backgroundShow('Background');
		},
		isLogin(){
			var that = this;
			var userInfo = localStorage.getItem('userInfo');
			// if(!userInfo){
			// 	this.$toast('未登录');
			// 	setTimeout(function(){
			// 		that.$router.push('/Login');
			// 	},1000)
			// }else{
				this.navValue = 4;
			// }
		}
	  }
	}
</script>

<style lang="stylus" scoped>
	.footer{
		position fixed
		bottom 0
		left 0
		right 0
		z-index 1000
		background-color white
		ul{
			position relative
			li{
				width 20%
				float left
				text-align center
				height 100%
				padding-top 10px
				img{
					width 65%
				}
			}
			.center{
				z-index 500
				background-color white
				border-radius 100px
				position absolute
				bottom -100px
				left 50%
				margin-left -66px
				text-align center
				box-sizing border-box
				width 132px
				height 132px
				padding-top 16px
				img{
					width 100px
					height 100px
					border-radius 100px
				}
			}
		}
		
		
	}
</style>