<template>
  <div class="group-info-desc">
    <div class="desc-item">
      <template v-if="groupInfo.groupBuyStatus == 1">
        <!-- 拼团中状态 -->
        <template v-if="!groupInfo.joinGroup && !groupInfo.canJoinGroupBuyAgain">
          <!-- 您不符合参与此团的条件 -->
        </template>
        <template v-else>
          <p class="desc inProcess">
            还差<span>{{ groupInfo.groupBuyNeedUserCount }}人</span>成团，距结束仅剩
          </p>
          <countDown v-if="!!timestemp" :block-no-bg="true" :end-time="timestemp" from="desc" />
        </template>
      </template>
      <template v-else>
        <template v-if="groupInfo.groupBuyStatus != 2">
          <!-- 拼团非成功状态 -->
          <p v-if="groupInfo.groupBuyStatus == 3" class="desc">
            {{ groupInfo.failedReason || statusTextMap[groupInfo.groupBuyStatus] }}
          </p>
          <p v-else class="desc">
            {{ statusTextMap[groupInfo.groupBuyStatus] }}
          </p>
        </template>
        <template v-else>
          <!-- 拼团成功 -->
          <p v-if="groupInfo.joinGroup" class="desc">
            {{ statusTextMap[groupInfo.groupBuyStatus] }}
          </p>
          <p v-else class="desc">已成团，自己做团长吧！</p>
        </template>
      </template>
    </div>
    <div
      v-if="
        (groupInfo.groupBuyStatus == 1 || groupInfo.groupBuyStatus == 0) &&
          groupInfo.groupBuyNeedNewUserCount
      "
      class="gourp-rules"
    >
      <p>成团条件：{{ groupInfo.groupBuyCondition || '' }}</p>
      <cr-image src="@/assets/images/flag.png" width="13px" />
    </div>
    <div v-if="showButtonGroup" ref="buttonArea" class="button-area">
      <div v-if="groupInfo.groupBuyStatus == 1" class="shareToButton">
        <cr-button block shape="circle" type="primary" @click="share">邀请好友</cr-button>
      </div>
      <div class="toListButton">
        <cr-button
          plain
          block
          shape="circle"
          type="default"
          class="toOrderList"
          @click="toOrderList"
          >查看我的拼团</cr-button
        >
        <cr-button plain block shape="circle" type="primary" @click="toList"
          >返回活动列表</cr-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import countDown from '@/components/countDown';
import { saTrackEvent } from '@/service/sa.service';
export default {
  components: {
    countDown
  },
  props: {
    showButtonGroup: {
      type: Boolean,
      default: false
    },
    timestemp: {
      type: Number,
      default: 0
    },
    groupInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    skuNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      observer: null,
      statusTextMap: {
        0: '发起拼团，邀请好友一起拼团吧！',
        2: '恭喜成团!',
        3: '哎呀，拼团时间已过，尚未成团！',
        4: '已发货'
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.buttonArea) {
        if (IntersectionObserver) {
          this.observer &&
            this.observer.unobserve &&
            this.observer.unobserve(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) {
      this.observer.unobserve(this.$refs.buttonArea);
    }
  },
  methods: {
    toList() {
      const { activityId } = this.$route.query || '';
      if (activityId) {
        this.$router.push({ name: 'groupBuyList', query: { activityId } });
      }
    },
    toOrderList() {
      this.$router.push('/orderList/0');
    },
    share() {
      if (this.skuNo) {
        saTrackEvent('H5_GroupDetailPageInviteFriendsBtnClick', {
          sku_no: this.skuNo,
          group_id: this.groupInfo?.groupId || ''
        });
      }
      this.$emit('share');
    }
  }
};
</script>
<style lang="less" scoped>
.desc-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  line-height: 24px;
  margin-bottom: @padding-xs;
  .desc {
    text-align: center;
    height: 100%;
    line-height: 24px;
    font-size: 14px;
    &.inProcess {
      margin-right: @padding-unit;
    }
    span {
      font-size: 14px;
      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-sm;
}
.button-area {
  button {
    font-size: 16px !important;
    margin-bottom: @padding-sm;
  }
  .toListButton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    button {
      width: 48%;
      &.toOrderList {
        color: @gray-4;
      }
    }
  }
}
</style>
