<template>
  <div class="good__popPromotion">
    <div v-for="(item, key) in activityAndCoupon.activitys" :key="key" class="popPromotion__card">
      <div class="popPromotion__head">
        <div class="popPromotion__title">{{ item.popPromotionTypeName }}</div>
        <!-- <div class="popPromotion__right">{{ rightText }}</div> -->
      </div>
      <div v-for="(it, k) in item.popPromotionActivity" :key="k" class="popPromotion__list">
        <div class="popPromotion__list__item" @click="jumpToUrl(it.jumpUrl)">
          <cr-tag class="popPromotion__list__item__tag" color="#FFEDE6" text-color="#FF2D2D">
            {{ it.title }}
          </cr-tag>
          <div class="popPromotion__list__item__content">
            <p>{{ it.text }}</p>
            <p>{{ it.activityMark }}</p>
          </div>
          <div v-if="it.jumpUrl" class="popPromotion__list__item__right cr-icon cr-icon--arrow">
            <span>{{ it.rightText }}</span>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="activityAndCoupon.coupons && activityAndCoupon.coupons.length"
      class="popPromotion__card coupon"
    >
      <div class="popPromotion__head">
        <div class="popPromotion__title">可领优惠券</div>
        <div v-if="canBatchPick" class="popPromotion__right" @click="batchPick">一键领取</div>
      </div>
      <div class="popPromotion__list">
        <coupon-card :coupon-list="activityAndCoupon.coupons" @pickupCoupon="pickup" />
      </div>
    </div>
  </div>
</template>
<script>
import couponCard from '@/components/couponCard';
import { mapActions, mapGetters } from '../store';
import { mapState } from 'vuex';
import { locationHrefPatch } from '@/service/utils.service';
import localStorage from '@/service/localStorage.service';

export default {
  name: 'PopPromotion',
  components: {
    couponCard
  },
  computed: {
    ...mapGetters(['activityAndCoupon', 'selectedSku']),
    ...mapState({
      userInfo: state => {
        return (state && state.pay.userInfo) || {};
      }
    }),
    canBatchPick() {
      return this.activityAndCoupon.coupons.some(item => !item.pickupAble);
    }
  },
  methods: {
    ...mapActions(['pickupCoupon']),
    jumpToUrl(jumpUrl) {
      this.$track.registeredEvents('H5_CommodityDetailSubtitleClick', {
        commodity_id: this.selectedSku.skuId,
        isLogin: !!localStorage.get('vccToken')
      });
      jumpUrl = this.formatUrl(jumpUrl);
      locationHrefPatch(jumpUrl, this.$router);
    },
    formatUrl(url) {
      return url
        ?.replace(/\{vccToken\}/g, localStorage.get('vccToken'))
        ?.replace(/\{token\}/g, localStorage.get('vccToken'))
        ?.replace(/\{phone\}/g, this.userInfo.phoneNumber);
    },
    batchPick() {
      this.pickupCoupon();
    },
    pickup(_, index) {
      this.pickupCoupon(index);
    }
  }
};
</script>
<style lang="less" scoped>
.good__popPromotion {
  padding: 0 @padding-sm @padding-sm;
}
.popPromotion {
  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: @padding-sm 0;
  }
  &__title {
    .text-size(13);
    color: @gray-4;
  }
  &__right {
    .text-size(12);
    color: @red;
  }
  &__list {
    &__item {
      display: flex;
      align-items: flex-start;
      margin-bottom: @padding-sm;
      &__tag {
        border-radius: 4px;
        .text-size(12);
        font-weight: 500;
        margin-top: -2px;
        margin-right: @padding-xs;
      }
      &__content {
        p {
          .text-size(12);
          color: @black;
          &:last-child {
            font-size: 11px;
            color: @gray-4;
          }
        }
      }
      &__right {
        color: @gray-4;
        margin-left: auto;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        span {
          .text-size(12);
          color: @gray-4;
          margin-top: -3px;
          margin-right: @padding-x;
        }

        &::before {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
