<template>
  <div class="group-info-desc">
    <!-- <div class="desc-item">
      <p class="desc">发起拼团，距结束还剩</p>
      <countDown :block-no-bg="true" />
    </div> -->
    <div class="desc-item">
      <p class="desc">还差<span>2人</span>成团，距结束还剩</p>
      <countDown :block-no-bg="true" />
    </div>
    <div class="gourp-rules">
      <p>成团条件：还需邀请2名新人</p>
      <cr-image src="@/assets/images/flag.png" width="13px" />
    </div>
    <div v-if="showButtonGroup" ref="buttonArea" class="button-area">
      <cr-button block shape="circle" type="primary">邀请好友</cr-button>
      <cr-button plain block shape="circle" type="primary">查看其他商品</cr-button>
    </div>
  </div>
</template>
<script>
import countDown from '@/components/countDown';
export default {
  components: {
    countDown
  },
  props: {
    showButtonGroup: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      observer: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.buttonArea) {
        this.observer = new IntersectionObserver(entries => {
          entries.forEach(item => {
            if (item.intersectionRatio == 0) {
              this.$emit('changeButtonVisible', true);
            } else {
              this.$emit('changeButtonVisible', false);
            }
          });
        });
        this.observer.USE_MUTATION_OBSERVER = false;
        this.observer.observe(this.$refs.buttonArea);
      }
    });
  },
  beforeDestroy() {
    if (this.$refs.buttonArea) {
      this.observer.unobserve(this.$refs.buttonArea);
    }
  }
};
</script>
<style lang="less" scoped>
.desc-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: @padding-unit;
  .desc {
    margin-right: @padding-unit;
    span {
      color: @red-dark;
      margin: 0 @padding-unit;
    }
  }
}
.gourp-rules {
  display: flex;
  justify-content: center;
  align-items: center;
  color: @gray-4;
  .text-12();
  margin-bottom: @padding-md;
}
.button-area {
  button {
    margin-bottom: @padding-md;
  }
}
</style>
