<template>
  	<div class="app-bot-nav">
		<van-row type="flex">
			<van-col class="flex1">
				<div @click="toUrl(0)" class="app-bot-nav-item " :class="{active: active===0}">
					<div class="app-bot-nav-item_icon">
						<img class="pre-icon" src="@/assets/images/icon_shouye.png">
						<img class="next-icon" src="@/assets/images/icon_shouye-dianji.png">
					</div>
					<div class="">首页</div>
				</div>
			</van-col>
			<van-col class="flex1" v-if="false">
				<div @click="toUrl(1)" class="app-bot-nav-item " :class="{active: active==1}">
					<div class="app-bot-nav-item_icon">
						<img class="pre-icon" src="@/assets/images/icon-JIANKANGPINGDAO.png">
						<img class="next-icon" src="@/assets/images/icon-JIANKANGPINGDAO2.png">
					</div>
					<div class="">健康频道</div>
				</div>
			</van-col>
			<van-col class="flex1">
				<div @click="toUrl(2)" class="app-bot-nav-item " :class="{active: active==2}">
					<div class="app-bot-nav-item_icon">
						<img class="pre-icon" src="@/assets/images/xiaoxi_icon.png">
						<img class="next-icon" src="@/assets/images/xiaoxi02_icon.png">
					</div>
					<div class="">消息</div>
				</div>
			</van-col>
			<van-col class="flex1">
				<div @click="toUrl(3)" class="app-bot-nav-item " :class="{active: active==3}">
					<div class="app-bot-nav-item_icon">
						<img class="pre-icon" src="@/assets/images/icon_wode.png">
						<img class="next-icon" src="@/assets/images/icon_wode-dianji.png">
					</div>
					<div class="">我的</div>
				</div>
			</van-col>
		</van-row>
	</div>
</template>

<script>
export default {
	name: "AppBotNav",
	data(){
		var urls = [
			{url: "/home/index", count: 0},
			{url: "/healthChannel/index", count: 0},
			{url: "/message/index", count: 0},
			{url: "/me/index", count: 0}
		]
		var active = this.check(urls)
		return {
			active,
			urls
		}
	},
	watch:{
		'$route': {
			handler(n, o){
				this.active = this.check()
			},
			immediate: true
		}
	},
	mounted(){
		
	},
	computed:{

    },
	methods: {
		check(urls){
			urls = urls || this.urls
			var p = this.$route.path

			var index = -1
			urls.forEach((v, i) => {
				if(v.url == p){
					index = i
				}
			});
			return index
		},
		toUrl(type){
			
			this.active = type;
			let url
			if((type == 3 || type == 2) && !this.user.name) {
				url = '/setRole?type=2'
			}else {
				url = this.urls[this.active].url
			}
			if(url){
				this.$router.replace({
					path: url
				})
			}
		}
	}
};
</script>
<style lang="scss" scoped>
@import '../styles/appBotNav.scss';
</style>
<style lang="scss">

</style>
