<template>
   <div class="m-tab-bar flex-default">
    <div
      class="tab-item-con"
      v-for="(item, index) of list"
      :key="`tab-item-${index}`"
      @click="handleClick(item, index)"
    >
      <div class="tab-item" v-show="index == current">
        <m-icon :icon="item.active" :size="24" />
        <span class="active-tab-name">
          {{ item.name }}
        </span>
      </div>

      <div class="tab-item" v-show="index != current">
        <m-icon :icon="item.icon" :size="24" />
        <span class="tab-name">
          {{ item.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      active: 0,
      list: [
        {
          name: "首页",
          icon: "icon-tab-home",
          active: "icon-tab-home-active",
          routeName: "home",
        },
        {
          name: "分类",
          icon: "icon-tab-classification",
          active: "icon-tab-classification-active",
          routeName: "classification",
        },
        // {
        //   name: "购物车",
        //   icon: "icon-tab-shopping-cart",
        //   active: "icon-tab-shopping-cart-active",
        //   routeName: "shopping-cart",
        // },
        {
          name: "我的",
          icon: "icon-tab-user",
          active: "icon-tab-user-active",
          routeName: "user-center",
        },
      ],
    };
  },
  methods: {
    handleClick(item, index) {
      if (index != this.current) {
        this.$router.push({ name: item.routeName });
      }
    },
  },
};
</script>

<style lang="less">
.m-tab-bar {
  box-shadow: 0px 1px 14px 0px #efeff1;
  background: #ffffff;
  height: @mall-tab-bar-height;
  z-index: 10;
  > .tab-item-con {
    flex: 1;
    > .tab-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    > .tab-item .tab-name {
      color: #aeaeae !important;
      margin-top: 4px;
      font-size: 10px;
    }
    > .tab-item .active-tab-name {
      color: @mall-primary-color !important;
      margin-top: 4px;
      font-size: 10px;
    }
  }
}
</style>