<template>
  <el-row style="padding: 10px 0px;">
    <iframe id="druid" :src="HOME_URL + url" frameborder="0" :style="{border: 0, width: 100 + '%', height: (screenHeight - 110) + 'px'}" />
  </el-row>
</template>

<script>
export default {
  name: 'DruidIndex',
  components: {
  },
  data() {
    return {
      url: '/druid/index.html',
      screenHeight: document.documentElement.clientHeight // 获取可视屏幕高度
    }
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        const _that = this
        setTimeout(function() {
          _that.timer = false
        }, 400)
      }
    }
  },
  mounted() {
    /* 动态计算页面高度 */
    const _that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.documentElement.clientHeight
        _that.screenHeight = window.screenHeight
      })()
    }

    /* 故意延迟加载，待 iframe 里面的druid加载后，判断把底部的广告栏去掉 */
    window.druid.onload = () => {
      setTimeout(function() {
        window.druid.contentWindow.document.getElementsByTagName('footer')[0].style.display = 'none'
      }, 1 * 1000)
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>
