<template>
	  <view class="tabbarMain" :style="{paddingBottom: `${bottomSafeHeight}px`}" v-if="navs.length">
		<view class="tabBtnMina">
		  <view 
			class="itmMain" 
			v-for="(x, i) in navs" 
			:key="i" 
			@click.stop="goUrl(x.url)"
		  >
			<image
			  class="imgse"
			  :src="active === i ? x.active_icon : x.icon"
			  mode="aspectFit"
			/>
			<text class="txtBtn" :style="{ color: active == i ? x.active_color : x.color }">
			  {{ x.text }}
			</text>
		  </view>
		</view>
	  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      navs: [],
      bottomSafeHeight: 0,
	  currentPath:'',
	  isExsits:true
    };
  },
  mounted() {
    this.navs = uni.getStorageSync("navs") || []
    this.calcSafeArea()
    this.activeHandler()
  },
  methods: {
    calcSafeArea() {
      const { safeAreaInsets } = uni.getSystemInfoSync()
      this.bottomSafeHeight = safeAreaInsets.bottom > 0 ? safeAreaInsets.bottom : 10
    },
    activeHandler() {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const query = currentPage.options
      const queryString = Object.keys(query)
        .map(key => `${key}=${query[key]}`)
        .join('&')
		this.currentPath = `/${currentPage.route}${queryString ? '?' + queryString : ''}`
      this.navs.forEach((item, index) => {
        if (this.currentPath === item.url) {
          this.active = index
        }
      })
	  //this.isExsits = this.navs.findIndex(x=>x.url == this.currentPath)!=-1
    },
    goUrl(url) {
      if (this.currentPath !== url) {
        uni.redirectTo({ url })
      } else {
		  uni.reLaunch({
		  	url
		  })
	  }
    }
  }
}
</script>

<style>
.tabbarMain {
  position: fixed;
  z-index: 999999;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1rpx solid #E0E0E0;
  padding: 20rpx 0 0;
  border-radius: 36rpx 36rpx 0 0;
}

.tabBtnMina {
  display: flex;
  flex-direction: row;
  
}

.itmMain {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.imgse {
  width: 48rpx;
  height: 48rpx;
}

.txtBtn {
  font-size: 20rpx;
  color: #666;
  margin-top: 8rpx;
  line-height: 1;
}

.txtBtnSel {
  color: #333;
  font-size: 24rpx;
}
</style>