<template>
  <view class="navbar">
    <view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">
      综合
    </view>
    <view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">
      <text class="p-title" :class="{ active: filterIndex === 1 }">价格</text>
      <view class="p-box">
        <text
          class="iconfont icon-sort-up-round"
          :class="{ active: rankType === 3 && filterIndex === 1 }"
        />
        <text
          class="iconfont icon-sort-down-round"
          :class="{ active: rankType === 2 && filterIndex === 1 }"
        />
      </view>
    </view>
    <view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
      <text class="p-title" :class="{ active: filterIndex === 2 }">销量</text>
      <view class="p-box">
        <text
          class="iconfont icon-sort-up-round"
          :class="{ active: rankType === 5 && filterIndex === 2 }"
        />
        <text
          class="iconfont icon-sort-down-round"
          :class="{ active: rankType === 4 && filterIndex === 2 }"
        />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      filterIndex: 0,
      rankType: 1 //排序类型 1:综合; 2:价格倒序; 3: 价格 正序; 4. 销量倒序; 5: 销量正序;
    };
  },
  methods: {
    tabClick(rankType) {
      if (rankType === 0 && this.filterIndex === rankType) {
        return;
      }
      this.filterIndex = rankType;
      switch (rankType) {
        case 0:
          this.rankType = 1;
          break;
        case 1:
          this.rankType === 3 ? (this.rankType = 2) : (this.rankType = 3);
          break;
        case 2:
          this.rankType === 4 ? (this.rankType = 5) : (this.rankType = 4);
          break;
      }
      this.$emit("search", this.rankType);
    }
  }
};
</script>
<style lang="scss" scoped>
.navbar {
  display: flex;
  position: relative;
  width: 100%;
  height: 80rpx;
  background: $white;
  z-index: 10;
  box-shadow: 0rpx 20rpx 24rpx -20rpx rgba(100, 101, 102, 0.08);
  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: $font-lg;
    // color: $font-color-base;
    color: $font-color-light;
    position: relative;
    &.current {
      // color: $base-color;
      color: $font-color-dark;
      font-weight: bold;
    }
  }
  .p-title {
    line-height: 30rpx;
    &.active {
      font-weight: bold;
    }
  }
  .p-box {
    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>
