<script setup>
const props = defineProps({
  invoiceId: Number,
  finalizeOrder: Function,
});
const { activeCartItems } = inject("pos");
const subtotal = computed(() => {
  return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
});
</script>
<template>
  <div class="is-flex is-flex-direction-column is-gap-2 is-align-items-center">
    <NuxtImg
      :src="qr(subtotal)"
      class="h-full max-h-140"
      alt="VietQR code"
    />
    <button
      @click="finalizeOrder(invoiceId)"
      class="button is-primary"
    >
      <span class="icon">
        <Icon
          name="material-symbols:check-rounded"
          :size="18"
        />
      </span>
      <span>Xác nhận thanh toán</span>
    </button>
  </div>
</template>
