<template>
  <view class="nav">
    <view
      v-for="(item, index) in filterItem"
      :key="index"
      class="nav-item"
      :class="{ current: filterIndex === index }"
      @click="tabClick(item, index)"
    >
      <text class="nav-item-title">{{ item.name }}</text>
      <view v-if="Object.keys(item.select).length" class="nav-item-content">
        <text
          v-for="(selectItem, selectIndex) in item.select"
          :key="selectIndex"
          class="iconfont"
          :class="[`icon-sort-${selectIndex}-round`, rankType === selectItem && 'active']"
        />
      </view>
    </view>
  </view>
</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: {
    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.$emit(CHANGE_TABEVT, this.rankType);
    }
  }
};
</script>
<style lang="scss" scoped>
.nav {
  display: flex;
  width: 100%;
  height: 80rpx;
  background: $white;
  z-index: 10;
  padding-top: 10rpx;
  box-shadow: 0rpx 20rpx 24rpx -20rpx rgba(100, 101, 102, 0.08);
  &-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: $font-lg;
    color: $font-color-light;
    position: relative;
    &.current {
      color: $font-color-dark;
      font-weight: bold;
    }
    &-title {
      line-height: 30rpx;
    }
    &-content {
      display: flex;
      flex-direction: column;
      margin-top: 4rpx;
      margin-left: 4rpx;
      justify-content: center;
      text {
        font-size: 20rpx;
        color: #999;
        &.active {
          color: $font-color-dark;
        }
        &:nth-child(1) {
          margin-bottom: -20rpx;
        }
      }
    }
  }
}
</style>
