<template>
  <div class="subsystem-iframe-container">
    <iframe-com-ins ref="subsystemIframeContainer" :iframeStyles="urlQueryParams.iframeStyles" :styles="urlQueryParams.styles"
      :url="urlQueryParams.url"></iframe-com-ins>

  </div>
</template>
<script>
import IframeComIns from "./components/IframeComIns";
import IframeTools from "@/utils/iframeTools";
import { pmb } from "@/utils/postMessageBridge";
import { interaction } from "@/utils/postMessageBridge/action";
export default {
  name: "subsystemIframeContainer",
  components: {
    IframeComIns
  },
  data() {
    return {
      urlQueryParams: {
        url: ""
      },
      iframeToolsIns: {},
      messageBridgeIns: {}
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  beforeDestroy() {
    if (this.iframeToolsIns) {
      this.iframeToolsIns.clearRefreshTimer ? this.iframeToolsIns.clearRefreshTimer() : null;
    }
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async init() {
      await this.$nextTick();
      const dom = this.$refs["subsystemIframeContainer"].$el.querySelector("iframe");
      // 初始化iframe工具
      const iframeTools = await new IframeTools(dom);
      this.iframeToolsIns = iframeTools;
      this.urlQueryParams = iframeTools.queryParams;
      await iframeTools.initIframe(dom);
      // 初始化iframe通信工具
      await pmb.init({
        currentSystem: window,
        currentOriginUrl: location.origin,
        targetSystem: iframeTools.subSystemIframe,
        targetOriginUrl: process.env.VUE_APP_SUB_SYSTEM_ADDRESS,
        vueIns: this
      });
      this.messageBridgeIns = pmb;
      this.loadedInit();
    },
    async loadedInit() {
      // 是否需要使用iframe滚动条监听
      if (this.urlQueryParams?.syncScroll) {
        await interaction.syncScroll();
      }
      // 是否需要插件适配当前视口
      if (this.urlQueryParams?.layout) {
        await interaction.layoutHtml();
      }

      if (this.urlQueryParams?.showConditions) {
        await interaction.showConditions();
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.subsystem-iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 16px 24px;
}
</style>
