<template>
  <div class="home-view">
    <SiderMenu @on-change="onChange" :activePlugins="activePlugins" />
    <div id="div3d"></div>
    <ExampleIndex :activePlugins="activePlugins"/>
  </div>
</template>

<script>
import initScene from '@/mixins/initScene'
import SiderMenu from '@/components/SiderMenu.vue'
import PropertyPanel from '@/components/PropertyPanel.vue'
import gridImg from '@/assets/grid.jpg'
import * as utils from '../utils'
import storage from '../utils/storage'
import propertyPanel from '@uino/thing-ui-property-panel'
import ExampleIndex from './example/Index.vue'

export default {
  name: 'HomeView',
  components: {
    SiderMenu,
    PropertyPanel,
    ExampleIndex
  },
  mixins: [initScene],
  data() {
    return {
      pluginMap: new Map(),
      activePlugins: [],
    }
  },
  computed: {
    curPrefabMeta() {
      return this.prefabMap.get(this.curPrefab)
    },
  },
  methods: {
    onChange(e) {
      const { isOpen, data, activeList } = e
      if (isOpen) {
        app.loadBundle(data.usePath)
      } else {
        app.camera.position = app.query('World')[0].external.camInfo.eye
        app.camera.target = app.query('World')[0].external.camInfo.target
        this.saveSceneInfo()
        app.unloadBundle(data.usePath)
      }
      this.execExample(isOpen, data.name)
      this.savePluginState(data.usePath, isOpen)

      this.activePlugins = activeList
    },
    execExample(isOpen, pluginName) {
      pluginName = pluginName.replace(/\//g , '')
      try {
        const example = require(`./example/${pluginName}`).default
        if (isOpen) {
          example.install()
        }else {
          example.uninstall()
        }
      } catch (e) {
        // console.log(e)
      }
    },
    savePluginState(pluginPath, state) {
      try {
        let pluginState = storage.getItem('pluginState')
        pluginState = !pluginState ? {} : JSON.parse(pluginState)
        if (state) {
          pluginState[pluginPath] = state
        } else {
          Reflect.deleteProperty(pluginState, pluginPath)
        }
        storage.setItem('pluginState', JSON.stringify(pluginState))
      } catch (e) {
        console.warn(e)
      }
    },
    initGround() {
      // 获取场景的高度
      const sceneHeight = app.root.boundingBox.halfSize[1]
      const image = new THING.ImageTexture({
        url: gridImg,
      })
      image.waitForComplete().then(() => {
        new THING.Plane(512, 512, {
          position: [0, -sceneHeight, 0],
          style: {
            image,
            uv: {
              repeat: [10, 10],
            },
          },
        })
      })
    },
    saveSceneInfo() {
      // 保存视角到本地
      storage.setItem(
        'defaultSceneInfo',
        JSON.stringify({
          position: THING.Utils.cloneObject(app.camera.position),
          target: THING.Utils.cloneObject(app.camera.target),
        })
      )
    },
    initPlugins() {
      let pluginState = storage.getItem('pluginState')
      pluginState = !pluginState ? {} : JSON.parse(pluginState)

      this.activePlugins = Reflect.ownKeys(pluginState)
      this.activePlugins.forEach((name) => {
        app.loadBundle(name)
        this.execExample(true, name)
      })
    },
  },
  async mounted() {
    await this.initScene()

    // 创建一个地面
    this.initGround()
    this.initPlugins()
  },
}
</script>

<style scoped lang="less">
.siderbar-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: auto;

  .btns {
    margin: 20px;
    float: right;
    > div {
      margin-left: 20px;
      background: #000;
    }
  }
}
</style>
