<template>
  <p-spin class="jqView" :spinning="loadding">
    <div :id="uuid" class="jqView-content" ref="html"></div>
  </p-spin>
</template>

<script>
export default {
  name: 'jqView',
  props: {
    path: { type: String },
  },
  data() {
    return {
      loadding: true,
      innerHtml: '',
      script: '',
      uuid: 'ifm-' + this.$route.meta.menuId,
      ele: null,
    }
  },
  computed: {},
  created() {},
  destroyed() {
    console.dir('destroyed')
    $('#' + this.uuid).empty()
  },
  activated() {
    console.dir('activated')
  },

  mounted() {
    let _this = this

    this.innerHtml = import(/* webpackChunkName: "[request]" */ '@/views' + this.$route.meta.iframePath).then((res) => {
      this.ele = $(res.default)
      $('#' + _this.uuid)
        .empty()
        .append(this.ele)
      this.getScript()
    })
  },
  methods: {
    getScript() {
      let _this = this
      var js = this.$route.meta.iframePath.replace('pages', 'js')
      js = js.replace('html', 'js')
      return import(/* webpackChunkName: "[request]" */ '@/views' + js)
        .then((res) => {
          if (typeof res.default == 'function') {
            typeof res.default(this)
          }

          setTimeout(() => {
            this.loadding = false
          })
        })
        .catch((err) => {
          _this.loadding = false
          console.error('path:../views' + js)
          throw new Error(err)
        })
    },
    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)
      })
    },
  },
}
</script>

<style lang="less">
.jqView {
  // margin-top: -10px;
  // margin-right: -10px;
  // margin-left: -10px;
  height: 100%;
  .ant-spin-container,
  .jqView-content {
    width: 100%;
    //  padding: 0.05rem 0.1rem 0.1rem 0.1rem;

    //height: calc(100vh - 110px);
    height: 100%;
  }
}
</style>
