<template>
  <div class="good__priceInfo" :class="{ hasActivityBg }" :style="activityBg">
    <div class="priceInfo__main">
      <div class="priceInfo__price">
        <div class="priceInfo__salePrice">
          <i>¥</i>
          <span>{{ priceInfo.salePrice || 0 }}</span>
        </div>
        <div
          v-if="activityInfo.discountPrice"
          class="priceInfo__discountPrice"
          :class="{
            max: !hasActivityBg && activityInfo.activityType === 9,
            multi: hasActivityBg && activityInfo.priceTitle
          }"
        >
          <span>
            {{ hasActivityBg && activityInfo.priceTitle ? activityInfo.priceTitle + ':' : null }}
            ¥{{ activityInfo.skuInfoSalePrice || 0 }}
          </span>
          <cr-image
            v-if="activityInfo.priceIcon"
            v-imogr
            :src="activityInfo.priceIcon"
            height="0.373rem"
            width="auto"
          />
          <cr-icon
            v-if="activityInfo.priceIcon && activityInfo.actDesc"
            type="info-o"
            size="0.426rem"
            color="#999"
            @click="showPopup"
          />
        </div>
      </div>
      <div v-if="!hasActivityBg" class="priceInfo__saleCount">
        销量: {{ priceInfo.saleCount || 0 }}
      </div>
      <div v-else class="priceInfo__activity">
        <div class="priceInfo__activity__icon">
          <cr-image
            v-imogr
            :src="activityInfo.actIcon"
            :height="activityInfo.activityType === 9 ? '0.96rem' : '0.5867rem'"
            width="auto"
          />
          <cr-icon v-if="activityInfo.actDesc" type="info-o" color="#999" @click="showPopup" />
        </div>
        <div v-if="showCountDown" class="priceInfo__activity__info counter">
          <svg-icon icon-class="shijian" />
          <span>
            距{{ activityInfo.activityTimeInfo.activityTimeType === 1 ? '开始' : '结束' }}
          </span>
          <cr-count-down :time="countTime" />
        </div>
        <div v-else-if="activityInfo.actText" class="priceInfo__activity__info">
          {{ activityInfo.actText }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from '../store';

export default {
  name: 'PriceInfo',
  computed: {
    ...mapGetters(['priceInfo', 'activityInfo']),
    hasActivity() {
      return 'activityType' in this.activityInfo;
    },
    hasActivityBg() {
      return this.activityInfo.actBackgroundImg || this.activityInfo.actTextBgcolorFront;
    },
    activityBg() {
      const { actTextBgcolorFront, actTextBgcolorBehind, actBackgroundImg } = this.activityInfo;
      const style = {
        backgroundColor: actTextBgcolorFront
      };
      if (actTextBgcolorBehind) {
        style.backgroundImage = `linear-gradient(180deg, ${actTextBgcolorFront} 50%, ${actTextBgcolorBehind} 50%)`;
      } else if (actBackgroundImg) {
        style.backgroundImage = `url(${this.$imogr(actBackgroundImg)})`;
      }
      return style;
    },
    showCountDown() {
      return (
        this.activityInfo.activityType === 11 &&
        this.activityInfo.activityTimeInfo.endTime < 86400000
      );
    },
    countTime() {
      let time = 0;
      if (!this.activityInfo.activityTimeInfo) {
        return time;
      }
      const {
        activityTimeType,
        startTime,
        currentTime,
        endTime
      } = this.activityInfo.activityTimeInfo;
      if (endTime < currentTime) {
        return time;
      }
      if (activityTimeType === 1) {
        time = startTime - currentTime;
      } else {
        time = endTime - currentTime;
      }
      return time;
    }
  },
  methods: {
    ...mapActions(['setPopupState']),
    showPopup() {
      this.setPopupState({ type: 'rule', title: '活动规则' });
    }
  }
};
</script>
<style lang="less" scoped>
.good__priceInfo {
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: @white;
  border-top-left-radius: @border-radius-md;
  border-top-right-radius: @border-radius-md;
  &.hasActivityBg {
    background-color: transparent;

    .priceInfo {
      &__salePrice {
        color: @white;
        margin-bottom: @padding-unit;
      }
      &__main {
        align-items: center;
      }
      &__price {
        flex-direction: column;
        justify-content: center;
      }
    }
  }
}
.priceInfo {
  &__main {
    padding: @padding-xs @padding-sm @padding-xs;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  &__price {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }
  &__salePrice {
    font-weight: 600;
    color: @red-light;
    i {
      font-size: 18px;
      font-style: normal;
    }
    span {
      font-size: 30px;
      line-height: 25px;
    }
  }
  &__saleCount {
    .text-size(13);
    color: @gray-4;
  }
  &__discountPrice {
    display: flex;
    align-items: baseline;
    span {
      color: #ed7d08;
      font-weight: 500;
      .text-size(13);
      padding-left: @padding-unit;
    }
    .cr-icon {
      padding-left: @padding-unit;
    }
    &.max {
      span {
        color: #4330b7;
      }
    }
    &.multi {
      span {
        color: @white;
      }
    }
  }
  &__more {
    padding: 0 @padding-sm;
    color: @white;
    .text-size(13);
  }
  &__activity {
    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      .cr-icon {
        margin-left: 2px;
      }
    }
    &__info {
      margin-top: @padding-unit;
      color: @white;
      .text-size(12);
      display: flex;
      align-items: center;
      justify-content: center;
      &.counter {
        background: fade(#000, 25%);
        border-radius: @border-radius-sm;
        .svg-icon {
          padding-right: 2px;
        }
        .cr-count-down {
          color: @white;
          .text-size(12);
          width: 55px;
        }
      }
    }
  }
}
</style>
