<template>
  <div class="go-content-box" :style="{ border: !borderConfig.show ? 'none' : '' }">
    <div v-if="supportWebGL">
      <vue3dLoader
        ref="vue3dLoaderRef"
        :webGLRendererOptions="webGLRendererOptions"
        :backgroundColor="backgroundColor"
        :backgroundAlpha="backgroundAlpha"
        :height="h"
        :width="w"
        :filePath="dataset"
        :mltPath="mtlPath"
        :textureImage="textureImage"
        :autoPlay="autoPlay"
        :enableDamping="enableDamping"
        :outputEncoding="outputEncoding"
        :clearScene="clearScene"
        :dampingFactor="dampingFactor"
        @process="onProcess"
        @load="onLoad"
        @click="onClick"
      />
      <div v-show="show" class="process">
        <span> 拼命加载中... </span>
        <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing />
      </div>
    </div>
    <div v-else>您的浏览器不支持WebGL!</div>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, onMounted, nextTick, computed, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { vue3dLoader } from 'vue-3d-loader'
import { useDesignStore } from '@/store/modules/designStore/designStore'

const designStore = useDesignStore()

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

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

const vue3dLoaderRef = ref(null)

//threejs配置
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: any) => {
  process.value = Math.floor((event.loaded / event.total) * 100)
}

const onClick = (event: any) => {
  console.log(event)
}

//判断浏览器是否支持WebGL
const supportWebGL = ref(true)
const detectWebGLContext = () => {
  let canvas = document.createElement('canvas')
  let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
  if (gl && gl instanceof WebGLRenderingContext) {
    supportWebGL.value = true
  } else {
    supportWebGL.value = false
  }
}

onMounted(() => {
  detectWebGLContext()
  console.log(`实例`, vue3dLoaderRef.value)
})

const { w, h } = toRefs(props.chartConfig.attr)

const {
  backgroundColor,
  backgroundAlpha,
  autoPlay,
  enableDamping,
  dataset,
  mtlPath,
  textureImage,
  outputEncoding,
  clearScene,
  dampingFactor,
  borderConfig
} = toRefs(props.chartConfig.option) as any

watch(dataset, (newData: string) => {
  //dateset为空则清除场景
  if(!newData)clearScene.value=true
})
</script>

<style lang="scss" scoped>
.go-content-box {
  height: 100%;
  border-width: v-bind('borderConfig.size + "px"');
  border-style: solid;
  border-color: v-bind('borderConfig.color');
  // border-color:v-bind('borderConfig.color');
  .process {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>