<template>
  <iframe
    v-if="iframeUrl"
    ref="iframeCont"
    :src="iframeUrl"
    width="100%"
    id="iframeCont"
    class="h100"
    :data-id="dataId"
    frameborder="0"
  ></iframe>
</template>

<script>
import { getStyle } from 'element-ui/lib/utils/dom';
import { addResizeListener, removeResizeListener } from 'element-ui/lib/utils/resize-event';

export default {
  name: "model-iframes",
  props: {
    /**
     * iframe src地址
     * 当配置了此参数时面板内容区的slot:defualt会无效
     */
    iframeUrl: String,
    /**
     * iframe的ID
     */
    dataId: [ Number, String ],
    customClass: String,
    /**
     * iframeHeight
     * 设置iframe的高度
     * "auto"适应iframe内容的高度, 具体的值
     */
    iframeHeight: {
      type: String,
      default: 'auto'
    }
  },
  data() {
    return {
      iframeLoading: true,
      iframeHeightC: '',
    };
  },
  created() {
    // window.
  },
  mounted() {
  },
  methods: {
    getElement() {
      return this.$refs['iframeCont'];
    },
    getElementContent() {
      return document.getElementById("iframeCont").contentWindow;
    },
    // 初始化页面加载 loading
    initIframeLoad() {
      this.$nextTick(() => {
        this.iframeLoading = true;
        const iframe = document.getElementById("iframe");
        if (!iframe) return false;
        iframe.onload = () => {
          this.iframeLoading = false;
        };
      });
    },
    /**
     * 监听iframe内容区域的隐藏或显示
     * 当iframe默认是隐藏时, 获取的高度为0, 必须在显示的时候再获取一次高度
     */
    watchVisible(visible) {
      if (visible && this.iframeUrl) {
        this.$nextTick(function () {
          // 此时iframe已经渲染完成, 处理获取不到iframe高度的问题, 或者高度闪现的问题
          this.iframeAutoHeight();
        });
      }
    },
    /**
     * iframe加载完成时
     */
    iframeLoaded() {
      // 获取当前内容高度并赋值给iframe
      this.iframeAutoHeight();
      if (this.iframeHeight === 'auto') {
        // 当iframe高度设置为自适应时,需要绑定body的resize事件
        this.bindResize();
      }
    },
    /**
     * 获取iframe当前的内容的高度, 并设置iframe的高度
     */
    iframeAutoHeight() {
      if (this.iframeHeight === 'auto') {
        try {
          let iframeCont = this.$refs.iframeCont;
          let bHeight = iframeCont.contentWindow.document.body.offsetHeight;
          let dHeight = iframeCont.contentWindow.document.documentElement.offsetHeight;
          let height = Math.min(bHeight, dHeight);
          let marginTop = getStyle(iframeCont.contentWindow.document.body, 'marginTop') || 0;
          let marginBottom = getStyle(iframeCont.contentWindow.document.body, 'marginBottom') || 0;
          this.iframeHeightC = height + parseFloat(marginTop) + parseFloat(marginBottom);
        } catch (ex) {
          /* eslint-disable */
        }
      }
    },
    /**
     * iframe中body绑定resize事件
     */
    bindResize() {
      try {
        let iframeCont = this.$refs.iframeCont;
        this.iframeBody = iframeCont.contentWindow.document.body;
        addResizeListener(this.iframeBody, this.iframeAutoHeight);
      } catch (ex) {
        /* eslint-disable */
      }
    },
    /**
     * 组件销毁前将resize事件解绑
     */
    beforeDestroy() {
      if (this.iframeBody && this.iframeAutoHeight) {
        removeResizeListener(this.iframeBody, this.iframeAutoHeight);
      }
    }
  },
};
</script>
<style>
.h100 {
  height: calc(100vh - 106px);
}
</style>
