<template>
  <div class="panocon">
    <div id="pano"></div>
  </div>
</template>

<script>
import * as krfn from "@/core/index.js";
import { getSceneInfo } from "@/api";

import config from "@/config";
let __krfn = krfn.default;

export default {
  data(){
    return {
      activeItem:'',
      someData:''
    }
  },
  methods:{
    getSceneInfo(){
      getSceneInfo({},data=>{
        this.activeItem = data.data
      })
    }
  },
  watch:{
    activeItem:{
      handler(newVal) {
        // this.getSceneInfo()
        $('#pano').empty();
        window.vrInitFn = ()=>{
            var krpano = document.getElementById('krpanoSWFObject');
            __krfn.utils.initHotspot(krpano,newVal&&newVal.someData,false);
        }
        window.vrViewFn = ()=>{
          window.parent.postMessage({ event: 'loadcomplete', targetCode: newVal.sceneCode },'*')
          try {
              let tmp = JSON.parse(newVal.initVisual)
              var krpano = document.getElementById('krpanoSWFObject');
              tmp.vlookat&&krpano.set('view.vlookat',tmp.vlookat);
              tmp.hlookat&&krpano.set('view.hlookat',tmp.hlookat);
            } catch (error) {
              error
            }
        }
        var settings = {
          'events[skin_events].onxmlcomplete':'js(window.vrViewFn());',
          'events[skin_events].onloadcomplete': 'js(window.vrInitFn());'
        };
        if (newVal) {
            removepano('#pano')
            embedpano({
              // xml: "%HTMLPATH%/static/template/tour.xml",
              xml: `${this.$cdn}/cms_pano_fcb/${config.sceneNum}/vtour/tour.xml`,
              swf: "%HTMLPATH%/static/template/tour.swf",
              target: "pano",
              html5: "auto",
              mobilescale: 0.7,
              vars:settings,
              passQueryParameters: true,
            });
        }
       
      },
      immediate: false
    }
  },
  mounted(){
      window.__krfn = __krfn
      this.getSceneInfo()
  }
}
</script>

<style lang="less" scoped>
.panocon{
  width: 100%;
  height: 100%;
  #pano{
    width: 100%;
    height: 100%;
  }
}
</style>
