<template>
  <div class="order-section">
    <div v-if="!isRentalPage">
      <h1 class="order-title-text">결제금액</h1>
      <div class="order-price-info-wrapper">
        <span class="order-price-info-label">총 상품 금액</span>
        <span class="order-price-info-text"
          >{{ numberWithCommas(totalItemPrice) }}
          <span class="order-price-info-label">원</span>
        </span>
      </div>
      <div class="order-price-info-wrapper">
        <span class="order-price-info-label">총 배송비</span>
        <span class="order-price-info-text"
          >+{{ numberWithCommas(totalDeliveryPrice) }}
          <span class="order-price-info-label">원</span>
        </span>
      </div>
      <div
        class="order-price-info-wrapper"
        style="border-bottom: 1px solid #e5e5e5; padding-bottom: 16px"
      >
        <span class="order-price-info-label">총 할인 금액</span>
        <span class="order-price-info-text"
          >-{{
            numberWithCommas(Number(totalDiscountPrice) + Number(usingPoint))
          }}
          <span class="order-price-info-label">원</span>
        </span>
      </div>
    </div>
    <div class="order-price-info-wrapper" style="margin-top: 20px">
      <span class="order-title-text" style="margin: 0">최종 결제 금액</span>
      <span class="order-price-text"
        >{{ numberWithCommas(Number(totalPrice) - Number(usingPoint)) }}
        <span class="order-price-info-text" style="margin-left: 5px">원</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderPrice",
  props: {
    isRentalPage: Boolean,
    totalItemPrice: Number,
    totalDeliveryPrice: Number,
    totalDiscountPrice: Number,
    totalPrice: Number,
  },
  computed: {
    usingPoint: {
      get() {
        return this.$store.state.usingPoint;
      },
    },
  },
  methods: {
    numberWithCommas(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
};
</script>

<style></style>
