<template>
  <view class="fee-container">
    <view class="goods">
      <view class="fee-statistic mg-bottom-20">
        <span>商品总额</span>
        <span class="fee-statistic__bold"> ¥{{ calcFeeInfo.totalSkuFee || "0.00" }} </span>
      </view>
      <view class="fee-statistic">
        <span>运费</span>
        <span class="fee-statistic__total">¥{{ calcFeeInfo.totalFreightFee || "0.00" }}</span>
      </view>
    </view>
    <view class="coupon">
      <view
        v-for="(item, idx) in couponActivityInfoList"
        :key="idx"
        :class="[
          'fee-statistic',
          'freight-discount',
          idx != couponActivityInfoList.length - 1 && 'mg-bottom-20'
        ]"
        @click="handleCouponShow(item)"
      >
        <view>
          <span>{{ feeTitle(item.couponActivityType) }}</span>
          <span
            v-if="
              feeTitle(item.couponActivityType) === '礼品卡' &&
                isAvailableFn(item.hasCouponActivity)
            "
            class="iconfont icon-info-line"
            @click.stop="giftCardOpen"
          />
        </view>
        <view>
          <span
            :class="{
              'free-ship': !isAvailableFn(item.hasCouponActivity),
              'has-coupon': isAvailableFn(item.hasCouponActivity)
            }"
          >
            {{
              calcFeeInfo.totalFreightFee == "0.00" && item.couponActivityType == FREIGHT
                ? "已包邮"
                : isAvailableFn(item.hasCouponActivity)
                ? item.couponActivityAmt
                  ? feeTitle(item.couponActivityType) === "礼品卡"
                    ? `已抵扣¥${(+item.couponActivityAmt).toFixed(2)}`
                    : `-¥${(+item.couponActivityAmt).toFixed(2)}`
                  : `选择可用${feeTitle(item.couponActivityType)}`
                : `无可使用的${feeTitle(item.couponActivityType)}`
            }}
          </span>
          <text
            v-if="
              isAvailableFn(item.hasCouponActivity) &&
                item.couponActivityAmt &&
                item.couponActivityAmt != '0.00'
            "
            size="26"
            class="iconfont icon-arrow"
          />
        </view>
      </view>
    </view>
  </view>
</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);
    },
    giftCardOpen() {
      this.$emit("giftGard-pop", true);
    },
    isAvailableFn(type) {
      return type === this.hasDiscount;
    },
    feeTitle(type) {
      return TITLE_LIST[type];
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/style/var.scss";
.mg-bottom-20 {
  margin-bottom: $padding-lg;
}
.goods {
  background: #fff;
  padding: 24rpx 16rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}
.coupon {
  background: $white;
  padding: $padding-sm 16rpx;
  border-radius: $border-radius-md;
  margin-bottom: $padding-sm;
}
.fee {
  &-statistic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 26rpx;
      color: $gray-4;
      &.has-coupon {
        color: $black;
      }
    }
    &__bold {
      color: $red !important;
    }
    &__total {
      color: $black !important;
    }
    .icon-arrow {
      font-size: 23rpx;
      color: $gray-4;
    }
    .icon-info-line {
      font-size: 24rpx;
      margin-left: 12rpx;
      vertical-align: middle;
      color: $gray-3;
    }
  }
}
</style>
