<script setup>
const props = defineProps({
  order: Object,
});

const { $numtoString } = useNuxtApp();
</script>

<template>
  <div>
    <div class="is-flex is-flex-direction-column is-gap-2">
      <div
        v-for="product in order.order__products"
        :key="product.id"
        class="p-3 has-background-grey-95 rounded-md"
      >
        <div class="fs-15 is-flex is-justify-content-space-between">
          <p class="">{{ product.name }}</p>
          <p class="font-bold">
            {{ $numtoString(product.total, { hasUnit: true }) }}
          </p>
        </div>
        <div class="is-flex is-gap-8 fs-13 has-text-grey-50 mt-1">
          <p>SL: {{ product.quantity }}</p>
          <p>Đơn giá: {{ $numtoString(product.unit_price, { hasUnit: true }) }}</p>
          <p>
            Giảm:
            {{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(product.discount) }}
          </p>
        </div>
      </div>
    </div>
    <hr />
    <div class="font-bold is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
      <p class="fs-15">Tổng cộng</p>
      <p class="fs-18">{{ $numtoString(order.total, { hasUnit: true }) }}</p>
    </div>
  </div>
</template>
