<template>
  <view class="project">
    <view class="project-tabs">
      <scroll-view
        scroll-x
        class="tab-scroll"
        :show-scrollbar="false"
        @touchmove.prevent.stop
      >
        <view class="tab-container">
          <view class="tab-card">
            <text
              class="tab-text"
              :class="{ active: activeId == 1 }"
              @click="clickTap(1)"
              >热销</text
            >
            <view class="tab-active-indicator" v-if="activeId == 1"></view>
          </view>
          <view class="tab-card">
            <text
              class="tab-text"
              :class="{ active: activeId == 2 }"
              @click="clickTap(2)"
              >价格</text
            >
            <image
              :src="priceList[priceIndex].src"
              mode="aspectFill"
              class="tab-card-price-img"
            ></image>
            <view class="tab-active-indicator" v-if="activeId == 2"></view>
          </view>
          <view class="tab-card">
            <text
              class="tab-text"
              :class="{ active: showPopup || popId }"
              @click="clickTap(3)"
              >分类</text
            >
          </view>
        </view>
      </scroll-view>

      <!-- 分类弹出层 -->
      <view class="time-filter-popup" :class="{ show: showPopup }">
        <!-- 分类选项部分 -->
        <view class="time-filter-popup-tabs">
          <view
            @click="clickPopTap(item)"
            class="time-filter-popup-tab"
            :class="{ active: item.id == popId }"
            v-for="(item, index) in tabsPopList"
            :key="item.id"
          >
            {{ item.name }}
          </view>
        </view>
        <!-- 分类弹窗-重置、完成按钮 -->
       <!-- <view class="popup-big-btns">
          <view class="btn-reset" @click.stop="resetPopup">重置</view>
          <view class="btn-confirm" @click.stop="confirmPopup">完成</view>
        </view> -->
      </view>
    </view>

    <!-- 蒙层 -->
    <view :class="{ popMsk: showPopup }" @click="showPopup=false"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeId: 1,
      showPopup: false,
      tabsList: [],
      popId: null,
      priceIndex: 0,
      priceList: [
        { id: null, src: "/static/images/syr/price1.png" },
        { id: 2, src: "/static/images/syr/price2.png" },
        { id: 3, src: "/static/images/syr/price3.png" },
      ],
    };
  },
  props: {
    tabsPopList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    clickPopTap(item) {
      this.popId = this.popId === item.id ? null : item.id;
	  this.confirmPopup()
    },
    resetPopup() {
      this.popId = null;
      this.$emit("clickPopTap", null);
    },
    confirmPopup() {
      this.showPopup = false;
      this.$emit("clickPopTap", this.popId);
    },
    clickTap(id) {
      let obj = { order_type: null, msk: false };
      if (id == 3) {
        this.showPopup = !this.showPopup;
        obj.msk = this.showPopup;
        this.$emit("clickTap", obj);
      } else if (id == 2) {
        this.activeId = id;
        this.showPopup = false;
        this.priceIndex = this.priceIndex === 1 ? 2 : 1;
        obj.order_type = this.priceList[this.priceIndex].id;
        this.$emit("clickTap", obj);
      } else {
        this.priceIndex = 0;
        this.activeId = id;
        this.showPopup = false;
        obj.order_type = this.activeId;
        this.$emit("clickTap", obj);
      }
    },
  },
};
</script>

<style lang="less">
.project {
  padding-left: 10rpx;
  .project-tabs {
    position: relative;
    z-index: 500;
    margin-bottom: 30rpx;
    margin-top: 30rpx;

    .tab-scroll {
      .tab-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 130rpx;

        .tab-card {
          position: relative;
          padding-bottom: 12rpx;
          .tab-text {
            font-weight: 500;
            font-size: 28rpx;
            color: #000;
            line-height: 40rpx;
          }
          .tab-card-price-img {
            width: 13rpx;
            height: 18rpx;
          }
          .active {
            color: #FF4767;
          }
          .tab-active-indicator {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 32rpx;
            height: 6rpx;
            background: linear-gradient(107deg, #f84c63 0%, #FF4767 100%);
            border-radius: 10rpx;
          }
        }
      }
    }

    /* 分类弹框 */
    .time-filter-popup {
      width: 710rpx;
      background-color: #fff;
      opacity: 0;
      height: 0;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      border-radius: 0 0 20rpx 20rpx;
      overflow: hidden;
      position: absolute;
      top: 77rpx;
      left: -30rpx;

      &.show {
        height: auto;
        opacity: 1;
        visibility: visible;
      }

      .time-filter-popup-tabs {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx 15rpx; /* 调小左右边距 */
        gap: 20rpx 20rpx; /* 改小间距 */
        .time-filter-popup-tab {
          width: 155rpx;
          height: 60rpx;
          background: #f6f4f5;
          border-radius: 10rpx;
          font-size: 26rpx;
          color: #333;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.25s ease;
        }
        .active {
          background: #ffecf0;
          color: #FF4767;
          font-weight: 500;
          transform: scale(1.05);
        }
      }

      .popup-big-btns {
        display: flex;
        justify-content: space-between;
        gap: 30rpx;
        padding: 20rpx 30rpx 30rpx 30rpx;
        background: #fff;

        .btn-reset,
        .btn-confirm {
          flex: 1;
          width: 350rpx; 
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          border-radius: 10rpx;
          font-size: 30rpx;
          font-weight: 600;
        }

        .btn-reset {
          color: #333;
          background: #f6f4f5;
        }

        .btn-confirm {
          color: #fff;
          background: #ff3344;
        }
      }
    }
  }
}

.popMsk {
  position: fixed;
  top: 0;
  left: -20rpx;
  right: -20rpx;
  bottom: 0;
  background: transparent;
  z-index: 400;
}
</style>
