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

const { $getdata, $formatNum } = useNuxtApp();
const invoiceDetails = ref([]);
onMounted(async () => {
  invoiceDetails.value = await $getdata("Invoice_Detail", { filter: { invoice: props.invoice.id } });
});
</script>

<template>
  <div>
    <pre class="fs-12 max-h-40 mb-2">{{ invoiceDetails }}</pre>
    <div class="is-flex is-flex-direction-column is-gap-2">
      <div
        v-for="invoiceDetail in invoiceDetails"
        :key="invoiceDetail.id"
        class="p-3 has-background-white-ter rounded-md"
      >
        <div class="fs-15 is-flex is-justify-content-space-between">
          <p>{{ invoiceDetail.variant__product__name }}</p>
          <p class="font-semibold">
            {{ $formatNum(invoiceDetail.price, { hasUnit: true }) }}
          </p>
        </div>
        <div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
          <p>SL: {{ invoiceDetail.quantity }}</p>
          <p>Đơn giá: {{ $formatNum(invoiceDetail.price, { hasUnit: true }) }}</p>
          <p>
            Giảm:
            {{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(invoiceDetail.discount) }}
          </p>
        </div>
      </div>
    </div>
    <hr />
    <table class="table is-fullwidth is-bordered fs-14 mb-8">
      <tbody class="has-text-right">
        <tr>
          <td class="has-text-grey-dark">Tổng tiền hàng</td>
          <td>{{ $formatNum(invoice.total_amount, { hasUnit: true }) }}</td>
        </tr>
        <tr>
          <td class="has-text-grey-dark">Phí vận chuyển</td>
          <td>{{ $formatNum(invoice.shipping_fee, { hasUnit: true }) }}</td>
        </tr>
        <tr>
          <td class="has-text-grey-dark">Giảm giá</td>
          <td>{{ $formatNum(invoice.discount_amount, { hasUnit: true }) }}</td>
        </tr>
        <tr class="font-bold">
          <td>Tổng cộng</td>
          <td class="fs-17">{{ $formatNum(invoice.final_amount, { hasUnit: true }) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
table td {
  vertical-align: middle;
}
</style>
