<template>
  <div class="ifrcon">
    <vvheader :somedatainfo="somedatainfo" :bgmstatus="bgmstatus" :params="params" class="hhh" />
    <iframe allow="autoplay" allowfullscreen="true" ref="iframe" id="showifr" :src="url" frameborder="0" @load="onIframLoad"></iframe>
  </div>
</template>

<script>
import browser from "@/utils/browser";
import vvheader from "./vheader.vue";
import { useStore } from "vuex";
import { getApp } from '@/app'


export default {
  props: ["url", "bgmUrl", "somedatainfo"],
  components: { vvheader },
  data() {
    return {
      store: useStore(),
      params: "",
      bgmstatus: false,
    };
  },
  computed: {
    tempBgm() {
      return this.bgmUrl;
    },
  },
  methods: {
    onIframLoad() {
      window.onmessage = (e) => {

        if (e.data.source != "4dage") {
          return;
        }
        console.log(e.data, 'e.data.params');

        getApp().Scene.emit("ready")

        if (e.data.event == "guide-stop") {
          this.store.commit('fdkk/setV3ToursStatus', false)
        }


        if (e.data.event == "guide-rooms") {
          this.store.commit('fdkk/setToursList', e.data.params)
        }

        if (e.data.event == "link-click") {
          if (
            e.data.params.url.indexOf(`https://${window.location.hostname}/spc.html?`) > -1 ||
            e.data.params.url.indexOf(`https://${window.location.hostname}/smobile.html?`) > -1 
          ) {
            let m = browser.urlHasValueFromUrl("m", e.data.params.url);
            this.$emit("changeUrl", m);
          } else {
            this.$emit("otherUrl", e.data.params.url);
          }
        }

        if (e.data.event == "action") {
          // this.$bus.emit("currentMode", e.data.params);

          if (e.data.params.type == "playMusic") {
            this.bgmstatus = e.data.params.data.status;
            console.log(e.data.params.data.status, 'e.data.params.data.status');
            this.store.commit('fdkk/setV3BGMStatus', e.data.params.data.status)
          }

          if (e.data.params.type == "mode") {
            if (e.data.params.data.mode != 'pano') {
              this.store.commit("functions/setShowScenesList", false)
            }
          }
          // store.commit('fdkk/setIsPlayTours', params.isPlay)

        }

        // if (e.data.event == "settings") {
        //   this.store.commit('fdkk/setV3BGMStatus', e.data.params.status)
        // }

        if (e.data.event == "loaded") {
          console.log(e.data.params, 'e.data.params');
          this.params = e.data.params;
          this.$refs.iframe.contentWindow.postMessage(
            {
              source: "mingyuan",
              event: "guide-rooms",
            },
            "*"
          );

          this.$refs.iframe.contentWindow.postMessage(
            {
              source: "mingyuan",
              event: "settings",
              params: {
                playMusic: true,
              },
            },
            "*"
          );
        }
      };
    },
    handleBGM(status) {
      this.$refs.iframe.contentWindow.postMessage(
        {
          source: "mingyuan",
          event: "settings",
          params: {
            playMusic: status,
          },
        },
        "*"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.ifrcon {
  width: 100%;
  height: 100%;
  position: relative;

  >iframe {
    width: 100%;
    height: 100%;
  }

  .hhh {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    z-index: 999;
    top: 10px;
  }
}
</style>
