<template>
  <div
    v-if="discountBarInfo.discountDetails"
    class="good__discountBar"
    @click="setPopupState({ type: 'discountBar', title: discountBarInfo.rightTitle })"
  >
    <div class="discountBar__list">
      <span
        v-for="(item, key) in discountBarInfo.discountDetails"
        :key="key"
        class="discountBar__list__item"
        :class="{ coupon: item.discountType === 1 }"
      >
        {{ item.discountDetail }}
      </span>
    </div>
    <div class="discountBar__right">
      <span>{{ discountBarInfo.rightTitle }}</span>
      <cr-icon type="arrow" color="#fff" size="0.213rem" />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from '../store';

export default {
  name: 'DiscountBar',
  computed: {
    ...mapGetters(['discountBarInfo'])
  },
  methods: {
    ...mapActions(['setPopupState'])
  }
};
</script>
<style lang="less" scoped>
.good__discountBar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: @padding-sm @padding-sm @padding-xs;
}
.discountBar {
  &__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    &__item {
      .text-size(12px);
      margin: 0 4px 4px;
      font-weight: 500;
      color: @white;
      border-radius: 4px;
      padding: 1px @padding-unit;
      background: linear-gradient(270deg, #ff5d00 0%, #ff1900 100%);
      &.coupon {
        position: relative;
        &::after,
        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 7px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #fff;
        }
        &::before {
          left: -4px;
        }
        &::after {
          right: -4px;
        }
      }
    }
  }
  &__right {
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, fade(#ff5d00, 10%) 0%, fade(#ff1900, 10%) 100%);
    .text-size(12px);
    padding: 1px @padding-unit;
    border-radius: @border-radius-max;
    color: @red;
    .cr-icon {
      border-radius: @border-radius-max;
      background: linear-gradient(270deg, #ff5d00 0%, #ff1900 100%);
      margin-left: 2px;
      text-align: center;
      font-size: 8px !important;
      width: 20px !important;
      height: 20px !important;
      line-height: 20px;
      transform: scale(0.7);
    }
  }
}
</style>
