<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">
        <img class="mongo-tabbar-item-svg" :src="index === activeIdx ? item.activeImg : item.img" />
        <span class="mongo-tabbar-item-name">{{ item.name }}</span>
      </div>
    </cr-tabbar-item>
  </cr-tabbar>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import homeImg from "@/assets/images/home/tab_home@2x.png";
import homeActiveImg from "@/assets/images/home/tab_home_active@2x.png";
import goodsImg from "@/assets/images/home/tab_product@2x.png";
import goodsActiveImg from "@/assets/images/home/tab_product_active@2x.png";
import consultantImg from "@/assets/images/home/tab_consultant@2x.png";
import consultantActiveImg from "@/assets/images/home/tab_consultant_active@2x.png";
import userImg from "@/assets/images/home/tab_user@2x.png";
import userActiveImg from "@/assets/images/home/tab_user_active@2x.png";

const tabbarData = [
  {
    name: "首页",
    path: "/home",
    img: homeImg,
    activeImg: homeActiveImg
    // icon: "home",
    // activeIcon: "home-active"
  },
  {
    name: "产品",
    path: "/goods",
    img: goodsImg,
    activeImg: goodsActiveImg
    // icon: "product",
    // activeIcon: "product-active"
  },
  {
    name: "顾问",
    path: "/consultant",
    img: consultantImg,
    activeImg: consultantActiveImg
    // icon: "counselor",
    // activeIcon: "counselor-active"
  },
  {
    name: "我的",
    path: "/user",
    img: userImg,
    activeImg: userActiveImg
    // icon: "user",
    // activeIcon: "user-active"
  }
];

export default {
  name: "Tabbar",
  data() {
    return {
      tabbarData
    };
  },
  computed: {
    ...mapState(["activeIdx"])
  },
  created() {
    if (
      this.$route.path !== tabbarData[this.activeIdx].path &&
      tabbarData.some(route => route.path === this.$route.path)
    ) {
      this.setActiveIdx(tabbarData.findIndex(route => route.path === this.$route.path));
    }
  },
  methods: {
    ...mapMutations(["setActiveIdx"]),
    oninput(idx) {
      this.setActiveIdx(idx);
      this.$router.replace(tabbarData[idx].path);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../style/var.less";
@import "../style/mixins.less";
.mongo-tabbar {
  position: fixed;
  bottom: 0;
  z-index: 99;
  box-sizing: border-box;
  min-height: 49px;
  padding: 5px 0 2px 0;
  .iphonex-fix-padding();
  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35px;
    &-svg {
      width: 28px;
      height: 28px;
    }
    &-name {
      font-size: 10px;
      font-weight: 400;
      color: #7f8389;
      line-height: 14px;
    }
  }
  @{deep} .cr-tabbar-item--active {
    .mongo-tabbar-item-name {
      color: #000000;
    }
  }
}
</style>
