<template>
  <div class="group-info-desc">
    <div class="desc-item">
      <template v-if="groupInfo.groupBuyStatus == 1">
        <p class="desc">
          还差<span>{{ groupInfo.groupBuyNeedUserCount }}人</span>成团，距结束还剩
        </p>
        <countDown v-if="!!timestemp" :block-no-bg="true" :end-time="timestemp" />
      </template>
      <template v-else>
        <p class="desc">
          {{ statusTextMap[groupInfo.groupBuyStatus] }}
        </p>
      </template>
    </div>
    <div class="gourp-rules">
      <template v-if="groupInfo.groupBuyStatus == 1 || groupInfo.groupBuyStatus == 0">
        <p>成团条件：{{ groupInfo.groupBuyCondition || '' }}</p>
        <cr-image src="@/assets/images/flag.png" width="13px" />
      </template>
      <!-- </template> -->
    </div>
    <div v-if="showButtonGroup" ref="buttonArea" class="button-area">
      <cr-button
        v-if="groupInfo.groupBuyStatus == 1"
        block
        shape="circle"
        type="primary"
        @click="share"
        >邀请好友</cr-button
      >
      <cr-button v-else plain block shape="circle" type="primary" @click="toList"
        >查看其他商品</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,
      statusTextMap: {
        0: '发起拼团，邀请好友一起拼团吧！',
        2: '恭喜成团，等待发货！',
        3: '哎呀，拼团时间已过，尚未成团！',
        4: '已发货'
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.buttonArea) {
        this.observer = new IntersectionObserver(entries => {
          entries.forEach(item => {
            if (this.groupInfo.groupBuyStatus == 1) {
              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);
    }
  },
  methods: {
    toList() {
      const { activityId } = this.$route.query || '';
      if (activityId) {
        this.$router.push({ name: 'groupBuyList', query: { activityId } });
      }
    },
    share() {
      this.$emit('share');
    }
  }
};
</script>
<style lang="less" scoped>
.desc-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: @padding-xs;
  .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>
