<template>
  <div
    style="
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      padding: 12px 16px;
      margin: 10px 0;
    "
  >
    <div class="order-item-header">
      <h2 class="order-item-brand">
        {{ orderedItem.brandName }}
      </h2>
      <span class="order-item-delivery-info">
        {{ orderedItem.deliveryFee }}</span
      >
    </div>
    <a
      class="order-item-main"
      v-bind:href="`https://m.store.nosearch.com/goods/goods_view.php?goodsNo=${orderedItem.goodsNo}`"
    >
      <img
        class="order-item-img"
        v-bind:src="`https://api.nosearch.com/ns_api/v1/product/storeImage?imageUrl=https://m.store.nosearch.com${orderedItem.imgUrl}`"
      />
      <div class="order-item-main-info">
        <h1 class="order-item-main-text" style="margin-bottom: 6px">
          {{ orderedItem.goodsNm }}
        </h1>
        <span
          class="order-item-sub-text"
          style="margin-bottom: 12px"
          v-if="orderedItem.option"
        >
          <div
            v-for="option in Object.keys(orderedItem.option)"
            v-bind:key="option.index"
          >
            {{ option }}: {{ orderedItem.option[option] }}
          </div>
        </span>
        <div style="display: flex; align-items: center">
          <h3 class="order-item-main-text" style="font-weight: 700">
            {{ numberWithCommas(orderedItem.price) }}원
          </h3>
          <div class="order-item-v-bar"></div>
          <span class="order-item-count">{{ orderedItem.goodsCnt }}개</span>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "orderItem",
  props: {
    orderedItem: Object,
  },
  methods: {
    numberWithCommas(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
};
</script>

<style></style>
