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

<script>
import storage from 'store'

export default {
  name: 'IframeView',
  props: {
    path: { type: String }
  },
  data() {
    return {
      loadding: true,
      uuid: 'ifm-' + this.guid()
    }
  },
  computed: {
    isToken() {
      if(typeof this.$route.meta.token === 'undefined'){
        return true
      }
     return this.$route.meta.token
    },

  },
  created() {
    // console.log(this.$store.getters.token)
  },
  mounted() {


    var _this = this
    setTimeout(() => {
      _this.loadding = false
    }, 30000)
    document.getElementById(_this.uuid).onload = function() {
      _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)
      })
    },
    getPath(str) {
      let expire = storage.get('expire') || sessionStorage.expire
      return  this.path + str + `access_token=${this.$store.getters.token}&expire=${expire}`
    },
    authPath() {
      let str = '?'
      if (this.path.indexOf('?') > -1) {
        str = '&'
      }
      return this.getPath(str)
    }
  }
}
</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>
