<template>
  <div class="go-content-box">
    <vue3dLoader
      :backgroundColor="''"
      :backgroundAlpha="0"
      :height="h"
      :width="w"
      :filePath="filePath"
      @process="onProcess"
    />
    <div v-show="show" class="process">
      <n-space vertical>
        <n-spin :show="false">
          <template #description> 三维模型加载中：进度{{ process + '%' }} </template>
        </n-spin>
      </n-space>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { vue3dLoader } from 'vue-3d-loader'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

//三维静态文件
const filePath = ref()

filePath.value = ['src/assets/external/models/fbx/Samba Dancing.fbx']

//三维加载事件相关
const show = ref(false)

const currentModelIndex = ref()

const process = ref(0)

const onProcess = (event: any, index: number) => {
  // show.value = true
  try {
    process.value = Math.floor((event.loaded / event.total) * 100)
    if (process.value > 50) show.value = false
    if (index != 0) {
      currentModelIndex.value = index
    }
  } catch (e) {
    console.log(`三维模型加载失败原因：${e}`)
  } finally {
    show.value = false
  }
}
//三维加载事件

const { w, h } = toRefs(props.chartConfig.attr)
</script>

<style lang="scss" scoped>
.go-content-box {
  width: v-bind('w+"px"');
  height: v-bind('h+"px"');
  display: flex;
  align-items: center;
  justify-content: center;
  .process {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%, -50%);
  }
}
</style>