<template>
  <div id="app">
    <iframe style="border: none" :width="searchTableWidth" :height="searchTableHeight" :src="reportUrl"></iframe>
  </div>
</template>
<script>
export default {
  name: 'DgIframe',

  props: {
    height: {
      type: [Number, String],
      default: () => null,
    },
    width: {
      type: [Number, String],
      default: () => null,
    },
    src: {
      type: String,
      default: () => '',
    },
  },

  data() {
    return {
      reportUrl: '',
      searchTableHeight: 0,
      searchTableWidth: 0,
    }
  },

  watch: {
    $route: function () {
      // 监听路由变化
      this.reportUrl = this.$route.meta.pathUrl
    },
  },

  mounted() {
    window.onresize = () => {
      this.widthHeight() // 自适应高宽度
    }
    this.$nextTick(function () {
      this.widthHeight()
    })
  },

  created() {
    // 从路由里动态获取 url地址   具体地址看libs下util.js里的 backendMenuToRoute  方法
    this.reportUrl = this.$route.meta.pathUrl || this.reportUrl
  },

  methods: {
    widthHeight() {
      this.searchTableHeight = window.innerHeight - 146
      this.searchTableWidth = window.innerWidth - 280
    },
  },
}
</script>
