<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { Meta3D } from "../../plugins/meta3d/index";
import router from "../../router";

const id = "meta3d-container";
const dataUrl = "/meta3d/";
let meta3d: any;

const openData = async () => {
  const dataId = router.currentRoute.value.query.id;
  const dataName = `data${dataId ? `-${dataId}` : ""}`;
  // DracoCompression.Configuration.decoder.wasmUrl =
  //   "/meta3d/js/draco_wasm_wrapper_gltf.js";
  // DracoCompression.Configuration.decoder.wasmBinaryUrl =
  //   "/meta3d/js/draco_decoder_gltf.wasm";
  // DracoCompression.Configuration.decoder.fallbackUrl =
  //   "/meta3d/js/draco_decoder_gltf.js";
  meta3d = new Meta3D(id);
  let data;
  await Promise.all([
    meta3d.init(),
    new Promise((resolve) => {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", dataUrl + dataName, true);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          data = xhr.responseText;
          resolve(undefined);
        }
      };
    }),
  ]);
  meta3d.open({ data, running: true });
};

onMounted(() => {
  openData();
});

onUnmounted(() => {
  meta3d?.dispose();
});
</script>

<style scoped></style>
