<template>
    <div class="cbim-three-preview" v-loading="threeLoading">
        <div class="cbim-three-preview_container" ref="threeModelRef"></div>
    </div>
</template>

<script>
import {
    scheduleCenter, dispose, getProfileWithScheduler, setProfileHelper, dataHelperWithAction
} from './libs'
export default {
  name: 'CbimThreePreview',
  props: {
    isProfile: {
      type: Boolean,
      default: () => false
    },
    showProfile: {
      type: Boolean,
      default: () => false
    },
    profile: {
      type: Object,
      default: () => ({})
    },
    actions: {
      type: Array,
      default: () => []
    },
    liteElements: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      threeLoading: false
    }
  },
  // watch: {
  //   'liteElements.length': {
  //     handler() {
  //
  //     },
  //     immediate: true
  //   }
  // },
  methods: {
    render() {
      this.threeLoading = true
      setTimeout(() => {
        const tRef = this.$refs.threeModelRef
        if (tRef && !this.isProfile) {
          const { tasks, translate, scale } = dataHelperWithAction(
            this.liteElements,
            tRef,
            this.actions
          )
          scheduleCenter(tRef, tasks, {
            isBatch: false,
            runAtIdle: true,
            breakWhenOutOfMemory: true,
            translate,
            scale
          }, (scene, camera, renderer) => {
            if(this.showProfile) {
              setProfileHelper(this.profile, translate, scene, camera, renderer)
            }
            this.threeLoading = false
          })
        } else if (tRef && this.isProfile) {
          getProfileWithScheduler({
            profile: this.profile,
            liteElements: this.liteElements
          }, this.$refs.threeModelRef, () => {
            this.threeLoading = false
          })
        }
      }, 0)
    }
  },
  mounted() {
    this.render()
  }
}
</script>

<style lang="scss">
    .cbim-three-preview {
        width: 100%;
        height: 100%;
        min-width: 200px;
        min-height: 200px;
        &_container {
            width: 100%;
            height: 100%;
            min-width: 200px;
            min-height: 200px;
        }
    }
</style>
