<template>
  <div class="goods">
    <cr-card
      :thumb="item.goodsImage"
      :class="['goods_item', { 'is-over': topicState === 2 || item.goodsCount == 0 }]"
      img-height="116"
      @click="handleBtnClick"
    >
      <template #title>
        <img v-if="item.goodsTypeImage" :src="item.goodsTypeImage" class="goods_title-icon" />
        <div class="goods_item--title">{{ item.goodsName }}</div>
        <div v-if="item.sellPoint" class="goods_item--attr">{{ item.sellPoint }}</div>
        <div
          v-if="item.stockAndProgressInfo && item.stockAndProgressInfo.goodsCount < 1"
          class="goods_item--sold-out"
        >
          <div>
            <div class="goods_item--sold-out__cn">已售罄</div>
            <div class="goods_item--sold-out__en">SOLD OUT</div>
          </div>
        </div>
      </template>
      <template #desc>
        <div class="goods_item--tag">
          <TagItem v-for="(tag, i) in item.tagList" :key="i" :item="tag" />
        </div>
        <div class="goods_item--price">
          <div v-if="item.discountShow.discountPrice" class="goods_item--price__normal-price">
            <span>{{ item.discountShow.discountPrice }}</span>
          </div>
          <div v-if="item.discountShow.skuInfoSalePrice" class="goods_item--price__origin-price">
            原价:￥{{ item.discountShow.skuInfoSalePrice }}
          </div>
        </div>
        <div class="goods_progress-box">
          <cr-progress
            v-if="!topicCfg.hasStop"
            class="goods_progress"
            stroke-width="5"
            color="#E82424"
            track-color="#D8D8D8"
            :show-pivot="false"
            :percentage="handleProgressByStatus(item)"
          />
          <div v-if="item.stockAndProgressInfo" class="goods_progress-box__desc">
            <span v-if="item.stockAndProgressInfo.goodsCount > 0">
              已售{{ item.stockAndProgressInfo.saleCount }}件
            </span>
            <span v-else>已售罄</span>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="shopcart" @click.stop="mxAddShopCart(item)" />
      </template>
    </cr-card>
  </div>
</template>
<script>
import localStorage from '@/service/localStorage.service';
import mixinCart from '@/mixins/cart.mixin';
import TagItem from '@/components/TagItem.vue';
export default {
  components: {
    TagItem
  },
  mixins: [mixinCart],
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    topicCfg: {
      type: Object,
      default: () => ({})
    },
    topicState: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      hasLogin: false
    };
  },
  created() {
    this.hasLogin = !!localStorage.get('vccToken');
  },
  methods: {
    handleBtnClick() {
      if (!this.item) return;
      if (!this.hasLogin) {
        this.$router.push({ name: 'Login' });
        return;
      }
      // const { activityId } = this;
      // const { goodsSpecialId, activityTemplateId, templateDetailId } = this.topicCfg;
      // const { activityTemplateId, activityInfoId } = this.topicCfg;
      const { goodsId } = this.item;
      if (this.item.goodsCount !== 0) {
        this.$router.push({
          path: '/goodDetail',
          query: {
            skuNo: goodsId
            // templateDetailId: activityTemplateId,
            // activityId: activityInfoId
          }
        });
      } else {
        this.$notify({ type: 'warning', message: '该商品已抢完' });
      }
    },
    handleProgressByStatus(item) {
      if (!item) return 0;
      let percentage = 0;
      const { saleCount, goodsCount } = item.stockAndProgressInfo || {};
      percentage = (saleCount / (goodsCount + saleCount)) * 100;
      percentage = percentage < 0 ? 0 : percentage;
      const v = Math.round(percentage * 100) / 100;
      return v;
    }
  }
};
</script>
<style lang="less" scoped>
@import '~@/style/mixins.less';
.goods {
  &_title-icon {
    width: auto;
    height: 15px;
    vertical-align: -2px;
    margin-right: 3px;
  }
  &_item {
    border-radius: 6px;
    background-color: #fff;
    margin: 10px 0;
    position: relative;
    padding: 0 12px;
    &--title {
      .mx_multline_overwrite(1);
      color: #333;
      font-weight: 400;
      font-size: 13px;
      height: 20px;
      padding-top: 2px;
      box-sizing: border-box;
      line-height: 18px;
    }
    &--attr {
      color: #999;
      font-size: 12px;
      margin-top: 5px;
    }
    &--sold-out {
      position: absolute;
      top: 18px;
      left: 18px;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      transform: rotate(-20deg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      &__cn {
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        text-align: center;
      }
      &__en {
        font-size: 9px;
        line-height: 1;
        text-align: center;
      }
    }
    &--tag {
      display: flex;
      flex-wrap: wrap;
      line-height: 1;
      height: 32px;
      margin-top: 7px;

      // .title-mixin();
      // .mx_multline_overwrite(2);
      // height: 28px;
    }
    &--price {
      display: flex;
      align-items: center;
      height: 18px;
      line-height: 14;

      &__normal-price {
        font-size: 18px;
        font-weight: bold;
        color: #ec3333;
        line-height: 18;
        &::before {
          content: '¥';
          font-size: 14px;
        }
      }
      &__origin-price {
        font-size: 11px;
        color: #999;
        margin-left: 6px;
        line-height: 11;
      }
    }

    @{deep} .cr-card {
      &__header__thumb {
        background-color: #f7f8fa;
        border-radius: 7px;
        overflow: hidden;
        position: relative;
      }
      &__footer {
        margin-top: 0;
        padding-top: 0;
        position: relative;
      }
    }
    &.is-over {
      @{deep} .cr-card__header__content {
        filter: grayscale(100%);
      }
      .good-list_btn {
        background: #ccc;
        &::after {
          display: none;
        }
      }
    }
    &.is-hide {
      display: none;
    }
  }
  &_btn {
    position: absolute;
    right: 10px;
    bottom: 11px;
    background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
    border-width: 0;
    padding: 0 17px;
    height: 24px;
    line-height: 26px;
    z-index: 2;
    overflow: hidden;
    &::after {
      content: '';
      position: absolute;
      width: 19px;
      height: 24px;
      top: 0;
      background: url(../../../../assets/images/activity/btn-light.png) center no-repeat;
      background-size: contain;
      left: -100%;
      transform: scale(1.3);
      animation: moveTo 1.5s infinite linear;
      z-index: 3;
    }
  }
  &_progress-box {
    display: flex;
    align-items: center;
    line-height: 1;
    margin-top: 3px;
    &__desc {
      margin-left: 4px;
      color: #999;
      font-size: 12px;
    }
  }
  &_progress {
    width: 62px;
    overflow: hidden;
    border-radius: 5px;
  }
  .shopcart {
    position: absolute;
    right: 6px;
    bottom: 3px;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background-image: url('https://img.lkbang.net/shopcart-seckill.8a1cc2e.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
@keyframes moveTo {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}
</style>
