<template>
  <WujieVue v-if="name && url" :name="name"
            style="width: 100%;height: 100%;border: 0;"
            id="wujieDavpViewContainer"
            :url="`${serveUrl}/${url}`"
            :props="{
              name: name,
              url:url,
            }"
            :degrade="degrade"
            :afterUnmount="unmount"></WujieVue>
</template>

<script>
export default {
  name: "wujie-davp-view",
  props: {
    url: {
      type: String,
      default: ""
    },

    degrade: {
      type: Boolean,
      default: false
    },
  },

  data() {
    return {
      name: "",
      routerFullPath: "",
      serveUrl: window.MICRO_SERVICE_DAVP_VIEW_URL + '#'
    };
  },

  watch: {
    url() {
      console.log("watch...");
      this.init();
    },

    '$route.fullPath'() {
      if (this.routerFullPath !== this.$route.fullPath) {
        return;
      }

      console.log("watch...", this.routerFullPath);
      this.$nextTick(() => {
        this.init();
      })
    }
  },

  mounted() {
    this.routerFullPath = this.$route.fullPath;
    this.init();
  },

  methods: {
    init() {
      if (!this.url) {
        return;
      }

      window.WUJIE_DAVP_CHART_VIEW_NAMES = [...new Set(window.WUJIE_DAVP_CHART_VIEW_NAMES || [])];
      window.WUJIE_DAVP_CHART_VIEW_NAMES.sort();

      if (window.WUJIE_DAVP_CHART_VIEW_NAMES.length > 0) {
        // 取出并删除第一个元素
        this.name = window.WUJIE_DAVP_CHART_VIEW_NAMES.shift();
      } else {
        window.WUJIE_DAVP_CHART_VIEW_STARTVAL = (window.WUJIE_DAVP_CHART_VIEW_STARTVAL || new Date().getTime()) + 1;
        this.name = 'wujie_davp_view_' + window.WUJIE_DAVP_CHART_VIEW_STARTVAL;
      }
      console.log(this.name);
    },

    unmount() {
      window.WUJIE_DAVP_CHART_VIEW_NAMES = window.WUJIE_DAVP_CHART_VIEW_NAMES || [];
      window.WUJIE_DAVP_CHART_VIEW_NAMES.push(this.name)
      this.name = "";
    },
  }
}
</script>

<style scoped lang="scss">
  #wujieDavpViewContainer {
    & ::v-deep {
      & > iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }
    }
  }
</style>