<template>
  <div style="height:100%;">
    <div class="filter-container" style="background: #ffffff;" v-if="path === '/unifiedView'">
      <div class="container_item">
        <el-button
          v-waves
          size="mini"
          style="margin: 5px 0 0 10px;"
          class="filter-item"
          type="primary"
          icon="el-icon-my-reset" @click="backltPage">
          {{$t('table.backBut')}}
        </el-button>
      </div>
    </div>
    <div style="height:100%;overflow: auto;" v-loading="loading">
      <iframe
        v-loading="loading"
        id="my-iframe"
        ref="ifr"
        :class="{'container-frame': path !== '/unifiedView', 'container-frame-back': path === '/unifiedView'}"
        :src="src"
        frameborder="0"/>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
export default {
  name: 'container-frame',
  props: {
    src: {
      type: String,
      required: false,
      default: ''
    },
    path: {
      type: String,
      default: ''
    }
  },
  directives: { waves },
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    const { ifr } = this.$refs;
    // IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
    const that = this;
    if (ifr.attachEvent) {
      // IE
      ifr.attachEvent('onload', () => {
        that.stateChange();
      });
    } else {
      // 非IE
      ifr.onload = function () {
        that.stateChange();
      };
    }
  },
  methods: {
    stateChange() {
      this.loading = false;
    },
    backltPage() {
      this.$refs.ifr.contentWindow.location.replace(this.src)
    }
  }
}
</script>

<style lang="scss" scoped>
.container-frame {
  position: absolute;
  top: 0px;
  left: 0px;
  height: calc(100% + 0px);
  width: calc(100% - 2px);
}
.container-frame-back {
  position: absolute;
  top: 50px;
  left: 0px;
  height: calc(100% - 50px);
  width: calc(100% - 2px);
}
</style>
