<template>
  <p-spin class="IframeView" :spinning="loadding">
    <iframe :src="url" :id="uuid" frameborder="0"></iframe>
  </p-spin>
</template>

<script>
import storage from 'store'

export default {
  name: 'IframeView',
  props: {
    path: { type: String }
  },
  data() {
    return {
      url: this.authPath(),
      loadding: true,
      uuid: 'ifm-' + this.guid()
    }
  },
  created() {
    // console.log(this.$store.getters.token)
  },
  mounted() {
    //this.url = iframe ? path : null
    var _this = this
    setTimeout(() => {
      _this.loadding = false
    }, 30000)
    document.getElementById(_this.uuid).onload = function() {
      //here doc
      _this.loadding = false
    }
  },
  methods: {
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (Math.random() * 16) | 0,
          v = c == 'x' ? r : (r & 0x3) | 0x8
        return v.toString(16)
      })
    },
  authPath() {
      let expire=storage.get('expire')||sessionStorage.expire
      if (this.path.indexOf('?') > -1) {

        return this.path + `&access_token=${this.$store.getters.token}&expire=${expire}`
      } else {
        return this.path + `?access_token=${this.$store.getters.token}&expire=${expire}`
      }
    }
  }
}
</script>

<style lang="less">
.IframeView {
  margin-top: -10px;
  margin-right: -10px;
  margin-left: -10px;
  height: calc(100% + 10px);
  .ant-spin-container,
  iframe {
    width: 100%;
    //height: calc(100vh - 110px);
    height: 100%;
  }
}
</style>
