<template>
  <div class="psv-navigator-viewer-full psv-navigator-viewer-relative">
    <div ref="refViewer" class="psv-navigator-viewer-full psv-navigator-viewer-bg-blank"></div>
    <div v-for="(item,index) in coverLayers" :key="index" 
        class="psv-navigator-viewer-cover"
        :style="coverLayerStyle(item.position)"></div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { VrEngine } from 'photo-sphere-viewer-navigator-engine'

//支持vue2或vue3引入使用
export default defineComponent({
  name: 'VrEngineViewer',
  emits: ['click','panel','marker','navigator','load'],
  props: {
    options: Object,
    preload: {
      type: Boolean,
      default: true,
    }
  },
  data(){
    return{
      vrEngine: null,
    }
  },
  computed:{
    coverLayers(){
      //判断只是为了在数据变化时触发computed
      //此样式在vr外，在vr全屏时不起作用
      if(!this.vrEngine || !this.options || !this.options.publish)
        return [];
      return this.vrEngine.uiCovers();
    },
    coverLayerStyle(){
      return function(position){
        if(!this.vrEngine)
          return {};
        return this.vrEngine.uiCoverStyle(position);
      }
    },
  },
  watch:{
    options: {
      handler(options) {
        if(!this.vrEngine || !this.$refs.refViewer) return;
        const data = this.vrEngine.init(this.$refs.refViewer, JSON.parse(JSON.stringify( options || {})));
        this.$emit('load',data);
      },
      deep: true,
      immediate: true
    },
  },
  mounted(){
    this.vrEngine = new VrEngine("viewer",this.preload);
    this.vrEngine.setClickEvent((event)=>{
      this.$emit('click',event);
    })
    this.vrEngine.setPanelCallback((event)=>{
      //所有标注和3D实物需要提示框时，显示和隐藏会触发此事件
      this.$emit('panel',event);
    })
    this.vrEngine.setMarkerEvent((event)=>{
      //所有标注和场景被点击后会触发此事件，不管有无提示框
      this.$emit('marker',event);
    })
    this.vrEngine.setNavigatorEvent((event)=>{
      //VR全景加载完成后触发此事件；3D实物不会触发
      this.$emit('navigator',event);
    })
  },
  beforeUnmount(){
    this.vrEngine.destroy();
    this.vrEngine = null;
  },
  methods:{
    doBuzMarker(properties){
      if(!this.vrEngine) return false;
      return this.vrEngine.doBuzMarker(properties);
    },
    setWechatMethod(methods){
      if(!this.vrEngine) return false;
      this.vrEngine.setWechatMethod(methods);
      return true;
    }
  },
});
</script>

<style scoped>
</style>
