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

<script>
import { Meta3D, DracoCompression } from "../../plugins/meta3d";
import router from "../../router";

let meta3d = null;

export default {
  name: "Meta2d",
  data() {
    return {
      id: "meta3d-container",
      dataUrl: "/meta3d/",
    };
  },
  mounted() {
    this.openData();
  },
  destroyed() {
    if (meta3d) {
      meta3d.dispose();
    }
  },
  methods: {
    async openData() {
      const dataId = router.currentRoute.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(this.id);
      let data;
      await Promise.all([
        meta3d.init(),
        new Promise((resolve) => {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", this.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 });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
