<template>
  <dl class="group-item" :class="{ disabled: groupStop }" @click="onButtonClick">
    <dt class="group-item-thumb">
      <cr-image :src="goodsItem.thumbImageUrl" />
      <span class="group-item-tag">{{ goodsItem.groupBuyLimitUserCount }}人团</span>
    </dt>
    <dd class="group-item-content">
      <div class="group-item-title">{{ goodsItem.goodsName }}</div>
      <!-- 进度条：已拼团消耗库存/该活动商品初始库存 -->
      <cr-progress
        class="group-item-progress"
        stroke-width="5"
        color="#EC1500"
        track-color="#F7F8F9"
        :show-pivot="false"
        :percentage="handleProgressByStatus(goodsItem)"
      />
      <div class="group-item-already">
        已拼{{ topicCfg.hasStart ? goodsItem.groupBuySuccessCount : 0 }}团
      </div>
      <div class="group-item-price">成团价 ¥ <sup class="group-item-sup">0</sup></div>
      <div class="group-item-delprice">售价￥{{ goodsItem.activityPrice }}</div>
      <!-- 立即开团 -->
      <!-- 已抢光 -->
      <!-- 未开始 -->
      <!-- 已结束 -->
      <div class="group-item-btnbox">
        <cr-button
          size="small"
          shape="circle"
          type="primary"
          class="group-item-button"
          :class="btnByStatus.cls"
          >{{ btnByStatus.t }}</cr-button
        >
      </div>
    </dd>
  </dl>
</template>
<script>
import { saTrackEvent } from '@/service/sa.service';
export default {
  name: 'GoodsCard',
  props: {
    topicCfg: {
      type: Object,
      default: () => {}
    },
    goodsItem: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number
    }
  },
  data() {
    return {};
  },
  computed: {
    groupStop() {
      const { hasStop, hasStart } = this.topicCfg;
      const { goodsCount } = this.goodsItem;
      return !hasStart ? false : hasStop ? true : goodsCount !== 0 ? false : true;
    },
    btnByStatus() {
      const { hasStop, hasStart } = this.topicCfg;
      const { goodsCount } = this.goodsItem;
      if (!hasStart) {
        return { t: '未开始', d: true, s: 0, cls: 'group-item-notbtn' };
      }
      if (hasStop) {
        return { t: '已结束', d: true, s: 1, cls: 'btnabled' };
      }
      if (goodsCount !== 0) {
        return { t: '立即开团', d: false, s: 2, cls: '' };
      }
      return { t: '已抢光', d: true, s: 3, cls: 'btnabled' };
    }
  },
  methods: {
    handleProgressByStatus(item) {
      if (!this.topicCfg.hasStart) {
        // 用于处理活动未开始，虚假数据造成的进度条错误
        return 100;
      }
      if (!item) return 0;
      let percentage = 0;
      // saleCount / activitySkuTotalCount
      const { goodsCount, activitySkuTotalCount } = item;
      percentage = +goodsCount / +activitySkuTotalCount;
      if (isNaN(percentage)) {
        return 0;
      } else {
        return Math.floor(percentage) >= 1 ? 100 : Math.floor(percentage * 100);
      }
    },
    onButtonClick() {
      try {
        const {
          skuNo,
          goodsSpecialId,
          activityTemplateId,
          activityTemplateDetailId,
          activityInfoId
        } = this.goodsItem;
        const { s } = this.btnByStatus;
        if (s === 2) {
          saTrackEvent('H5_GroupZeroYuanPurchaseActivityPageOpenGroupImmediatelyBtnClick', {
            sku_no: skuNo
          });
          this.$router.push({
            path: '/groupBuy/skuInfo',
            query: {
              skuNo,
              goodsSpecialId,
              activityId: activityInfoId,
              templateId: activityTemplateId,
              templateDetailId: activityTemplateDetailId
            }
          });
          // 正常跳转
          return false;
        }
        let message = '哈喽，活动还未开始哦~您可以点击【订阅消息】关注羊小咩，活动开始会通知您哒';
        let confirmButtonText = '订阅消息';
        if (s === 1) {
          message =
            '非常抱歉，本次活动已经结束，您可以点击【订阅消息】关注羊小咩，抢先了解更多活动';
        }
        if (s === 3) {
          message = '您选的商品太火爆了,已经卖完了呢,您可以选择其他的团品重新开团哦～';
          confirmButtonText = '选择更多';
        }

        this.$dialog({
          message,
          closeOnClickOverlay: true,
          showCancelButton: true,
          confirmButtonText,
          onConfirm: () => {
            s !== 3 ? this.$toast('已订阅完成！') : this.goToScrollTop();
          }
        });
      } catch (err) {
        alert(JSON.stringify(err));
      }
    },
    goToScrollTop() {
      // 等待隐藏之后调用
      const timer = setTimeout(() => {
        document.getElementById('groupScroll').scrollIntoView();
        clearTimeout(timer);
      }, 0);
    }
  }
};
</script>
<style scoped lang="less">
.group-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  border-bottom: #ededed solid 1px;
  cursor: pointer;
  position: relative;
  &:last-of-type {
    border-bottom: none;
  }
  &-thumb {
    box-sizing: border-box;
    width: 108px;
    height: 108px;
    background-color: #f7f8f9;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    // padding: 3px;
    margin-right: 8px;
    .cr-image {
      width: 100%;
      height: 100%;
    }
  }
  &-content {
    flex: 1;
    height: 100%;
  }
  &-tag {
    position: absolute;
    top: 0;
    left: 0;
    font-size: @font-size-12;
    color: @white;
    width: 45px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
    border-radius: 6px 0 6px 0;
  }
  &-title {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 18px;
  }
  &-progress {
    width: 163px;
    overflow: hidden;
    border-radius: 5px;
    margin-top: 4px;
  }
  &-already {
    font-size: @font-size-12;
    color: #999999;
    margin-top: 4px;
    margin-bottom: 7px;
  }
  &-price {
    font-size: @font-size-14;
    color: #f70d0d;
    margin-bottom: 4px;
    font-weight: bold;
  }
  &-sup {
    font-size: @font-size-18;
    font-weight: bold;
  }

  &-delprice {
    color: #999999;
    font-size: @font-size-12;
  }
  &-btnbox {
    position: absolute;
    bottom: 12px;
    right: 0;
  }
  &-button {
    position: relative;
    width: 90px;
    height: 28px;
    line-height: 28px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-notbtn::after {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    left: 0;
    top: 0;
    margin-left: -2%;
    margin-top: -2%;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .btnabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  &.disabled {
    opacity: 0.3;
    .group-item-price {
      color: #000;
    }
  }
}
</style>
