<template>
  <div v-loading="loading" class="big-screen-iframe" style="height: calc(100vh - 0px);">
    <iframe id="bigIframe" ref="iframeRef" :src="iframeUrl" allow="*" allowfullscreen="true" class="big-iframe" frameborder="0" name='test' style="width: 100%; height: 100%;" @error="onIframeError" @load="onIframeLoad"/>
  </div>
</template>

<script>
import { debounce } from 'debounce'
export default {
  name: "bigScreenIframe",
  data() {
    return {
      src: "https://goview.drgyen.cn/#/chart/preview/202409060982078",
      loading: true,
      token: "",
      iframeRef: null,
      userType: "",
    };
  },
  computed: {
    iframeUrl() {
      let token = this.getCookie("Admin-Token");
      let src = this.$store.getters.attributeInfo['bigScreenUrl'];
      if(src){
        return src + "?token=" + this.token || this.src;
      }else{
        return process.env.VUE_APP_BIGSCREEN_PLATFORM_URL + "?token=" + this.token;
      }
    },
  },
  created() {
    this.token = this.getCookie("Admin-Token");
    this.userType = this.$store.getters.userType;
    // this.src = process.env.VUE_APP_BIGSCREEN_PLATFORM_URL + "?token=" + this.token;

      // document.getElementById('bigIframe').onload = function () {
      //
      // }

  },
  mounted() {
    this.iframeRef = this.$refs.iframeRef;
    window.addEventListener('message',this.receiveMsg, false);
  },
  beforeMount() {
    window.removeEventListener('message', this.receiveMsg, false);
  },
  methods: {
    getCookie(name) {
      const cookies = document.cookie.split("; ");
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].split("=");
        if (cookie[0] === name) {
          return cookie[1];
        }
      }
      return "";
    },
    onIframeLoad() {
      this.loading = false;
      // const iframeContentWindow = this.iframeRef.contentWindow;
      // const domain = this.extractDomain(this.iframeUrl);
      // console.log("iframeContentWindow",iframeContentWindow.location)

      // setInterval(()=>{
      //   // test.window.postMessage('hello, child!', 'http://127.0.0.1:8002');
      //   let obj = {
      //     type: 'GlobalVar',
      //     key: 'nowTime',
      //     data: new Date()
      //   }
      //   iframeContentWindow.postMessage(obj, domain);
      //   console.log("父页面-发送消息")
      // },10000)
    },
    receiveMsg(e) {
      // e.data
      // {type:'path',url:'/project/project?id=1'}
      // {type:'pathType',typeName:'设备列表',query: { id: 123 }}
      if (e.data.type === 'path') {
        if(e.data.url){
          this.$router.push(e.data.url);
        }
      }else if (e.data.type === 'pathType') {
        if(e.data.typeName === '设备'){
          if(this.userType === 'SYSTEM'){
            this.$router.push({
              path: '/device/device',
              query: e.data.query
            });
          }else{
            this.$router.push({
              path: '/device_tenant/device_tenant',
              query: e.data.query
            });
          }
        }else if(e.data.typeName === '项目'){
          if(this.userType === 'SYSTEM'){
            this.$router.push({
              path: '/project/project',
              query: e.data.query
            });
          }else{
            this.$router.push({
              path: '/project_tenant/project_tenant',
              query: e.data.query
            });
          }
        }
      }
    },
    onIframeError() {
      this.loading = false;
      console.error("Iframe load failed.");
    },
    extractDomain(url) {
      try {
        const urlObj = new URL(url);
        return urlObj.origin;
      } catch (error) {
        console.error("Invalid URL:", error);
        return "*"; // 如果 URL 无效，使用通配符
      }
    }
  }
};
</script>

<style>
.big-screen-iframe {
  width: 100%;
  height: calc(100vh - 0px);
  position: relative;
}

.big-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.app-main {
  width: 100% !important;
  height: 100vh !important;
}
</style>
