<template>
  	<div class="app-bot-nav">
		<van-row type="flex">
			<van-col v-for="(item, i) in urls" :key="i" class="flex1">
				<div @click="toUrl(i)" class="app-bot-nav-item " :class="{active: active===i}">
					<div class="app-bot-nav-item_icon">
						<img class="pre-icon" :src="item.icon1">
						<img class="next-icon" :src="item.icon2">
					</div>
					<div class="">{{item.name}}</div>
				</div>
			</van-col>

			<!-- <van-col class="flex1">
				<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/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(2)" class="app-bot-nav-item " :class="{active: active==2}">
					<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-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(){
		return {
			active: 0,
			urls: []
		}
	},
	computed:{
		
    },
	watch:{
		'$route': {
			handler(n, o){
				this.active = this.check()
			},
			immediate: true
		}
	},
	created(){
		var urls = [
			{
				url: "homeIndex", count: 0, name: "首页", 
				icon1: require('@/assets/images/icon_shouye.png'), 
				icon2: require('@/assets/images/icon_shouye-dianji.png')
			},
		]
		urls.push({url: "personalIndex", count: 0, name: "我的", icon1: require('@/assets/images/icon_wode.png'), icon2: require('@/assets/images/icon_wode-dianji.png')})
		var active = this.check(urls)
		this.urls = urls
		this.active = active
	},
	mounted(){
		
	},
	
	methods: {
		check(urls){
			urls = urls || this.urls
			var p = this.$route.name

			var index = -1
			urls.forEach((v, i) => {
				if(v.url == p){
					index = i
				}
			});
			return index
		},
		toUrl(type){
			this.active = type;
			let url = this.urls[this.active].url
			if(url){
				if(this.$route.name == 'homeIndex'){
					this.$router.push({
						name: url
					})
				} else {
					if(url == 'homeIndex'){
						var exist = _.find(this.$navigation.getRoutes(), v=>{
							return v.indexOf(url+'?') === 0
						})
						if(exist){
							exist = exist.split('?')
							url = this.replaceCamel(exist[0])
							if(url.indexOf('/')!==0){
								url = "/" + url
							}
							this.$router.replace({
								path: url,
								query: {
									VNK: exist[1]
								}
							})
						} else {
							this.$router.replace({
								name: url
							})
						}
					} else {
						this.$router.replace({
							name: url
						})
					}
				}
			}
		},
		replaceCamel(str){
			return str.replace(/([A-Z])/g, function(s){
				return '/' +s.toLowerCase()
			}).trim()
		}
	}
};
</script>
<style lang="scss" scoped>
@import '../styles/appBotNav.scss';
</style>
<style lang="scss">
@supports(bottom: env(safe-area-inset-bottom)){
    .app-bot-nav{
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>
