<template>
  <cr-tabbar
    class="mongo-tabbar"
    :value="activeIdx"
    @input="oninput"
    active-color="#333"
    inactive-color="#666"
  >
    <cr-tabbar-item v-for="(item, index) in tabbarData" :key="item.name">
      <div class="mongo-tabbar-item">
        <svg-icon
          :icon-class="[index === activeIdx ? item.activeIcon : item.icon]"
          :class-name="[
            { 'mongo-tabbar-item-svg_active': index === activeIdx },
            'mongo-tabbar-item-svg'
          ]"
        />
        <span class="mongo-tabbar-item-name">{{ item.name }}</span>
      </div>
    </cr-tabbar-item>
  </cr-tabbar>
</template>

<script>
import { mapState, mapMutations } from "vuex";

const route = ["/goods", "/user"];
const tabbarData = [
  {
    name: "产品",
    path: "/goods",
    icon: "product",
    activeIcon: "product-active"
  },
  {
    name: "我的",
    path: "/user",
    icon: "user",
    activeIcon: "user-active"
  }
];

export default {
  name: "Tabbar",
  data() {
    return {
      tabbarData
    };
  },
  computed: {
    ...mapState(["activeIdx"])
  },
  created() {
    if (this.$route.path !== route[this.activeIdx] && route.includes(this.$route.path)) {
      this.setActiveIdx(route.indexOf(this.$route.path));
    }
  },
  methods: {
    ...mapMutations(["setActiveIdx"]),
    oninput(idx) {
      this.setActiveIdx(idx);
      this.$router.replace(route[idx]);
    }
  }
};
</script>

<style lang="less">
.mongo-tabbar {
  position: fixed;
  bottom: 0;
  z-index: 100;
  box-sizing: border-box;
  height: 49px;
  padding: 5px 0 2px 0;
  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35px;
    &-svg {
      width: 28px;
      height: 28px;
      display: inline-block;
      &_active {
        display: none;
      }
    }
    &-name {
      font-size: 10px;
      font-weight: 400;
      color: #7f8389;
      line-height: 14px;
    }
  }
  /deep/.cr-tabbar-item--active {
    .mongo-tabbar-item-name {
      color: #000000;
    }
    .mongo-tabbar-item-svg {
      display: none;
      &_active {
        display: inline-block;
      }
    }
  }
}
</style>
