import { ElIcon } from "../../node_modules/element-plus/es/components/icon/index.mjs";
import "../../../_virtual/dayjs.min.mjs";
/* empty css                                                    */
import { computed, createElementBlock, openBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, createBlock, createCommentVNode } from "vue";
import "../../node_modules/grid-layout-plus/es/index.mjs";
import { Delete as delete_default } from "../../node_modules/@element-plus/icons-vue/dist/index.mjs";
import ComponentLoader from "../components/ComponentLoader.vue.mjs";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
import De from "../../node_modules/grid-layout-plus/es/components/grid-layout.vue.mjs";
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 = 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 index = layoutData.value.findIndex((item) => item.i == id);
      if (index > -1) {
        layoutData.value.splice(index, 1);
      }
    }
    __expose({});
    return (_ctx, _cache) => {
      const _component_el_icon = ElIcon;
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["home-page-work-container", { isEdit: !__props.readOnly }])
      }, [
        createVNode(unref(De), {
          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: withCtx(({ item }) => [
            createElementVNode("div", _hoisted_1, [
              createElementVNode("div", _hoisted_2, [
                createElementVNode("div", _hoisted_3, [
                  createVNode(ComponentLoader, {
                    route: item.route
                  }, null, 8, ["route"])
                ]),
                !__props.readOnly ? (openBlock(), createBlock(_component_el_icon, {
                  key: 0,
                  class: "remove",
                  onClick: ($event) => removeItem(item.i)
                }, {
                  default: withCtx(() => [
                    createVNode(unref(delete_default))
                  ]),
                  _: 1
                }, 8, ["onClick"])) : createCommentVNode("", true)
              ])
            ])
          ]),
          _: 1
        }, 8, ["layout", "row-height", "is-draggable", "is-resizable"])
      ], 2);
    };
  }
};
const LayoutDesigner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28d48d24"]]);
export {
  LayoutDesigner as default
};
