<script lang="ts" setup>
const route = useRoute();

function postMsgToMain(status: "success" | "error", message: string) {
  window.opener.postMessage({ type: `vnpay-${status}`, message }, "*");
}

onMounted(async () => {
  const verifyResult = await $fetch("/api/vnpay/return", { query: route.query });

  if (verifyResult.error) {
    postMsgToMain("error", verifyResult.error);
  } else {
    postMsgToMain(verifyResult.isSuccess && verifyResult.isVerified ? "success" : "error", verifyResult.message);
  }

  window.close();
});
</script>

<template>
  <div
    class="container my-20 is-flex is-flex-direction-column is-gap-2 is-align-items-center"
    style="max-width: 1000px"
  >
    <Icon
      name="svg-spinners:180-ring-with-bg"
      :size="40"
      class="has-text-primary"
    />
    <p>Đang xác thực đơn hàng...</p>
    <!-- debug -->
    <!-- <div>
      <div class="buttons">
        <button
          @click="postMsgToMain('success', 'Success message')"
          class="button is-light is-success"
        >
          post 'success'
        </button>
        <button
          @click="postMsgToMain('error', 'Error message')"
          class="button is-light is-danger"
        >
          post 'error'
        </button>
      </div>
      <pre>query: {{ route.query }}</pre>
    </div> -->
  </div>
</template>
