<template>
  <div class="blind-box-goods-header-con flex-default" ref="goodsHeader">
    <m-icon :size="18" icon="icon-back" className="back-logo" @click="goBack" />
    <div class="tab-list flex-default">
      <!-- <div
        v-for="(item, index) of tabList"
        :class="index == currentIndex ? ['item', 'active'] : ['item']"
        :key="`tab-item-${index}`"
        @click="$emit('click', item)"
      >
        {{ item.label }}
      </div> -->
    </div>
    <div class="empty" />
  </div>
</template>

<script>
export default {
  props: {
    scrollTop: {
      type: Number,
      default: 0,
    },
    commRef: Object,
    detailRef: Object,
  },
  computed: {
    currentIndex() {
      let i;
      for (i = 0; i < this.tabList.length - 1; i++) {
        if (this.scrollTop < this.tabList[i + 1].position) {
          return i;
        }
      }
      return i;
    },
    height() {
      return (
        (this.$refs.goodsHeader && this.$refs.goodsHeader.$el.offsetHeight) || 0
      );
    },
    tabList() {
      let commP =
        (this.commRef && this.commRef.$el && this.commRef.$el.offsetTop) || 0;
      let detailP =
        (this.detailRef &&
          this.detailRef.$el &&
          this.detailRef.$el.offsetTop) ||
        0;
      return [
        { label: "商品", position: 0 },
        { label: "评价", position: commP - this.height },
        { label: "详情", position: detailP - this.height },
      ];
    },
  },
  data() {
    return {};
  },
  methods: {
  },
};
</script>

<style lang="less">
.blind-box-goods-header-con {
  width: 100%;
  padding: 10px;
  position: sticky;
  z-index: 2;
  top: 0;
  left: 0;
  // background-color: #ffffff;
  align-items: center;
  justify-content: space-between;

  .tab-list {
    .item {
      font-size: 13px;
      color: #140603;
      padding: 0 9px;
      position: relative;
    }
    .active {
      font-weight: bold;
      color: #2C66F5;
      &::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-9px);
        width: 17px;
        height: 3px;
        background: #2C66F5;
        border-radius: 3px;
      }
    }
  }
}
</style>
