<template>
  <view class="footer-disCounts">
    <uniPopup
      ref="uniPopup"
      class="discounts-popup"
      title="金额明细"
      type="bottom"
      closeable
      @change="closeDisCountsDialog"
    >
      <view class="discounts-detail">
        <view class="detail-list">
          <text>商品金额</text>
          <text>优惠金额</text>
          <!-- <text>运费金额</text> -->
        </view>
        <view class="detail-list list-right">
          <text class="list-right-order-amount">{{ calcFeeInfo.totalSkuFee }}</text>
          <text
            :class="[
              'list-right-coupon-amount',
              { 'list-right-coupon-amount_val': calcFeeInfo.totalCouponFee }
            ]"
            >{{ calcFeeInfo.totalCouponFee || 0 }}</text
          >
          <!-- <text :class="{ 'list-right-freight-amount': calcFeeInfo.totalFreightFee }">{{
            calcFeeInfo.totalFreightFee || "免运费"
          }}</text> -->
        </view>
      </view>
    </uniPopup>
  </view>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import { mapState } from "../shopCartModules";
export default {
  components: {
    uniPopup
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(["calcFeeInfo"])
  },
  watch: {
    value: function(val) {
      if (val) {
        this.$refs?.uniPopup?.open();
      } else {
        this.$refs?.uniPopup?.close();
      }
    }
  },
  methods: {
    closeDisCountsDialog(obj) {
      this.$emit("close", obj);
    }
  }
};
</script>
<style lang="scss" scoped>
.footer-disCounts {
  .discounts-detail {
    // height: 486rpx;
    height: 346rpx;
    width: 750rpx;
    background-color: $white;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 $padding-lg;
    border-top: 1rpx solid #f2f3f5;
    .detail-list {
      display: flex;
      width: 50%;
      justify-content: flex-start;
      flex-direction: column;
      flex-shrink: none;
      font-size: $uni-font-size-base;
      color: $font-color-dark;
      line-height: 100rpx;
    }
    .list-right {
      align-items: flex-end;
      font-size: $uni-font-size-base;
      &-order-amount::before,
      &-freight-amount::before,
      &-coupon-amount::before {
        content: "¥";
      }
      &-coupon-amount_val {
        color: $font-color-search;
        &::before {
          content: "-¥";
        }
      }
    }
  }
}
</style>
