<template>
  <div class="go-content-box">
    <div>
      <vue3dLoader
        ref="vue3dLoaderRef"
        :requestHeader="headers"
        :webGLRendererOptions="webGLRendererOptions"
        :height="200"
        :width="400"
        :filePath="threeModelPath"
        @process="onProcess"
        @load="onLoad"
        :intersectRecursive="true"
      />
      <div v-show="show" class="process">
        <span> 拼命加载中... </span>
        <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'
import { vue3dLoader } from 'vue-3d-loader'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { getJwtToken } from '@/utils/external/auth'

const designStore = useDesignStore()

defineProps({
  threeModelPath: {
    type: String,
    default: ''
  }
})

const themeColor = computed(() => {
  return designStore.getAppTheme
})

const vue3dLoaderRef = ref(null)

const headers = {
  'x-authorization': `Bearer ${getJwtToken()}`
}
const webGLRendererOptions = {
  alpha: true, // 透明
  antialias: true, // 抗锯齿
  // fix: 预览三维图像需加上preserveDrawingBuffer: true
  preserveDrawingBuffer: true //缩略图生效需开启
}

//三维模型加载
const show = ref(false)

const onLoad = async () => {
  //加载完成
  await nextTick()
  show.value = false
}

//三维模型进度条
const process = ref(0)

const onProcess = (event: Recordable) => {
  process.value = Math.floor((event.loaded / event.total) * 100)
}
</script>

<style lang="scss" scoped>
.go-content-box {
  height: 100%;
  .process {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>