"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const index = require("../../node_modules/element-plus/es/components/icon/index.js");
require("../../../_virtual/dayjs.min.js");
;/* empty css                                                    */
const vue = require("vue");
require("../../node_modules/grid-layout-plus/es/index.js");
const index$1 = require("../../node_modules/@element-plus/icons-vue/dist/index.js");
const ComponentLoader = require("../components/ComponentLoader.vue.js");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.js");
const gridLayout_vue = require("../../node_modules/grid-layout-plus/es/components/grid-layout.vue.js");
const _hoisted_1 = { class: "component-container" };
const _hoisted_2 = { class: "component-container-card" };
const _hoisted_3 = { class: "component-container-loader" };
const _sfc_main = {
  __name: "LayoutDesigner",
  props: {
    modelValue: {
      type: Array,
      default: []
    },
    options: {
      type: Object,
      default: null
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    rowHeight: {
      type: Number,
      default: 30
    }
  },
  emits: ["update:modelValue"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const layoutData = vue.computed({
      get: () => {
        if (props.readOnly) {
          return props.modelValue.map((item) => ({
            ...item,
            isResizable: false
          }));
        }
        return props.modelValue;
      },
      set: (val) => {
        emit("update:modelValue", val);
      }
    });
    function removeItem(id) {
      const index2 = layoutData.value.findIndex((item) => item.i == id);
      if (index2 > -1) {
        layoutData.value.splice(index2, 1);
      }
    }
    __expose({});
    return (_ctx, _cache) => {
      const _component_el_icon = index.ElIcon;
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(["home-page-work-container", { isEdit: !__props.readOnly }])
      }, [
        vue.createVNode(vue.unref(gridLayout_vue.default), {
          ref: "gridLayout",
          layout: layoutData.value,
          "onUpdate:layout": _cache[0] || (_cache[0] = ($event) => layoutData.value = $event),
          "row-height": __props.rowHeight,
          margin: [0, 0],
          "col-num": 24,
          "vertical-compact": true,
          "is-draggable": !__props.readOnly,
          "is-resizable": !__props.readOnly,
          style: { "height": "100%" }
        }, {
          item: vue.withCtx(({ item }) => [
            vue.createElementVNode("div", _hoisted_1, [
              vue.createElementVNode("div", _hoisted_2, [
                vue.createElementVNode("div", _hoisted_3, [
                  vue.createVNode(ComponentLoader.default, {
                    route: item.route
                  }, null, 8, ["route"])
                ]),
                !__props.readOnly ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
                  key: 0,
                  class: "remove",
                  onClick: ($event) => removeItem(item.i)
                }, {
                  default: vue.withCtx(() => [
                    vue.createVNode(vue.unref(index$1.Delete))
                  ]),
                  _: 1
                }, 8, ["onClick"])) : vue.createCommentVNode("", true)
              ])
            ])
          ]),
          _: 1
        }, 8, ["layout", "row-height", "is-draggable", "is-resizable"])
      ], 2);
    };
  }
};
const LayoutDesigner = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-28d48d24"]]);
exports.default = LayoutDesigner;
