<template>
  <div class="pano-body">
    <div class="none-center" v-show="!activeItem">请先上传全景图</div>

    <div v-show="activeItem" id="pano"></div>
    <template v-if="showSnapshot&&activeItem">
      <snapshot :showFlash="showFlash"></snapshot>
      <button class="ui-button submit"  :class="{disable:$justview}" @click="onClick">设置为初始页面</button>
    </template>
  </div>
</template>

<script>
import * as krfn from "@/core/index.js";
import { uploadIndexImg,savePosition,saveInitScreen } from "@/api";
import { $waiting } from '@/components/shared/loading'

import Snapshot from "@/components/Snapshot";

let __krfn = krfn.default;
export default {
  components: { Snapshot },
  data() {
    return {
      activeItem:'',
      showFlash:false,
      someData:''
    };
  },
  computed: {
    showSnapshot() {
      return this.$route.name == "screen";
    },
    krpano() {
      return this.$getKrpano();
    },
  },
  methods: {
    onClick() {
      this.$bus.emit('toggleFlash',true)
      let canvas = $("#krpanoSWFObject canvas")[0];
      let krpano = document.getElementById('krpanoSWFObject');
      let data = __krfn.utils.setInitView(krpano, canvas);

      uploadIndexImg(
        { file: data.url, filename: "initCover.jpg",sceneCode:this.activeItem.sceneCode },
        res => {
          if (res.code==0) {
            saveInitScreen({
              icon:res.data,
              id: this.activeItem.id
            },()=>{
              this.$bus.emit("initView", res.data);
              this.$bus.emit("setListThumb",{
                icon:res.data,
                initVisual: {
                  hlookat: data.hlookat,
                  vlookat: data.vlookat
                }
              });
              this.$bus.emit('toggleFlash',false)
              this.$tips({ content: "设置成功",icon:'ok' });
              savePosition({
                  id:this.activeItem.id,
                  hlookat: data.hlookat,
                  vlookat: data.vlookat
              })
            })
            
          }
        });
    },
    addhotspot(param) {
      let krpano = document.getElementById('krpanoSWFObject');
      __krfn.utils.addhotspot(krpano, param, true);
    }
    
  },
  watch:{
    '$route.name':function(newVal){
        let krpano = document.getElementById('krpanoSWFObject');
        __krfn.utils.toggleHotspot(krpano,newVal!='screen');
    },
    activeItem:{
      handler(newVal) {
        $('#pano').empty();
        window.vrInitFn = ()=>{
            $waiting.hide()
              var krpano = document.getElementById('krpanoSWFObject');
            __krfn.utils.initHotspot(krpano,newVal&&newVal.someData,true);
            __krfn.utils.toggleHotspot(krpano,this.$route.name!='screen');
        }
        window.vrViewFn = ()=>{
          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){
            window.removepano('#pano')
            $waiting.show()
            window.embedpano({
            // xml: "%HTMLPATH%/static/template/tour.xml",
            xml: `${this.$cdn}/cms_pano_fcb/${newVal.sceneCode}/vtour/tour.xml`,
            swf: "%HTMLPATH%/static/template/tour.swf",
            target: "pano",
            html5: "auto",
            vars:settings,
            webglsettings: { preserveDrawingBuffer: true },
            passQueryParameters: true,
          });
          // $waiting.hide()
        }
      },
      immediate: true
    }
  },
  mounted() {
    window.__krfn = __krfn;
   
    this.$bus.on('currentPcode',data=>{
      this.activeItem = data
    })
    
    this.$bus.on("addhotspot", data => {
      this.addhotspot(data);
    });

    this.$bus.on("edithotspotTitle", data => {
      let krpano = document.getElementById('krpanoSWFObject');
      krpano.set('layer[tooltip_'+data.name+'].html',data.hotspotTitle)
    });

    this.$bus.on("edithotspotTitleisShow", data => {
      let krpano = document.getElementById('krpanoSWFObject');
      krpano.set('layer[tooltip_'+data.name+'].visible',data.visible)
    });
  },
};
</script>

<style lang="less" scoped>
.pano-body {
  width: 100%;
  position: relative;
  height: calc(100% - 30px);
  .none-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  #pano {
    width: 100%;
    height: 100%;
  }
  .btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #000;
    cursor: pointer;
  }
  .ui-button {
    position: absolute;
    bottom: 20px;
    min-width: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
}
</style>