<template>
  <div class="iframe-container" id="iframe-container">
    <iframe :src="src" scrolling="auto" frameborder="0" class="frame" :onload="onloaded()">
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: "",
      loading: null
    };
  },
  methods: {
    // 获取路径
    resetSrc: function(url,iframe) {
      // console.log(this.$route.meta.menuDesc);
      let menuDesc=this.$route.meta.menuDesc;
      let token= window.localStorage.getItem('token');
       this.src = menuDesc+'?token='+token;
      //  console.log(url);

      //  this.load();
      // if(iframe){
      //   this.load();
      // }

      //  this.src = url
    },
    load: function() {
      this.loading = this.$loading({  
        lock: true,
        text: "loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
        // fullscreen: false,
        target: document.querySelector("#iframe-container ")
      })
    },
    onloaded: function() {
      if(this.loading) {
        this.loading.close()
      }
      // setTimeout(()=>{this.loading.close()},2000)
    }
  },
  mounted() {
    // this.resetSrc(this.$store.state.iframe.iframeUrl);
    this.resetSrc(this.$route.query.urls);
    

  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        // 如果是跳转到嵌套页面，切换iframe的url
        this.resetSrc(this.$route.query.urls,this.$route.query.iframe);
      }
    }
  }
};
</script>

<style >
.iframe-container {
  position: absolute;
  top: 30px;
  left: 0px;
  right: 0px;;
  bottom: 0px;
  
}
.frame {
    width: 100%;
    height: 100%;
  }
</style>