<script setup>
import ProductCard from "~/components/pos/ProductCard.vue";

const props = defineProps({
  customer: Object,
  address: Object,
  paymentMethod: Object,
});

const { $insertapi } = useNuxtApp();
const id = "confirmOrder";
const store = useStore();
const subtotal = computed(() => {
  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
});
const shipping_address = computed(() => {
  return `${props.address.address_detail}, ${props.address.ward}, ${props.address.district}, ${props.address.city}`;
});

async function createOrder() {
  const order = await $insertapi("Invoice", {
    data: {
      customer: props.customer.id,
      customer_name: props.customer.fullname,
      customer_phone: props.customer.phone,
      customer_email: props.customer.email,
      shipping_address,
      product_amount: store.selectedImeis.length,
    },
  });
}
</script>

<template>
  <div :id="id">
    <div class="card">
      <div class="card-content has-background-primary-100">
        <p class="icon-text font-semibold mb-2">
          <span class="icon">
            <Icon
              name="material-symbols:supervisor-account-outline-rounded"
              :size="18"
            />
          </span>
          <span>Khách hàng</span>
        </p>
        <div>
          <p>{{ props.customer.fullname }}</p>
          <p class="is-size-7 has-text-grey">
            {{ props.customer.phone }}
            •
            {{ props.customer.email }}
          </p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content has-background-primary-100">
        <p class="icon-text font-semibold mb-2">
          <span class="icon">
            <Icon
              name="material-symbols:shopping-cart-outline-rounded"
              :size="18"
            />
          </span>
          <span>{{ store.selectedImeis.length }} sản phẩm</span>
        </p>
        <div class="is-flex is-flex-direction-column is-gap-1">
          <ProductCard
            v-for="imei in store.selectedImeis"
            :key="imei.id"
            :imei="imei"
          />
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content has-background-primary-100">
        <p class="icon-text font-semibold mb-2">
          <span class="icon">
            <Icon
              name="material-symbols:credit-card-outline"
              :size="18"
            />
          </span>
          <span>Thanh toán</span>
        </p>
        <div>
          <div class="block is-flex is-justify-content-space-between">
            <span>Phương thức thanh toán</span>
            <span>{{ props.paymentMethod.name }}</span>
          </div>
          <table class="table is-fullwidth fs-13">
            <tbody>
              <tr>
                <td>
                  <span>Tạm tính</span>
                  <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
                </td>
                <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
              </tr>
              <tr>
                <td class="font-bold fs-14">Tổng cộng</td>
                <td class="has-text-right has-text-success-35 font-bold fs-17">
                  {{ $numtoString(subtotal, { hasUnit: true }) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <pre>{{ props }}</pre>
    <Teleport
      defer
      :to="`.modal-card:has(#${id}) .modal-card-foot`"
    >
      <div class="buttons w-full is-right">
        <button
          @click="$emit('close')"
          class="button is-white"
        >
          Huỷ
        </button>
        <button class="button is-success">Đặt hàng</button>
      </div>
    </Teleport>
  </div>
</template>
<style scoped>
.table {
  background-color: transparent;

  td {
    background-color: transparent;
  }
}
</style>
