<template>
  <div v-if="isDiscounts" class="footer-disCounts">
    <div class="disCounts-bg" @click="closeDisCountsDialog" />
    <div class="discounts-content">
      <div class="discounts-title">
        金额明细
        <img
          src="https://img.lkbang.net/xcx/close.png"
          class="del"
          alt="del"
          @click="closeDisCountsDialog"
        />
      </div>
      <div class="discounts-detail">
        <div class="detail-list">
          <span>商品金额</span>
          <span>优惠金额</span>
          <!-- <span>运费金额</span> -->
        </div>
        <div class="detail-list list-right">
          <span class="list-right-order-amount">{{ calcFeeInfo.totalSkuFee }}</span>
          <span
            :class="[
              'list-right-coupon-amount',
              { 'list-right-coupon-amount_val': calcFeeInfo.totalCouponFee }
            ]"
            >{{ calcFeeInfo.totalCouponFee || 0 }}</span
          >
          <!-- <span :class="{ 'list-right-freight-amount': calcFeeInfo.totalFreightFee }">{{
            calcFeeInfo.totalFreightFee || '免运费'
          }}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from '../shopCartModules';
export default {
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isDiscounts: false
    };
  },
  computed: {
    ...mapState(['calcFeeInfo'])
  },
  watch: {
    value: function(val) {
      this.isDiscounts = val;
    }
  },
  methods: {
    closeDisCountsDialog() {
      this.$emit('close', false);
    }
  }
};
</script>
<style lang="less" scoped>
.footer-disCounts {
  position: absolute;
  top: -243px;
  left: 0;
  width: 100%;
  overflow: hidden;
  .disCounts-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .discounts-content {
    width: 100%;
    background-color: @white;
    border-radius: 16px 16px 0 0;
    height: 243px;
    position: relative;
  }
  .discounts-title {
    text-align: center;
    font-size: 16px;
    position: relative;
    height: 45px;
    padding: 15px 0 8px 0px;
    box-sizing: border-box;
    font-weight: bold;

    .del {
      position: absolute;
      right: 10px;
      top: 15px;
      width: 15px;
      height: 15px;
    }
  }
  .discounts-detail {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 @padding-lg;
    border-top: 1px solid #f2f3f5;
    .detail-list {
      display: flex;
      width: 50%;
      justify-content: flex-start;
      flex-direction: column;
      flex-shrink: none;
      font-size: 14px;
      color: #333;
      line-height: 50px;
    }
    .list-right {
      align-items: flex-end;
      font-size: 14px;
      &-order-amount::before,
      &-freight-amount::before,
      &-coupon-amount::before {
        content: '¥';
      }
      &-coupon-amount_val {
        color: #ec1500;
        &::before {
          content: '-¥';
        }
      }
    }
  }
}
</style>
