<template>
  <div class="search-performance-iframe-container">
    <!-- 查询tab切换 -->
    <div class="search-tab-list-performance">
      <div class="search-tab-item-performance" v-for="(item,index) of searchTabList" :key="index"
        :class="{'current-tab-performance' : item.name == currentValue}" @click="changeCurrent(item)">
        <span class="search-tab-name">{{item.name}}</span>
      </div>
    </div>
    <div class="iframe-com-ins-container">
      <iframe-com-ins ref="searchPerformanceIframeContainer" :iframeStyles="urlQueryParams.iframeStyles" :styles="urlQueryParams.styles"
        :url="urlQueryParams.url"></iframe-com-ins>
      <DskSkeleton v-if="loading"></DskSkeleton>
    </div>
  </div>
</template>
<script>
import IframeComIns from "@/views/subsystem/components/IframeComIns";
import IframeTools from "@/utils/iframeTools";
import { pmb } from "@/utils/postMessageBridge";
import { interaction, router } from "@/utils/postMessageBridge/action";
import DskSkeleton from "@/components/DskSkeleton";
export default {
  name: "searchPerformanceIframeContainer",
  components: {
    IframeComIns,
    DskSkeleton
  },
  data() {
    return {
      urlQueryParams: {
        url: ""
      },
      iframeToolsIns: {},
      messageBridgeIns: {},
      currentValue: "中标业绩",
      searchTabList: [
        {
          name: "中标业绩",
          value: "/performance"
        },
        {
          name: "四库业绩",
          value: "/sky"
        },
        {
          name: "全网业绩",
          value: "/zb"
        },
        {
          name: "水利监管平台",
          value: "/sljg"
        },
        {
          name: "水利信用平台",
          value: "/slxy"
        },
      ],
      observer: null,
      loading: true
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  beforeDestroy() {
    if (this.iframeToolsIns) {
      this.iframeToolsIns.clearRefreshTimer ? this.iframeToolsIns.clearRefreshTimer() : null;
    }
    if (this.observer) {
      this.observer?.disconnect();
    }
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    clearObserver() {
      if (this.observer) {
        this.observer?.disconnect();
      }
      this.observer = null;
    },
    async init() {
      this.loading = true;
      await this.$nextTick();
      const dom = this.$refs["searchPerformanceIframeContainer"].$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();
    },
    mutationObserverFn(mutationsList) {
      for (let mutation of mutationsList) {
        if (mutation.attributeName === "src") {
          // 当iframe的src属性发生改变时，触发该回调函数
          const currentUrl = this.iframeToolsIns.subSystemIframe.src;
          console.log("当前url：" + currentUrl);
          break;
        }
      }
    },
    async loadedInit() {
      console.log("初始化方法被调用");
      // 是否需要使用iframe滚动条监听
      if (this.urlQueryParams?.syncScroll) {
        await interaction.syncScroll();
      }
      // 是否需要插件适配当前视口
      if (this.urlQueryParams?.layout) {
        await interaction.layoutHtml();
      }
      this.loading = false;
    },
    async changeCurrent(item) {
      try {
        if (this.currentValue == item.name) return;
        this.loading = true;
        this.currentValue = item.name;
        await router.iframeToTargetRouter({
          url: `/search${item.value}`
        });
      } catch (error) {

      }
    }
  },
}
</script>
<style lang="scss" scoped>
.search-performance-iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 16px 24px;

  .search-tab-list-performance {
    height: 51px;
    display: flex;
    align-items: center;
    background: #fff;
    box-sizing: border-box;

    .search-tab-item-performance {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
      font-weight: bold;
      min-width: 96px;
      padding: 0px 16px;
      box-sizing: border-box;

      &.current-tab-performance {
        color: #0081ff;
        border-bottom: 2px solid #0081ff;
      }

      .search-tab-name {
        cursor: pointer;
      }
    }
  }

  .iframe-com-ins-container {
    position: relative;
    height: calc(100% - 67px);
    margin-top: 16px;
  }

  .dsk-skeleton-outer-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
  }

  .iframe-com-ins {
    height: 100%;
  }
}
</style>