<template>
  <view class="tab-bar">
    <u-tabbar
      :value="currentPagePath"
      activeColor="#cf000d"
      zIndex="100"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        v-for="(item,index) in tabBarList"
        :key="index"
        :text="item.text"
        :icon="item.pagePath === currentPagePath ? item.selectedIconPath : item.iconPath"
        :name="item.pagePath"
        @click="click_page(item.pagePath)"
      />
    </u-tabbar>
  </view>
</template>

<script>
import {
  mapGetters
} from 'vuex'

export default {
  name: 'tabBar',
  props: {
    currentPagePath: String,
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'tabBarList'
    ])
  },
  created() {
    console.log('tabBarList', this.tabBarList)
  },
  methods: {
    click_page(arg) {
      let page = '/' + arg
      console.log(page)
      uni.switchTab({
        url: page
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tab-bar {
  ::v-deep {
    .u-icon__img {
      height: 28px !important;
      width: 28px !important;
    }
  }
}
</style>
