/*
* XmlDigitalTeaching v0.0.1
* Copyright ©Fri Mar 07 2025 11:35:13 GMT+0800 (中国标准时间) smile
* Released under the ISC License.
*/
import Vue from 'vue';

const presetBgColors = ['#ede3fc', '#ffe4d2', '#ecebb4', '#fcdff6', '#d9f0b3', '#ccf1d9', '#bef1fe', '#fee6b4', '#cdedfc', '#dce8fa'];

//
var script$1 = {
  name: 'XmlLayoutRender',
  props: {
    //模式：preview 预览 (默认)，editor 编辑
    mode: {
      type: String,
      default: 'editor'
    },
    //属性中传递过来的块儿数据
    pBlockData: {},
    //块儿数据名
    blockDataName: String,
    //页面类型，取值h5、pc、pad
    pageType: {
      type: String,
      default: 'h5'
    },
    resourceBasisPath: {
      type: String,
      default: ''
    },
    //当前所处组的规则
    currentRule: {
      type: Object,
      default: function () {
        return {};
      }
    },
    ruleIndex: Number,
    extendParams: {
      type: Object,
      default: function () {
        return {};
      }
    },
    bindingComponents: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      blockId: 'blockId' + Math.random(),
      blockData: {
        //当前块儿数据，一般用不到，因为一般的块儿中不会在块儿内更改数据
        height: 'auto',
        rows: [1],
        columns: [1, 1],
        rowsUnit: 'fr',
        columnsUnit: 'fr',
        rowGap: 0,
        columnGap: 0,
        autoFlow: ['row', 'dense'],
        padding: [2, 2, 2, 2],
        areaBoxes: []
      },
      propertyComponentsName: 'xml-layout-property',
      //属性组件名
      presetBgColors,
      refreshKey: 'mpk' + new Date().getTime()
    };
  },
  computed: {
    containerStyle() {
      let {
        height,
        padding,
        rows,
        columns,
        rowsUnit,
        columnsUnit,
        rowGap,
        columnGap,
        autoFlow
      } = this.blockData;
      let stringPadding = padding.map(item => item + 'px');
      let gridTemplateRows = rows.map(item => item + rowsUnit).join(' ');
      let gridTemplateColumns = columns.map(item => item + columnsUnit).join(' ');
      return {
        display: 'grid',
        height: height === 'auto' ? 'auto' : `${height}px`,
        padding: stringPadding.join(' '),
        gridAutoFlow: autoFlow.join(' '),
        gridTemplateRows,
        gridTemplateColumns,
        gap: `${rowGap}px ${columnGap}px`
      };
    },
    injectedAreaBoxes() {
      return this.blockData.areaBoxes.filter(item => !!item.injectComponent?.data);
    },
    spareAreaBoxes() {
      return this.blockData.areaBoxes.filter(item => !item.injectComponent?.data);
    },
    isEmpty() {
      return !(this.blockData.recordSetList && this.blockData.recordSetList.length);
    }
  },
  watch: {
    pBlockData: {
      handler(newValue) {
        this.$nextTick(() => {
          console.log('新data', newValue);
          this.blockData = Object.assign({}, this.blockData, newValue);
        });
      },
      deep: true,
      immediate: true
    }
  },
  provide() {
    return {
      getCatalogList: () => ({
        data: this.catalogList
      }),
      getCurrentRuleIndex: () => this.currentRuLeIndex,
      getXmlLayoutInstance: () => this
    };
  },
  methods: {
    // getAreaBoxMainIndex(uuid) {
    //   return this.blockData.areaBoxes.findIndex(item => item.uuid === uuid)
    // },
    // genAreaBoxStyle(areaBox,index) {
    //   let { rowStart, rowEnd, columnStart, columnEnd } = areaBox
    //   let target = index % this.presetBgColors.length

    //   return {
    //     '--areabox-color': this.presetBgColors[target],
    //     gridRow: `${rowStart} / ${rowEnd}`,
    //     gridColumn: `${columnStart} / ${columnEnd}`,
    //     backgroundColor: `${this.presetBgColors[target]}66`, // 66透明度
    //   }
    // },
    // spareAreaBoxClick(event, item) {
    //   let rect = event.target.getBoundingClientRect()
    //   this.$EventBus.$emit('areaBoxClick', { ...item, type: 'spare', rect }, { blockId: this.blockId, ruleIndex: this.ruleIndex})
    // },
    // 此方法必须要，用户注册块儿点击事件
    blockClick() {
      this.$emit('blockclick', {
        blockData: this.blockData,
        dataName: this.blockDataName,
        propertyComponentsName: this.propertyComponentsName,
        blockId: this.blockId,
        ruleIndex: this.ruleIndex
      });
    }
  },
  created() {}
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
  if (typeof shadowMode !== 'boolean') {
    createInjectorSSR = createInjector;
    createInjector = shadowMode;
    shadowMode = false;
  }
  // Vue.extend constructor export interop.
  const options = typeof script === 'function' ? script.options : script;
  // render functions
  if (template && template.render) {
    options.render = template.render;
    options.staticRenderFns = template.staticRenderFns;
    options._compiled = true;
    // functional template
    if (isFunctionalTemplate) {
      options.functional = true;
    }
  }
  // scopedId
  if (scopeId) {
    options._scopeId = scopeId;
  }
  let hook;
  if (moduleIdentifier) {
    // server build
    hook = function (context) {
      // 2.3 injection
      context = context ||
      // cached call
      this.$vnode && this.$vnode.ssrContext ||
      // stateful
      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__;
      }
      // inject component styles
      if (style) {
        style.call(this, createInjectorSSR(context));
      }
      // register component module identifier for async chunk inference
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier);
      }
    };
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook;
  } else if (style) {
    hook = shadowMode ? function (context) {
      style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
    } : function (context) {
      style.call(this, createInjector(context));
    };
  }
  if (hook) {
    if (options.functional) {
      // register for functional component in vue file
      const originalRender = options.render;
      options.render = function renderWithStyleInjection(h, context) {
        hook.call(context);
        return originalRender(h, context);
      };
    } else {
      // inject component registration as beforeCreate hook
      const existing = options.beforeCreate;
      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
    }
  }
  return script;
}

/* script */
const __vue_script__$1 = script$1;

/* template */
var __vue_render__$1 = function () {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      staticClass: "xml-layout-container",
      class: "xml-layout-container-" + _vm.pageType,
      attrs: { id: _vm.blockId },
      on: {
        "!click": function ($event) {
          return _vm.blockClick.apply(null, arguments)
        },
      },
    },
    [
      _c("div", { class: ["xml-layout__wrapper", _vm.mode] }, [
        _c(
          "div",
          {
            staticClass: "xml-grid-layout xml-grid-layout__container",
            style: _vm.containerStyle,
          },
          [
            _vm._t("default"),
            _vm._v(" "),
            _vm._l(_vm.blockData.areaBoxes, function (item, index) {
              return _c("XmlAreaBox", {
                key: item.uuid,
                attrs: {
                  injected: _vm.bindingComponents.indexOf(item.uuid) !== -1,
                  data: item,
                  ruleIndex: _vm.ruleIndex,
                  boxIndex: index,
                  mode: _vm.mode,
                  sign: _vm.currentRule.sign,
                },
              })
            }),
          ],
          2
        ),
      ]),
    ]
  )
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;

  /* style */
  const __vue_inject_styles__$1 = undefined;
  /* scoped */
  const __vue_scope_id__$1 = undefined;
  /* module identifier */
  const __vue_module_identifier__$1 = undefined;
  /* functional template */
  const __vue_is_functional_template__$1 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
    __vue_inject_styles__$1,
    __vue_script__$1,
    __vue_scope_id__$1,
    __vue_is_functional_template__$1,
    __vue_module_identifier__$1,
    false,
    undefined,
    undefined,
    undefined
  );

/*! 
 * portal-vue © Thorsten Lünborg, 2019 
 * 
 * Version: 2.1.7
 * 
 * LICENCE: MIT 
 * 
 * https://github.com/linusborg/portal-vue
 * 
*/
function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }
  return _typeof(obj);
}
function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
    return arr2;
  }
}
function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var inBrowser = typeof window !== 'undefined';
function freeze(item) {
  if (Array.isArray(item) || _typeof(item) === 'object') {
    return Object.freeze(item);
  }
  return item;
}
function combinePassengers(transports) {
  var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  return transports.reduce(function (passengers, transport) {
    var temp = transport.passengers[0];
    var newPassengers = typeof temp === 'function' ? temp(slotProps) : transport.passengers;
    return passengers.concat(newPassengers);
  }, []);
}
function stableSort(array, compareFn) {
  return array.map(function (v, idx) {
    return [idx, v];
  }).sort(function (a, b) {
    return compareFn(a[1], b[1]) || a[0] - b[0];
  }).map(function (c) {
    return c[1];
  });
}
function pick(obj, keys) {
  return keys.reduce(function (acc, key) {
    if (obj.hasOwnProperty(key)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
}
var transports = {};
var targets = {};
var sources = {};
var Wormhole = Vue.extend({
  data: function data() {
    return {
      transports: transports,
      targets: targets,
      sources: sources,
      trackInstances: inBrowser
    };
  },
  methods: {
    open: function open(transport) {
      if (!inBrowser) return;
      var to = transport.to,
        from = transport.from,
        passengers = transport.passengers,
        _transport$order = transport.order,
        order = _transport$order === void 0 ? Infinity : _transport$order;
      if (!to || !from || !passengers) return;
      var newTransport = {
        to: to,
        from: from,
        passengers: freeze(passengers),
        order: order
      };
      var keys = Object.keys(this.transports);
      if (keys.indexOf(to) === -1) {
        Vue.set(this.transports, to, []);
      }
      var currentIndex = this.$_getTransportIndex(newTransport); // Copying the array here so that the PortalTarget change event will actually contain two distinct arrays

      var newTransports = this.transports[to].slice(0);
      if (currentIndex === -1) {
        newTransports.push(newTransport);
      } else {
        newTransports[currentIndex] = newTransport;
      }
      this.transports[to] = stableSort(newTransports, function (a, b) {
        return a.order - b.order;
      });
    },
    close: function close(transport) {
      var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
      var to = transport.to,
        from = transport.from;
      if (!to || !from && force === false) return;
      if (!this.transports[to]) {
        return;
      }
      if (force) {
        this.transports[to] = [];
      } else {
        var index = this.$_getTransportIndex(transport);
        if (index >= 0) {
          // Copying the array here so that the PortalTarget change event will actually contain two distinct arrays
          var newTransports = this.transports[to].slice(0);
          newTransports.splice(index, 1);
          this.transports[to] = newTransports;
        }
      }
    },
    registerTarget: function registerTarget(target, vm, force) {
      if (!inBrowser) return;
      if (this.trackInstances && !force && this.targets[target]) {
        console.warn("[portal-vue]: Target ".concat(target, " already exists"));
      }
      this.$set(this.targets, target, Object.freeze([vm]));
    },
    unregisterTarget: function unregisterTarget(target) {
      this.$delete(this.targets, target);
    },
    registerSource: function registerSource(source, vm, force) {
      if (!inBrowser) return;
      if (this.trackInstances && !force && this.sources[source]) {
        console.warn("[portal-vue]: source ".concat(source, " already exists"));
      }
      this.$set(this.sources, source, Object.freeze([vm]));
    },
    unregisterSource: function unregisterSource(source) {
      this.$delete(this.sources, source);
    },
    hasTarget: function hasTarget(to) {
      return !!(this.targets[to] && this.targets[to][0]);
    },
    hasSource: function hasSource(to) {
      return !!(this.sources[to] && this.sources[to][0]);
    },
    hasContentFor: function hasContentFor(to) {
      return !!this.transports[to] && !!this.transports[to].length;
    },
    // Internal
    $_getTransportIndex: function $_getTransportIndex(_ref) {
      var to = _ref.to,
        from = _ref.from;
      for (var i in this.transports[to]) {
        if (this.transports[to][i].from === from) {
          return +i;
        }
      }
      return -1;
    }
  }
});
var wormhole = new Wormhole(transports);
var _id = 1;
var Portal = Vue.extend({
  name: 'portal',
  props: {
    disabled: {
      type: Boolean
    },
    name: {
      type: String,
      default: function _default() {
        return String(_id++);
      }
    },
    order: {
      type: Number,
      default: 0
    },
    slim: {
      type: Boolean
    },
    slotProps: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    tag: {
      type: String,
      default: 'DIV'
    },
    to: {
      type: String,
      default: function _default() {
        return String(Math.round(Math.random() * 10000000));
      }
    }
  },
  created: function created() {
    var _this = this;
    this.$nextTick(function () {
      wormhole.registerSource(_this.name, _this);
    });
  },
  mounted: function mounted() {
    if (!this.disabled) {
      this.sendUpdate();
    }
  },
  updated: function updated() {
    if (this.disabled) {
      this.clear();
    } else {
      this.sendUpdate();
    }
  },
  beforeDestroy: function beforeDestroy() {
    wormhole.unregisterSource(this.name);
    this.clear();
  },
  watch: {
    to: function to(newValue, oldValue) {
      oldValue && oldValue !== newValue && this.clear(oldValue);
      this.sendUpdate();
    }
  },
  methods: {
    clear: function clear(target) {
      var closer = {
        from: this.name,
        to: target || this.to
      };
      wormhole.close(closer);
    },
    normalizeSlots: function normalizeSlots() {
      return this.$scopedSlots.default ? [this.$scopedSlots.default] : this.$slots.default;
    },
    normalizeOwnChildren: function normalizeOwnChildren(children) {
      return typeof children === 'function' ? children(this.slotProps) : children;
    },
    sendUpdate: function sendUpdate() {
      var slotContent = this.normalizeSlots();
      if (slotContent) {
        var transport = {
          from: this.name,
          to: this.to,
          passengers: _toConsumableArray(slotContent),
          order: this.order
        };
        wormhole.open(transport);
      } else {
        this.clear();
      }
    }
  },
  render: function render(h) {
    var children = this.$slots.default || this.$scopedSlots.default || [];
    var Tag = this.tag;
    if (children && this.disabled) {
      return children.length <= 1 && this.slim ? this.normalizeOwnChildren(children)[0] : h(Tag, [this.normalizeOwnChildren(children)]);
    } else {
      return this.slim ? h() : h(Tag, {
        class: {
          'v-portal': true
        },
        style: {
          display: 'none'
        },
        key: 'v-portal-placeholder'
      });
    }
  }
});
var PortalTarget = Vue.extend({
  name: 'portalTarget',
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      required: true
    },
    slim: {
      type: Boolean,
      default: false
    },
    slotProps: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    tag: {
      type: String,
      default: 'div'
    },
    transition: {
      type: [String, Object, Function]
    }
  },
  data: function data() {
    return {
      transports: wormhole.transports,
      firstRender: true
    };
  },
  created: function created() {
    var _this = this;
    this.$nextTick(function () {
      wormhole.registerTarget(_this.name, _this);
    });
  },
  watch: {
    ownTransports: function ownTransports() {
      this.$emit('change', this.children().length > 0);
    },
    name: function name(newVal, oldVal) {
      /**
       * TODO
       * This should warn as well ...
       */
      wormhole.unregisterTarget(oldVal);
      wormhole.registerTarget(newVal, this);
    }
  },
  mounted: function mounted() {
    var _this2 = this;
    if (this.transition) {
      this.$nextTick(function () {
        // only when we have a transition, because it causes a re-render
        _this2.firstRender = false;
      });
    }
  },
  beforeDestroy: function beforeDestroy() {
    wormhole.unregisterTarget(this.name);
  },
  computed: {
    ownTransports: function ownTransports() {
      var transports = this.transports[this.name] || [];
      if (this.multiple) {
        return transports;
      }
      return transports.length === 0 ? [] : [transports[transports.length - 1]];
    },
    passengers: function passengers() {
      return combinePassengers(this.ownTransports, this.slotProps);
    }
  },
  methods: {
    // can't be a computed prop because it has to "react" to $slot changes.
    children: function children() {
      return this.passengers.length !== 0 ? this.passengers : this.$scopedSlots.default ? this.$scopedSlots.default(this.slotProps) : this.$slots.default || [];
    },
    // can't be a computed prop because it has to "react" to this.children().
    noWrapper: function noWrapper() {
      var noWrapper = this.slim && !this.transition;
      if (noWrapper && this.children().length > 1) {
        console.warn('[portal-vue]: PortalTarget with `slim` option received more than one child element.');
      }
      return noWrapper;
    }
  },
  render: function render(h) {
    var noWrapper = this.noWrapper();
    var children = this.children();
    var Tag = this.transition || this.tag;
    return noWrapper ? children[0] : this.slim && !Tag ? h() : h(Tag, {
      props: {
        // if we have a transition component, pass the tag if it exists
        tag: this.transition && this.tag ? this.tag : undefined
      },
      class: {
        'vue-portal-target': true
      }
    }, children);
  }
});
var _id$1 = 0;
var portalProps = ['disabled', 'name', 'order', 'slim', 'slotProps', 'tag', 'to'];
var targetProps = ['multiple', 'transition'];
Vue.extend({
  name: 'MountingPortal',
  inheritAttrs: false,
  props: {
    append: {
      type: [Boolean, String]
    },
    bail: {
      type: Boolean
    },
    mountTo: {
      type: String,
      required: true
    },
    // Portal
    disabled: {
      type: Boolean
    },
    // name for the portal
    name: {
      type: String,
      default: function _default() {
        return 'mounted_' + String(_id$1++);
      }
    },
    order: {
      type: Number,
      default: 0
    },
    slim: {
      type: Boolean
    },
    slotProps: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    tag: {
      type: String,
      default: 'DIV'
    },
    // name for the target
    to: {
      type: String,
      default: function _default() {
        return String(Math.round(Math.random() * 10000000));
      }
    },
    // Target
    multiple: {
      type: Boolean,
      default: false
    },
    targetSlim: {
      type: Boolean
    },
    targetSlotProps: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    targetTag: {
      type: String,
      default: 'div'
    },
    transition: {
      type: [String, Object, Function]
    }
  },
  created: function created() {
    if (typeof document === 'undefined') return;
    var el = document.querySelector(this.mountTo);
    if (!el) {
      console.error("[portal-vue]: Mount Point '".concat(this.mountTo, "' not found in document"));
      return;
    }
    var props = this.$props; // Target already exists

    if (wormhole.targets[props.name]) {
      if (props.bail) {
        console.warn("[portal-vue]: Target ".concat(props.name, " is already mounted.\n        Aborting because 'bail: true' is set"));
      } else {
        this.portalTarget = wormhole.targets[props.name];
      }
      return;
    }
    var append = props.append;
    if (append) {
      var type = typeof append === 'string' ? append : 'DIV';
      var mountEl = document.createElement(type);
      el.appendChild(mountEl);
      el = mountEl;
    } // get props for target from $props
    // we have to rename a few of them

    var _props = pick(this.$props, targetProps);
    _props.slim = this.targetSlim;
    _props.tag = this.targetTag;
    _props.slotProps = this.targetSlotProps;
    _props.name = this.to;
    this.portalTarget = new PortalTarget({
      el: el,
      parent: this.$parent || this,
      propsData: _props
    });
  },
  beforeDestroy: function beforeDestroy() {
    var target = this.portalTarget;
    if (this.append) {
      var el = target.$el;
      el.parentNode.removeChild(el);
    }
    target.$destroy();
  },
  render: function render(h) {
    if (!this.portalTarget) {
      console.warn("[portal-vue] Target wasn't mounted");
      return h();
    } // if there's no "manual" scoped slot, so we create a <Portal> ourselves

    if (!this.$scopedSlots.manual) {
      var props = pick(this.$props, portalProps);
      return h(Portal, {
        props: props,
        attrs: this.$attrs,
        on: this.$listeners,
        scopedSlots: this.$scopedSlots
      }, this.$slots.default);
    } // else, we render the scoped slot

    var content = this.$scopedSlots.manual({
      to: this.to
    }); // if user used <template> for the scoped slot
    // content will be an array

    if (Array.isArray(content)) {
      content = content[0];
    }
    if (!content) return h();
    return content;
  }
});

var iconReplace = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA2hJREFUWEe9l19oU2cYxn9vojNxCKMwRXexghPRZMw/DVpvZnGOaXGjbmNXgyJeiG2KvRJB0F7ohbKbtI6JF4JXA3WIjioq2ru4NWGMxgrqRfFCBUXc1DYpzXnlnJNzenIakxyb9tzl+97n+Z68/773E81yFqWTYN8YQlI28qcDW73n2ZKFHy65bP4W5W8DbhVkUfphv/xfjVo0gwY7u2St9EmCow52bXKiM4Sc9XFNCNwoGsbx0VOL/6p0jl/AUA0xW919n4BYrzbJVOEiMG3jJVPtyw1EXcHOllfAkLTQVk2ADrMV4bZl4xPg4D7vGm9FQptVaAV+LOMTLuZSkR+8aw0X4CWPd+W3E+YEyjpn3TCMzd5wzKkA59B4T+ECqt/bntN0biC6Zc5CUCmEaw7o8nCx8Hg6f6bzYV48YB4c7544isiRUv4M5gYi7XbJTpdhQ5LwXUlcXqb6fPKDyJr7v8jzeRMQ681/JlM8cGMvtI+kIoNzLuCLfeOfFBeE94IhbgjsZOzzh8Cq7aqNSDBrOFatD1TCx7vGOwiF/pixJ/Q0rBXX6KDEuwvHET3k2Clcvdsf2WkKuANsqkVQYb9LWvg1CC6WzN8U2GZiDNFPR1PRR6JpmllAcxAiirzA4IFsYSIILtb7X5NMLRoDDuf6IykrB4IQNMI21pP/5m4qcs2tBi+pZvhaWrjeiIPq5XA9oBnr5jpDmGZZz8t6CUy71l6Nvsq/WUU43BQElxuIDlkCdIRlFHhaKq8rkuDbIESx7vx+EU4FwZRss7aADGeAvS6BcFg2cqxewrI+Xy+oZCc6zM8I52bglHZJMFgPn09AFlV3VqyIdy4l6zIaLs11gn1TWS4pdUThtLTwpJaI8ptO28zYVsPEk3lzqrJGNzsEw3yHcMkDWlHPwY797AX8y1ImuYdgZ7Gwyztyz7kHLC9kuYHylRMC78g9PwLMXPDmQYiYbGC01uHm/qxD4OZehofAypIXMpIgMb8CsvyE8runH1xhkoPSyr2qWV02771HFXjJNWO996yB0fOdR0gzxR3ZRNovpmEhcEORpQNl5gRjG2QJsUM28KxiGdqLdT/x3nkda8bKhZPADiDi+9dlw8isWnGtJNN/+Iii9Sb80n1ivWKXtPHa9UCysBuM30A+rsXn2x96C4xUoavxY8kaAAAAAElFTkSuQmCC";

var iconSetup = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7NJREFUWEftl2tsVEUUx/9nku7ei2AkPEQCGlSg6b3bUiuPoCGCJVGTkihUwgdIUEBt9y4hqIkfUB6+osbEvatGTfmICV1C4AspjwR5JFBeoZ0SEjQhtDXAyhdM9t4t6T1m2t2lu92227ut8YPz6U7m3Pn/zpk5M3MI/0Kbt+X+1DItWAvunUGe6JDfa8cyspSvH4o4Gz0WywSwkMHGSHzM+Lkjpr0zlF2llVrjgT8FMP+hDe2VdvBt1c8BMC13P4D6kURzxpl3yZi+s9A/ZmPydQgRByBem3sMj0+8C5mocC50VetM/GVHVP8oC2CGnZ0g+gTAHYAaUBa4IL+lzlHBDDA2LLeOCHEwAu8tbELDor19o8kHOjYf+g5tdwyAeEMfgBlJLgWLswDapK1V+RXN/BcKu68yURzgCQPFM+NHf1+B7S17VLe5D8AIuz8RYQuReL49GrhUCoC51V0JDwcATCokrua+lijH2v1NIPCv/RGw3IsApklbe6oUcSPsrKA+zzF5KHE1v/JeRQHMuzIADOCktLXlfgFCjc4yFogDNG048R9a38Kl7gUHznfX3FPZMyYAZuTBUnCv8vyJ4cS/OLUN+9rXKM+Xy5h+MpuGpuX6jkBFY3KxEKIZwOzhxD87tR3ybvkJebvimoxpkZyDyC9AKNJTw+wp8TlFrvkmGdObBi6z7yUwrJ4qYi8OwrNFiQPN0tbezN9jvgAqIynTY1ael5ci7nsPmFbqMMB1pYr7Api1rVOf4k1JzHns5iMH160vmLXZPB8i7CXtgYpG52Uh6Hi9cQgfv/TVIIBixNP3zgRpax+Oeg8YYWcHEe3+vHY36ua35AAUI54+eVXaQ9oajR7Aco8Q8ErLhtWYOek27qceRWt3NY7cqO0/XosIezrt/QGEIsm/zenXJ9Y+/Rtau57DxT8XcKo3mLnWC6Za/jqVBmA5+xi0Ljsp4zIIZ0B0VkaD6kEzYisNIJyqZ3gGSLSVIXD6ik2JERXzDEoCGK1YIfv/Af6LEXA6QfSXjGrVY7HGw82hipRAMJAAuEva+uzMQaTSZ6W0tcnjDWCEky8QiTOZA6sf4GFN8KO0tYbxhDAt9zSAF9WDVBU02cIkZLndDMwE0RsyGjw4HhBm2P0ahPeJ6Hx7NLgkex2rj/Tb7lxa+DhAt8Ce78pooAMsMJeYVG1YA+ZOGdOfzHkTZjqV7/J0Luv5hcGrxiMCYHwjY9oHg94Dgy6LralKsFcFD8+MCYgQV8Gsyr4/8uf7B8Tx9p9D/L0VAAAAAElFTkSuQmCC";

var iconRemove = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAgCAYAAAB6kdqOAAAAAXNSR0IArs4c6QAAAtdJREFUWEftmM1LFHEYxz/Pau1YSpfq0AtIdIhaJdC9GFhePHgUBEtouwSGStHLWf0DpHLWgqiQjKhDRYfyEqmHCHPUYmeVwugShHkpFXxJfWq3dl213FlnJA8NDMww3+f5feY7v3me+Y3gYAvUTzUh0uhA6kwivBHlVsQ0wssDxEmGQMO0OtFlqlGR49FW//3UOGdAXjuUJJBXtukvyRgo0ztPp0913DaNJaY4cijdAJleTwt04NxUfta8r1HQ/EyTp9Wr9tjhnKZU3apABQ0zNYreTZvYpUCRQ1HTPxRLsypQoGH6IVDpcrz04arNCafSAa3LK/0Hwm7bNMqcOPQfaAM8Mh0FGf6nj0zRdhFeCFlDs5Pf3r+7vWMiMa8KG3SP6kyVilStqNTr0adUtSYazrmnXeSylUJ8FKKUIPiAXuaJMoctR/iyorl6CiQMb9LvRwfNvDG1OAtcAPauUhNapJiLS3qZh0DjtmlsiyXXfnpQStMXp7jiI0K5FDESOxGvgESpiISNTrX4AOxzCLMomyBPypj0BEiFy9FW47xa1ALXM4aJ28oDCVLtAZCO2WbOTn1NCT5erglmMeiMB0DEW4Ja3ABOuwSy3QMJ1+xWo077GEQ47BLI/aRWpc6uNjowGE+B6UZpdgTnI4RyKqF175BqWSSUA0JXEkApkyDdjoBi89ki2eBdAylywg75nwFfN4ZDcNE2jRbt5y1KoVNX/qZz7RDKYztsVKpF+8+qG3IJNOIe6BfB/shJ4xjCTVdASps3QL+/l9XiKVCxRqjPUswuCdRPfUJk9xqTJMJmFxYWSofatvSmvjEZ5VQqJEhnDMiTHwkKT4wZu8qqLT7IAs+B7Y6BlJAEuRPv9imLxGRxcpxopXAA31yFfTV3VPtoQlj9j4nQwWYuSQGjycKYOIiBZc/hzco12zdqX/EPq0U5ShAhCPE9tnQfRBnEx4AU8Wj5Pf0AgUJM93Ow4uMAAAAASUVORK5CYII=";

//
var script = {
  name: 'XmlAreaBox',
  components: {
    PortalTarget
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    boxIndex: Number,
    // mainIndex: Number,
    injected: {
      type: Boolean,
      default: false
    },
    sign: {
      type: String,
      default: ''
    },
    //模式：preview 预览 (默认)，editor 编辑
    mode: {
      type: String,
      default: 'editor'
    },
    //属性中传递过来的块儿数据
    pBlockData: {
      type: Object,
      default: () => {}
    },
    //当前所处组的规则
    currentRule: {
      type: Object,
      default: () => {}
    },
    ruleIndex: Number
  },
  data() {
    return {
      presetBgColors,
      images: {
        iconReplace,
        iconSetup,
        iconRemove
      },
      clickInside: false,
      refreshKey: 'apk' + new Date().getTime()
    };
  },
  directives: {
    clickInside: {
      bind(el, binding, vnode) {
        function clickHandler(e) {
          let isInside = false;
          if (el.contains(e.target)) {
            isInside = true;
          }
          if (binding.expression) {
            binding.value(isInside);
          }
        }
        el.__vueClickOutside__ = clickHandler;
        document.addEventListener('click', clickHandler);
      },
      update() {},
      unbind(el, binding) {
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
    }
  },
  computed: {
    activeInjectId() {
      return this.getActiveInjectId;
    },
    activeInjectedBoxId() {
      return this.getActiveInjectedBoxId;
    },
    isInActive() {
      return this.activeInjectId && this.activeInjectId === this.data.uuid || this.activeInjectedBoxId && this.activeInjectedBoxId === this.data.uuid;
    }
  },
  provide() {
    return {
      getAreaBoxProvider: () => ({
        injected: this.injected,
        data: this.data,
        boxIndex: this.boxIndex,
        mainIndex: this.mainIndex
      })
    };
  },
  inject: {
    getActiveInjectId: {
      from: 'getActiveInjectId',
      default: () => ''
    },
    getActiveInjectedBoxId: {
      from: 'getActiveInjectedBoxId',
      default: () => ''
    }
  },
  methods: {
    setClickInside(isInside) {
      this.clickInside = isInside;
    },
    setupInjectComponent() {
      this.$emit('injectSetup', {
        ...this.data,
        type: 'injected',
        ruleIndex: this.ruleIndex,
        mainIndex: this.mainIndex
      });
    },
    replaceInjectComponent() {
      let rect = this.$el.getBoundingClientRect();
      this.$EventBus.$emit('injectComponentReplace', {
        ...this.data,
        type: 'injected',
        rect,
        ruleIndex: this.ruleIndex,
        boxIndex: this.boxIndex,
        sign: this.sign
      });
    },
    removeInjectComponent() {
      this.$EventBus.$emit('injectComponentRemove', {
        ...this.data,
        type: 'injected',
        ruleIndex: this.ruleIndex,
        boxIndex: this.boxIndex
      });
    },
    genAreaBoxStyle() {
      let {
        rowStart,
        rowEnd,
        columnStart,
        columnEnd
      } = this.data;
      let baseStyle = {
        gridRow: `${rowStart} / ${rowEnd}`,
        gridColumn: `${columnStart} / ${columnEnd}`
      };
      if (!this.injected) {
        let target = this.boxIndex % this.presetBgColors.length;
        baseStyle['--areabox-color'] = this.presetBgColors[target];
        baseStyle.backgroundColor = `${this.presetBgColors[target]}99`; // 66透明度
      }
      return baseStyle;
    },
    spareAreaBoxClick(event) {
      if (this.injected) {
        // this.$EventBus.$emit('injectedGroupProxy', { ...this.data, type: 'injected', ruleIndex: this.ruleIndex, mainIndex: this.mainIndex })
        // this.$emit('areaBoxClick', { ...this.data, type: 'injected' })
        this.$EventBus.$emit('areaBoxClick', {
          ...this.data,
          type: 'injected'
        }, {
          ruleIndex: this.ruleIndex,
          sign: this.sign
        });
      } else {
        let rect = event.target.getBoundingClientRect();
        this.$EventBus.$emit('areaBoxClick', {
          ...this.data,
          type: 'spare',
          rect
        }, {
          ruleIndex: this.ruleIndex,
          sign: this.sign
        });
      }
    }
  },
  created() {}
};

/* script */
const __vue_script__ = script;

/* template */
var __vue_render__ = function () {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "section",
    {
      directives: [
        {
          name: "click-inside",
          rawName: "v-click-inside",
          value: _vm.setClickInside,
          expression: "setClickInside",
        },
      ],
      class: [
        "xml-grid-layout__area-box",
        "xml-grid-layout__area-box" + (_vm.injected ? "--injected" : "--spare"),
        _vm.mode === "editor" && "is-in-editor",
        _vm.isInActive && "inject-active",
      ],
      style: _vm.genAreaBoxStyle(),
      on: { click: _vm.spareAreaBoxClick },
    },
    [
      _vm.injected
        ? [
            _c("div", { staticClass: "xml-grid-layout__control" }, [
              _c("div", { staticClass: "xml-grid-layout__control-wrap" }, [
                _c(
                  "div",
                  {
                    staticClass: "xml-grid-layout__button",
                    on: {
                      click: function ($event) {
                        $event.stopPropagation();
                        return _vm.replaceInjectComponent.apply(null, arguments)
                      },
                    },
                  },
                  [
                    _c(
                      "el-tooltip",
                      {
                        staticClass: "item",
                        attrs: {
                          effect: "dark",
                          content: "替换组件",
                          placement: "top",
                        },
                      },
                      [
                        _c("el-image", {
                          attrs: { src: _vm.images.iconReplace },
                        }),
                      ],
                      1
                    ),
                  ],
                  1
                ),
                _vm._v(" "),
                _c(
                  "div",
                  {
                    staticClass: "xml-grid-layout__button",
                    on: {
                      click: function ($event) {
                        $event.stopPropagation();
                        return _vm.removeInjectComponent.apply(null, arguments)
                      },
                    },
                  },
                  [
                    _c(
                      "el-tooltip",
                      {
                        staticClass: "item",
                        attrs: {
                          effect: "dark",
                          content: "移除组件",
                          placement: "top",
                        },
                      },
                      [
                        _c("el-image", {
                          attrs: { src: _vm.images.iconRemove },
                        }),
                      ],
                      1
                    ),
                  ],
                  1
                ),
              ]),
            ]),
            _vm._v(" "),
            _c(
              "div",
              { staticClass: "xml-grid-layout__inject-wrap" },
              [_c("PortalTarget", { attrs: { name: _vm.data.uuid } })],
              1
            ),
          ]
        : _vm._e(),
    ],
    2
  )
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;

  /* style */
  const __vue_inject_styles__ = undefined;
  /* scoped */
  const __vue_scope_id__ = undefined;
  /* module identifier */
  const __vue_module_identifier__ = undefined;
  /* functional template */
  const __vue_is_functional_template__ = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  const __vue_component__ = /*#__PURE__*/normalizeComponent(
    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

const components = [__vue_component__$1, __vue_component__];
var index = {
  ...components
};

export { index as default };