<template>
  <WujieVue
    class="es-wujie"
    v-if="show"
    v-bind="$attrs"
    :width="width"
    :height="height"
    :name="wujieName"
    :loading="loading"
    :sync="sync"
    :prefix="prefix"
    :alive="alive"
    :props="defaultProps"
    :replace="replace"
    :fetch="fetch"
    :fiber="fiber"
    :degrade="degrade"
    :plugins="defaultPlugins"
    :beforeLoad="beforeLoad"
    :beforeMount="beforeMount"
    :afterMount="afterMount"
    :beforeUnmount="beforeUnmount"
    :afterUnmount="afterUnmount"
    :activated="activated"
    :deactivated="deactivated"
    :loadError="loadError"
    :attrs="attrs"
    :url="defaultUrl"
  ></WujieVue>
</template>
<script>
import util from 'eoss-ui/src/utils/util.js';
import WujieVue from 'wujie-vue2';
export default {
  name: 'EsWujie',
  inheritAttrs: false,
  inject: {},
  props: {
    width: { type: String, default: '100%' },
    height: { type: String, default: '100%' },
    name: { type: String, default: '' },
    loading: { type: HTMLElement, default: undefined },
    host: {
      type: String,
      default: ''
    },
    url: { type: String, default: '' },
    sync: { type: Boolean, default: false },
    prefix: { type: Object, default: undefined },
    alive: { type: Boolean, default: false },
    props: { type: Object, default: undefined },
    replace: { type: Function, default: undefined },
    fetch: { type: Function, default: undefined },
    fiber: { type: Boolean, default: true },
    degrade: { type: Boolean, default: false },
    plugins: {
      type: Array,
      default() {
        return [];
      }
    },
    beforeLoad: { type: Function, default: null },
    beforeMount: { type: Function, default: null },
    afterMount: { type: Function, default: null },
    beforeUnmount: { type: Function, default: null },
    afterUnmount: { type: Function, default: null },
    activated: { type: Function, default: null },
    deactivated: { type: Function, default: null },
    loadError: { type: Function, default: null },
    param: Object,
    attrs: {
      type: Object,
      default() {
        return {
          src: '#/empty'
        };
      }
    },
    show: Boolean,
    dialog: Boolean,
    appendTopBody: Boolean
  },
  data() {
    return {
      defaultUrl: '',
      defaultPlugins: null
    };
  },
  computed: {
    wujieName() {
      return this.name ? this.name : util.uuid(16);
    },
    defaultProps() {
      let props = {};
      if (this.url) {
        let params = util.getParams({ url: this.url });
        if (params) {
          props = params;
        }
        let urls = this.url.split('?');
        if (urls[0].indexOf('.js') > 1) {
          if (this.dialog) {
            props._dialog = true;
            props._dialogId = this.wujieName;
          }
          props.appendTopBody = this.appendTopBody;
        }
      }
      return { ...props, ...this.$attrs, ...this.props };
    }
  },
  watch: {
    url: {
      immediate: true,
      handler(val) {
        if (val) {
          let urls = val.split('?');
          let plugins = this.plugins;
          let defaultUrl = '';
          if (urls[0].indexOf('.js') > 1) {
            defaultUrl = this.param
              ? util.urlJoinParams({
                  url: './primary.html',
                  param: this.param,
                  timestamp: true
                })
              : util.handlerUrl('./primary.html');
            plugins.push({
              jsBeforeLoaders: [{ src: val }]
            });
          } else {
            defaultUrl = val;
          }
          this.defaultUrl = util.startWith(defaultUrl, 'http')
            ? defaultUrl
            : this.host + defaultUrl;
          this.defaultPlugins = plugins;
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>
