<!--自定义的微信tabbar-->
<template>
  <cover-view class="apb-tab-bar tab-bar">
    <cover-view class="tab-bar-border"></cover-view>
    <cover-view v-for="(item,index) in tabbarList" :key="index" class="tab-bar-item" :data-path="item.pagePath"
      :data-index="index" @tap="switchTab(index)">
      <cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"></cover-image>
      <cover-view :style="{color: selected === index ? selectedColor : color}">{{item.text}}</cover-view>
    </cover-view>
  </cover-view>
</template>
<script>
import { APP_INDEX_PAGE_PATH, MINE_PAGE_PATH, STUDENT_PAGE_PATH } from '../common/tabbarStatic'
export default {
  props: {
    outerSelected: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      selected: this.outerSelected,
      color: '#d6d6d6',
      selectedColor: '#61d4e3',
      tabbarList: [
        {
          pagePath: APP_INDEX_PAGE_PATH,
          iconPath: '/static/imgs/tabbar/xk1.png',
          selectedIconPath: '/static/imgs/tabbar/xk.png',
          text: '选课'
        },
        {
          pagePath: STUDENT_PAGE_PATH,
          iconPath: '/static/imgs/tabbar/xszx1.png',
          selectedIconPath: '/static/imgs/tabbar/xszx.png',
          text: '学生中心'
        },
        {
          pagePath: MINE_PAGE_PATH,
          iconPath: '/static/imgs/tabbar/wd1.png',
          selectedIconPath: '/static/imgs/tabbar/wd.png',
          text: '我的'
        }
      ]
    }
  },
  mounted () {
    this.selected = this.outerSelected
  },
  methods: {
    // 切换tab
    switchTab (index) {
      const url = this.tabbarList[index].pagePath
      uni.switchTab({ url })
    }
  }
}
</script>
<style lang="scss">
.apb-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);

  .tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
  }

  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .tab-bar-item cover-image {
    width: 27px;
    height: 27px;
    &.sign-img {
      width: 40px;
      height: 40px;
    }
  }

  .tab-bar-item cover-view {
    font-size: 10px;
  }
}
</style>
