<template>
  <div class="view-wrapper">
    <div class="app-view">
      <canvas id="renderDom"></canvas>
    </div>

  </div>

</template>

<script setup lang="ts">
import MainEditor from "@/script/MainEditor";
import { useCustomizationStore } from '@/stores/customization';
import { onMounted } from 'vue';

let mainEditor = new MainEditor();
const customizationStore = useCustomizationStore();

// 初始化定制化store
onMounted(() => {
  customizationStore.initializeLayers();
});

const createScene = async () => {
  await mainEditor.Awake();
}

const loadModel = async (modelUrlList: Array<string>,animationUrlList: Array<string>, complete: Function) => {

  mainEditor.loadModel({
    modelUrlList:modelUrlList,
    animationUrlList:animationUrlList,
    success: () => {
      complete();
    },
    error: (e: any) => {
    },
  });
};

const loadAnimation = async (animationUrlList: Array<string>, complete: Function) => {
  mainEditor.loadAnimation({
    animationUrlList:animationUrlList,
    success: () => {
      complete();
    },
  });
};


defineExpose({
  createScene,
  loadModel,
  loadAnimation,
});

</script>

<style scoped>
.app-view {
  width: 100%;
  height: 100%;
  position: absolute;
  /* background-color: #efeff1; */
  /* background: url("/resources/微信图片_20250512185835.jpg") no-repeat center center fixed; */
  background-size: 100% 100%;
}

#renderDom {
  width: 100%;
  height: 100%;
}

#button {
  width: 100px;
  height: 60px;
  background-color: red;
  position: absolute;
  right: 0;
  cursor: pointer;
}

#mask {
  position: absolute;
  top: 0;
  z-index: 99;
  pointer-events: none;
}

.time {
  width: 150px;
  height: 40px;
  position: absolute;
  top: 10px;
  background-color: red;
  left: 50%;
  margin-left: -75px;
  z-index: 99;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
}
</style>
