<template>
  <div class="nav">
    <div
      v-for="(item, index) in filterItem"
      :key="index"
      class="nav-item"
      :class="{ current: filterIndex === index }"
      @click="tabClick(item, index)"
    >
      <span class="nav-item-title">{{ item.name }}</span>
      <div v-if="Object.keys(item.select).length" class="nav-item-container">
        <span
          v-for="(selectItem, selectIndex) in item.select"
          :key="selectIndex"
          class="iconfont"
          :class="computedActive(selectIndex, selectItem)"
        />
      </div>
    </div>
  </div>
</template>
<script>
const CHANGE_TABEVT = 'change';
export default {
  data() {
    return {
      rankType: 1,
      filterIndex: 0,
      filterItem: [
        { name: '综合', select: 1 },
        { name: '价格', select: { up: 3, down: 2 } },
        { name: '销量', select: { up: 5, down: 4 } }
      ]
    };
  },
  methods: {
    computedActive(selectIndex, selectItem) {
      let className = `icon-sort-${selectIndex}-round`;
      const rankType = this.rankType;
      return rankType === selectItem ? `${className} active` : className;
    },
    tabClick({ select }, index) {
      const rankType = this.rankType;
      if (!index) {
        if (rankType === select) return;
        this.rankType = select;
      } else {
        this.rankType = rankType === select.down ? select.up : select.down;
      }
      this.filterIndex = index;
      this.$track.registeredEvents('H5_2B_CommodityListPageSortBtnClick', {
        buttons_name: name
      });
      this.$emit(CHANGE_TABEVT, this.rankType);
    }
  }
};
</script>
<style scoped lang="less">
.nav {
  display: flex;
  width: 100%;
  height: 40px;
  background: @white;
  z-index: 10;
  padding-top: 5px;
  box-shadow: 0px 10px 12px -10px rgba(100, 101, 102, 0.08);
  &-item {
    .text-size(16);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: @gray-4;
    &-title {
      line-height: 15px;
    }
    &.current {
      color: @black;
      font-weight: @font-weight-bold;
      .nav-item-title {
        font-weight: @font-weight-bold;
      }
    }

    &-container {
      display: flex;
      flex-direction: column;
      margin-left: @padding-unit / 2;
      justify-content: center;
      span {
        .text-size(10);
        color: @gray-4;
        &.active {
          color: @black;
        }
        &:nth-child(1) {
          margin-bottom: -13px;
        }
      }
    }
  }
}
</style>
