<!--
 * @Author: gtz
 * @Date: 2021-03-07 18:39:03
 * @LastEditors: gtz
 * @LastEditTime: 2021-04-16 10:56:56
 * @Description: file content
-->
<template>
  <div v-loading="loading" :class="$style.container">
    <HeaderTitleBar>
      <span slot="title">{{ $route.query.name }}</span>
    </HeaderTitleBar>
    <iframe
      id="reportView"
      :class="$style.mainIframe"
      name="mainIframe"
      :src="url"
      frameborder="0"
      scrolling="auto"
    />
  </div>
</template>
<script>
import HeaderTitleBar from '@/views/material-manage/components/header-title-bar'

export default {
  components: { HeaderTitleBar },
  props: {},
  data() {
    return {
      loading: true,
      url: process.env.VUE_APP_REPORT_VIEW_URL
    }
  },
  mounted() {
    const vm = this
    console.log(this.$route.query)
    this.url += '?_u=db:' + this.$route.query.name + '.ureport.xml'
    const ifream = document.getElementById('reportView')
    ifream.onload = function() {
      console.log('加载完成')
      vm.loading = false
    }
  },
  methods: {}
}
</script>
<style lang="scss" module>
.container {
  margin: 0px 16px 0 8px;
  width: 98.5%;
  height: calc(100vh - 180px);
  .mainIframe {
    width: 100%;
    height: 100%;
  }
}
</style>
