<template>
  <div class="fee-container">
    <div class="goods">
      <div class="fee-statistic">
        <span>商品总额</span>
        <span class="fee-statistic__bold"> ¥{{ calcFeeInfo.totalSkuFee || '0.00' }} </span>
      </div>
      <div class="fee-statistic">
        <span>运费</span>
        <span>¥{{ calcFeeInfo.totalFreightFee || '0.00' }}</span>
      </div>
    </div>
    <div class="coupon">
      <div
        v-for="(item, idx) in couponActivityInfoList"
        :key="idx"
        :class="[
          'fee-statistic',
          'freight-discount',
          idx != couponActivityInfoList.length - 1 && 'mg-bottom-20'
        ]"
        @click="handleCouponShow(item)"
      >
        <span>{{ feeTitle(item.couponActivityType) }}</span>
        <span
          :class="{
            'free-ship': !isAvailableFn(item.hasCouponActivity),
            'has-coupon': isAvailableFn(item.hasCouponActivity)
          }"
        >
          {{
            calcFeeInfo.totalFreightFee == '0.00' && item.couponActivityType == FREIGHT
              ? '已包邮'
              : isAvailableFn(item.hasCouponActivity)
              ? item.couponActivityAmt
                ? `-¥${(+item.couponActivityAmt).toFixed(2)}`
                : `选择可用${feeTitle(item.couponActivityType)}`
              : `无可使用的${feeTitle(item.couponActivityType)}`
          }}
        </span>
        <i
          v-if="
            isAvailableFn(item.hasCouponActivity) &&
              item.couponActivityAmt &&
              item.couponActivityAmt != '0.00'
          "
          class="iconfont icon-arrow"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { DISCOUNT, FREIGHT, CASH, REDUCTION, HAS_DISCOUNT, TITLE_LIST } from '@/constants/order';
export default {
  name: 'CouponInfo',
  props: {
    couponActivityInfoList: {
      type: Array,
      default: () => []
    },
    calcFeeInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      hasDiscount: HAS_DISCOUNT,
      DISCOUNT,
      FREIGHT,
      CASH,
      REDUCTION
    };
  },
  methods: {
    handleCouponShow(data) {
      this.$emit('coupon-show', data);
    },
    isAvailableFn(type) {
      return type === this.hasDiscount;
    },
    feeTitle(type) {
      return TITLE_LIST[type];
    }
  }
};
</script>
<style scoped lang="less">
.mg-bottom-20 {
  margin-bottom: @padding-lg;
}
.goods,
.coupon {
  background: @white;
  padding: @padding-sm @padding-xs;
  border-radius: @border-radius-md;
  margin-bottom: @padding-sm;
}
.fee {
  &-statistic {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      .text-13();
      &:first-child {
        color: @gray-4;
        margin-right: auto;
      }
      &:last-child {
        color: @black;
      }
      &.free-ship {
        color: @gray-4;
      }
      &.has-coupon {
        color: @black;
      }
    }
    &__bold {
      color: @red !important;
    }
    .icon-arrow {
      .text-12();
      color: @gray-4;
    }
  }
}
</style>
