<template>
  <div v-if="vrDesignerVisible" :style="{zIndex}" class="psv-iframe-container psv-navigator-viewer-animate-zoomin">
    <div class="psv-iframe-content">
      <iframe width="100%" height="100%" frameborder="0" 
        marginheight="0" marginwidth="0" scrolling="no"
        :src="vrDesignerUrl" ref="refVrIframeMain"></iframe>
      <div v-if="vrIframeLoadState<1" class="psv-iframe-loading">
        <slot>
          <div class="psv-iframe-loading-full">
            <div v-if="vrIframeLoadState==0" class="psv-iframe-loading-center">
              <div class="psv-iframe-loading-animation"></div>
            </div>
            <div v-else class="psv-iframe-loading-center">
              <div class="psv-iframe-loading-warn">
                !
              </div>
            </div>
            <div class="psv-iframe-loading-center">
              <div class="psv-iframe-loading-title">
                打开 VR.设计助手 {{vrIframeLoadState==0?'中':'超时'}}
              </div>
            </div>
            <div class="psv-iframe-loading-center">
              <div class="psv-iframe-loading-text psv-iframe-loading-button" @click="tapCancel">
                {{vrIframeLoadState==0?'取 消':'关 闭'}}
              </div>
            </div>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

//支持vue2或vue3引入使用
const bodyElement = window || document.documentElement || document.body;
export default defineComponent({
  name: 'VrDesignerIframe',
  emits: ['resdata'],
  props:{
    zIndex: {
      type: Number,
      default: 999999,
    }
  },
  data(){
    return{
      vrDesignerVisible: false,
      vrIframeLoadState: 9, //-1超时，0打开中，1打开成功等待完成，2打开成功并设置完成数据，9初始化
      vrDesignerUrl: "",
      vrRequestId: "",
      dataSendTimer: 0,
      iframeLoadTimer: 0,
    }
  },
  mounted(){
    bodyElement.addEventListener('message', this.onThirdAppMessage);
  },
  beforeUnmount(){
    this.tapCancel();
    bodyElement.removeEventListener('message', this.onThirdAppMessage);
  },
  methods:{
    tapCancel(){
      if(this.iframeLoadTimer) clearTimeout(this.iframeLoadTimer);
      if(this.dataSendTimer) clearInterval(this.dataSendTimer);
      this.vrDesignerVisible=false;
    },
    onThirdAppMessage(event){
      if(!event || !event.data || typeof event.data!='string') return;
      if(event.data.indexOf('{')!=0 || event.data.indexOf('vrid')<1) return;
      let resdata = null;
      try{
        resdata = JSON.parse( event.data);
      }catch(error){
        resdata = null;
        //console.warn('vr message received error',event.data,error);
      }
      if(!resdata || !resdata.vrid) return;
      if(resdata.vrid==95888888 && resdata.command=='ready'){
        this.vrIframeLoadState = 1;
        return;
      }
      if(resdata.vrid!=this.vrRequestId) return;
      if(resdata.command && resdata.command=='close'){
        this.vrDesignerVisible = false;
        this.vrIframeLoadState = 9;
      }else if(resdata.command && resdata.command=='complete'){
        clearInterval(this.dataSendTimer);
        clearTimeout(this.iframeLoadTimer);
        this.vrIframeLoadState = 2;
      }else if(resdata.vrdata){
        this.vrDesignerVisible = false;
        this.$emit('resdata',resdata);
        this.vrIframeLoadState = 9;
      }
    },
    sendVRData(data){ 
      if(!this.$refs.refVrIframeMain || !this.$refs.refVrIframeMain.contentWindow) 
        return {ret:21,message:"Need to be called in iframe"};
      this.$refs.refVrIframeMain.contentWindow.postMessage(JSON.stringify(data),"*");
      return {ret:0};
    },
    setData(vrurl,data,onFinish){
      if(!vrurl || !data || !data.vrid){
        if(onFinish) onFinish({ret:11,message:"vrurl or data.vrid is empty!"});
        return;
      } 
      clearTimeout(this.iframeLoadTimer);
      this.iframeLoadTimer = setTimeout(() => {
        //超时显示
        if(this.vrIframeLoadState>1) return;
        this.vrIframeLoadState = -1;
      }, 60000);
      this.vrDesignerUrl = vrurl;
      this.vrRequestId = data.vrid;
      setTimeout(() => {
        //防闪动
        if(this.vrIframeLoadState!=9) return;
        this.vrIframeLoadState = 0;
      }, 500);
      this.vrDesignerVisible = true;
      //在iframe网站加载完成后执行
      this.$nextTick(()=>{
        const _sendVRData = ()=>{
          this.dataSendTimer = setInterval(()=>{
            this.sendVRData(data);
          },3000);
          setTimeout(() => {
            const res = this.sendVRData(data);
            if(onFinish) onFinish(res);
          }, 500);
        }
        if(this.$refs.refVrIframeMain.attachEvent){  
          this.$refs.refVrIframeMain.attachEvent("onload",()=>{
            _sendVRData();
          })
        }else{
          this.$refs.refVrIframeMain.onload=()=>{
            _sendVRData();
          }
        }
      })
    },
  },
});
</script>

<style scoped>
.psv-iframe-container{
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.psv-iframe-content{
  position: relative;
  width: 100%;
  height: 100%;
}
.psv-iframe-loading{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.psv-iframe-loading-full{
  width: 100%;
  height: 100%;
  background-color: #004f98;
  color: white;
  opacity: 0.8;
  padding-top: 30vh;
}
.psv-iframe-loading-title{
  font-size: 16px;
  text-align: center;
  margin-top: 8px;
}
.psv-iframe-loading-text{
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  margin-top: 8px;
}
.psv-iframe-loading-button{
  border: 1px solid #eeeeee;
  padding: 2px 12px;
  border-radius: 6px;
  margin-top: 16px !important;
}
.psv-iframe-loading-button:hover{
  background-color: #666666;
  opacity: 1;
}
.psv-iframe-loading-center{
  display: flex;
  justify-content: center;
}
.psv-iframe-loading-warn{
  width: 35px;
  height: 35px;
  border-radius: 35px;
  border: 2px solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eeeeee;
  font-size: 26px;
}
.psv-iframe-loading-animation{
  border: 3px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  border-top: 3px solid rgba(255, 255, 255, 0.8);
  border-bottom: 3px solid rgba(255, 255, 255, 0.8);
  width: 35px;
  height: 35px;
  animation: psv-iframe-loading-animation-spin 1.5s linear infinite;
}
@keyframes psv-iframe-loading-animation-spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}
</style>
