<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:''
    };
  },
  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
        }
      })
    },
    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>