<template>
  <div class="group-info-desc">
    <!-- <div class="desc-item">
      <p class="desc">发起拼团，距结束还剩</p>
      <countDown :block-no-bg="true" />
    </div> -->
    <div class="desc-item">
      <template v-if="groupInfo.groupBuyStatus == 1">
        <p class="desc">
          还差<span>{{ groupInfo.groupBuyNeedNewUserCount }}人</span>成团，距结束还剩
        </p>
        <countDown v-if="!!timestemp" :block-no-bg="true" :end-time="timestemp" />
      </template>
      <template v-if="groupInfo.groupBuyStatus == 2">
        <p class="desc">
          恭喜成团，等待发货！
        </p>
      </template>
      <template v-if="groupInfo.groupBuyStatus == 3">
        <p class="desc">
          哎呀，拼团时间已过，尚未成团！
        </p>
      </template>
    </div>
    <div v-if="groupInfo.groupBuyStatus != -1 && groupInfo.groupBuyStatus != 0" class="gourp-rules">
      <template v-if="groupInfo.groupBuyStatus == 1">
        <p>成团条件：{{ groupInfo.groupBuyCondition || '' }}</p>
        <cr-image src="@/assets/images/flag.png" width="13px" />
      </template>
    </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
    },
    timestemp: {
      type: Number,
      default: 0
    },
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  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>
