<template>
  <div class="order-section">
    <h1 class="order-title-text">주문상품</h1>
    <div v-for="orderedItem in orderedItems" :key="orderedItem.index">
      <div v-if="orderedItem.length === 1">
        <item-component :orderedItem="orderedItem[0]"></item-component>
      </div>
      <div v-else>
        <items-component :orderedItemList="orderedItem"></items-component>
      </div>
    </div>
    <div
      v-if="!isRentalPage"
      class="order-price-info-wrapper"
      style="
        background-color: #eef3ff;
        border-radius: 5px;
        padding: 10px 16px;
        margin-top: 18px;
      "
    >
      <span class="order-price-info-text">주문 금액</span>
      <span class="order-price-text2"
        >{{ numberWithCommas(totalItemsPrice) }}
        <span style="font-size: 16px; font-weight: 400; line-height: 23.68px"
          >원</span
        >
      </span>
    </div>
  </div>
</template>

<script>
import itemComponent from "./item.vue";
import itemsComponent from "./items.vue";

export default {
  name: "orderItemComponent",
  components: {
    "item-component": itemComponent,
    "items-component": itemsComponent,
  },
  props: {
    isRentalPage: Boolean,
    orderedItems: Array,
  },
  computed: {
    totalItemsPrice: function () {
      const _data = this.orderedItems.flat();
      return _data.reduce((prev, curr) => {
        return prev + curr.price;
      }, 0);
    },
  },
  methods: {
    numberWithCommas(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
};
</script>

<style></style>
