<template>
  <view class="tabbar_box">
    <view class="tabBarItem" v-for="(item, index) in tabList" :key="index" @click="switchTab(index, item)">
      <image :src="current == index ? item.selectedIconPath : item.iconPath" class="icon_tab"></image>
      <view class="title" :style="[current == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      tabList: [
        {
          "pagePath": "/pages/home/index",
          "iconPath": "../static/images/common/home-no.png",
          "selectedIconPath": "../static/images/common/home-is.png",
          "text": "首页"
        },
        {
          "pagePath": "/pages/home/category",
          "iconPath": "../static/images/common/category-no.png",
          "selectedIconPath": "../static/images/common/category-is.png",
          "text": "分类"
        },
        {
          "pagePath": "/pages/home/course",
          "iconPath": "../static/images/common/icon_class.png",
          "selectedIconPath": "../static/images/common/icon_class_active.png",
          "text": "培训班"
        },
        {
          "pagePath": "/pages/home/shop",
          "iconPath": "../static/images/common/shop-no.png",
          "selectedIconPath": "../static/images/common/shop-is.png",
          "text": "门店"
        },
        {
          "pagePath": "/pages/home/user",
          "iconPath": "../static/images/common/user-no.png",
          "selectedIconPath": "../static/images/common/user-is.png",
          "text": "我的"
        }
      ],
      currentTabIndex: this.current
    }
  },
  props: {
    current: { type: [Number, String], default: 0 },
    backgroundColor: { type: String, default: '#fff' },
    color: { type: String, default: '#c0c4cc' },
    tintColor: { type: String, default: '#fa436a' }
  },
  methods: {
    switchTab (index, item) {
      this.currentTabIndex = this.current
      uni.switchTab({
        url: item.pagePath
      })
      // this.$emit('click', index)
    }
  },
}
</script>

<style lang="scss" scoped>
.tabbar_box {
  height: 96upx;
  width: 100vw;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 9999;
  left: 0;
  display: flex;
  border-top: 1px solid #c0c4cc;
  & > .tabBarItem {
    flex: 1;
    padding-top: 11upx;
    height: 100%;
    text-align: center;
    // background: green;
    & > .icon_tab {
      width: 46upx !important;
      height: 46upx !important;
      // background-color: #eee;
      margin: 0 auto;
    }
    & > .title {
      text-align: center;
      margin-top: 5upx;
      font-size: 24upx;
      color: #c0c4cc;
    }
  }
}
</style>