"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
require("../../../../node_modules/element-plus/es/index.js");
;/* empty css                                                          */
;/* empty css                                                                  */
;/* empty css                                                             */
;/* empty css                                                                */
const Vue = require("vue");
const eventBus = require("../utils/eventBus.js");
require("../../../../node_modules/grid-layout-plus/es/index.js");
const vueDraggablePlus = require("../../../../node_modules/vue-draggable-plus/dist/vue-draggable-plus.js");
const formSetting = require("./formSetting.vue.js");
const PageHeaderSetting = require("./PageHeaderSetting.vue.js");
const PageFooterSetting = require("./PageFooterSetting.vue.js");
const ComponentPreviewWrapper = require("./components/ComponentPreviewWrapper.vue.js");
const SubTitle = require("./components/SubTitle.vue.js");
const H2Wrapper = require("./components/H2Wrapper.vue.js");
const SubForm = require("./components/SubForm.vue.js");
const approvalHistory = require("./components/approvalHistory.vue.js");
const SubTable = require("./components/SubTable.vue.js");
const Document = require("./components/Document.vue.js");
const Contract = require("./components/Contract.vue.js");
const index$5 = require("../../../../node_modules/@element-plus/icons-vue/dist/index.js");
const common = require("../utils/common.js");
const index$1 = require("../../../../node_modules/@vexip-ui/utils/dist/index.js");
const index = require("./aside/index.js");
;/* empty css                                                              */
;/* empty css                                                                */
;/* empty css            */
const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
const index$2 = require("../../../../node_modules/element-plus/es/components/scrollbar/index.js");
const index$3 = require("../../../../node_modules/element-plus/es/components/form/index.js");
const gridLayout_vue = require("../../../../node_modules/grid-layout-plus/es/components/grid-layout.vue.js");
const index$4 = require("../../../../node_modules/element-plus/es/components/icon/index.js");
const index$6 = require("../../../../node_modules/element-plus/es/components/divider/index.js");
const index$7 = require("../../../../node_modules/element-plus/es/components/message/index.js");
const _hoisted_1 = { class: "form-work-area" };
const _hoisted_2 = { class: "form-grid-container" };
const _hoisted_3 = ["onMouseenter", "onClick"];
const _hoisted_4 = {
  key: 0,
  class: "component-toolbar"
};
const _hoisted_5 = ["onClick"];
const _hoisted_6 = ["onClick"];
const _hoisted_7 = ["onClick"];
const _hoisted_8 = ["onClick"];
const _hoisted_9 = { class: "status-tags" };
const _hoisted_10 = {
  key: 0,
  class: "field-name-tag"
};
const _hoisted_11 = {
  key: 1,
  class: "status-tag disabled-tag"
};
const dropId = "drop";
const _sfc_main = {
  __name: "index",
  setup(__props, { expose: __expose }) {
    const editConfigData = Vue.ref(common.getEditConfigData());
    editConfigData.value.fieldsData.forEach((item) => {
      item.component = { ...index.defaultProperty, ...item.component };
    });
    Vue.watch(
      editConfigData,
      (val) => {
        console.log("🚀 ~ val:", val);
        common.setEditConfigData(val);
      },
      { deep: true }
    );
    const layoutDragData = Vue.ref([]);
    const layoutData = Vue.ref(editConfigData.value.fieldsData || []);
    const gridLayout = Vue.ref(null);
    const dragItem = { x: 0, y: 0, w: 1, h: 1 };
    const gridWrapperHeight = Vue.ref(null);
    Vue.watch(
      () => layoutData,
      (val) => {
        const maxY = val.value.reduce(
          (max, item) => Math.max(max, item.y + item.h),
          0
        );
        const colHeight = editConfigData.value.labelPosition == "top" ? 90 : 60;
        gridWrapperHeight.value = maxY * colHeight + 100;
      },
      { immediate: true, deep: true }
    );
    Vue.watch(
      () => editConfigData.value.columns,
      (newColumns, oldColumns) => {
        if (!layoutData.value || newColumns === oldColumns || newColumns > oldColumns)
          return;
        const itemsToRelayout = [];
        const validItems = [];
        layoutData.value.forEach((item) => {
          if (item.i === dropId) {
            validItems.push(item);
          } else if (item.x + item.w > newColumns) {
            itemsToRelayout.push({ ...item });
          } else {
            validItems.push(item);
          }
        });
        if (itemsToRelayout.length > 0) {
          itemsToRelayout.sort((a, b) => a.y - b.y || a.x - b.x);
          const maxY = Math.max(...validItems.map((item) => item.y), -1);
          itemsToRelayout.forEach((item, index2) => {
            item.y = maxY + 1 + Math.floor(index2 / newColumns);
            item.x = 0;
          });
          layoutData.value = [...validItems, ...itemsToRelayout];
          editConfigData.value.fieldsData = layoutData.value;
        }
      }
    );
    Vue.watch(
      () => editConfigData.value.labelPosition,
      (labelPosition) => {
        const targetHeight = labelPosition === "top" ? 0.75 : 1;
        layoutData.value.forEach((item) => {
          var _a, _b, _c;
          if (["subTitle", "h2", "divider"].includes((_a = item.component) == null ? void 0 : _a.fieldType)) {
            item.h = 1 * targetHeight;
          } else if ([
            "subForm",
            "subTable",
            "approvalHistory",
            "document",
            "contract"
          ].includes((_b = item.component) == null ? void 0 : _b.fieldType)) {
            if (((_c = item.component) == null ? void 0 : _c.titleMode) == "none") {
              item.h = 2 * targetHeight;
            } else {
              item.h = 3 * targetHeight;
            }
          }
        });
        gridLayout.value.resizeEvent();
      }
    );
    const addToGrid = Vue.ref(false);
    function handleAddToGrid(event) {
      console.log("🚀 ~ handleAddToGrid ~ event:", event);
      const dropItemIndex = layoutData.value.findIndex((item2) => item2.i === dropId);
      if (dropItemIndex !== -1) {
        const component = layoutData.value[dropItemIndex].component;
        layoutData.value[dropItemIndex].i = component.id;
        layoutData.value[dropItemIndex].id = component.id;
        gridLayout.value.dragEvent(
          "dragend",
          component.id,
          dragItem.x,
          dragItem.y,
          dragItem.w,
          dragItem.h
        );
      }
      const item = gridLayout.value.getItem(dropId);
      if (!item) return;
      try {
        item.wrapper.style.display = "";
      } catch (e) {
      }
      layoutDragData.value = [];
      addToGrid.value = true;
    }
    function handleDelete(item) {
      var _a, _b, _c;
      const index2 = layoutData.value.findIndex((cell) => cell.i == item.i);
      if (index2 !== -1) {
        const deletedItem = layoutData.value[index2];
        if (!editConfigData.value.deletedFields) {
          editConfigData.value.deletedFields = [];
        }
        const deletedField = {
          label: ((_a = deletedItem.component) == null ? void 0 : _a.label) || "",
          fieldName: ((_b = deletedItem.component) == null ? void 0 : _b.fieldName) || "",
          fieldType: ((_c = deletedItem.component) == null ? void 0 : _c.fieldType) || "",
          deleteTime: (/* @__PURE__ */ new Date()).toLocaleString("zh-CN"),
          data: deletedItem
        };
        editConfigData.value.deletedFields.push(deletedField);
        layoutData.value.splice(index2, 1);
        index$7.ElMessage.success("字段已移至回收站");
      }
    }
    function handleHide(item) {
      const index2 = layoutData.value.findIndex((cell) => cell.i === item.i);
      if (index2 !== -1) {
        if (!editConfigData.value.hiddenFields) {
          editConfigData.value.hiddenFields = [];
        }
        editConfigData.value.hiddenFields.push(item.component);
        layoutData.value.splice(index2, 1);
      }
    }
    let lastPosition = { x: null, y: null };
    let cachedRect = null;
    const onFormDragMove = index$1.throttle((event) => {
      if (addToGrid.value) {
        return;
      }
      const component = event.clonedData;
      if (!component) return;
      if (!cachedRect || cachedRect.element !== event.to) {
        cachedRect = {
          element: event.to,
          rect: event.to.getBoundingClientRect()
        };
      }
      const rect = cachedRect.rect;
      const mouseX = event.originalEvent.clientX;
      const mouseY = event.originalEvent.clientY;
      const x = mouseX - rect.left;
      const y = mouseY - rect.top;
      const positionChanged = lastPosition.x === null || lastPosition.y === null || Math.abs(x - lastPosition.x) > 5 || // 5px 的容差
      Math.abs(y - lastPosition.y) > 5;
      if (!positionChanged) {
        return;
      }
      lastPosition = { x, y };
      let finalWH = { w: 1, h: 1 };
      if (component.fieldType == "textarea") {
        finalWH = { w: 1, h: 2 };
      } else if (component.fieldType == "subTitle" || component.fieldType == "h2" || component.fieldType == "divider") {
        finalWH = {
          w: editConfigData.value.columns,
          h: editConfigData.value.labelPosition == "top" ? 0.75 : 1,
          isResizable: false
        };
      } else if (component.fieldType == "subForm" || component.fieldType == "subTable") {
        finalWH = {
          w: editConfigData.value.columns,
          h: editConfigData.value.labelPosition == "top" ? 1.5 : 2
        };
      } else if (component.fieldType == "approvalHistory" || component.fieldType == "document" || component.fieldType == "contract") {
        finalWH = {
          w: editConfigData.value.columns,
          h: editConfigData.value.labelPosition == "top" ? 2.25 : 3
        };
      }
      const colNum = editConfigData.value.columns;
      const rowHeight = editConfigData.value.labelPosition == "top" ? 90 : 60;
      const margin = 0;
      const cellWidth = (rect.width + margin) / colNum;
      const cellHeight = rowHeight + margin;
      const gridX = Math.floor(x / cellWidth);
      const gridY = Math.floor(y / cellHeight);
      const finalX = Math.max(0, Math.min(gridX, colNum - 1));
      const finalY = Math.max(0, gridY);
      let dropItem = layoutData.value.find((item) => item.i == dropId);
      if (!dropItem) {
        layoutData.value.push({
          x: finalX,
          y: finalY,
          w: finalWH.w,
          h: finalWH.h,
          i: dropId,
          isResizable: finalWH.isResizable === false ? false : true,
          component
        });
      } else {
        dropItem.x = finalX;
        dropItem.y = finalY;
      }
      Vue.nextTick(() => {
        var _a;
        const index2 = layoutData.value.findIndex((item) => item.i == dropId);
        if (index2 !== -1) {
          const item = (_a = gridLayout.value) == null ? void 0 : _a.getItem(dropId);
          if (!item) {
            return;
          }
          try {
            item.wrapper.style.display = "none";
          } catch (e) {
          }
          Object.assign(item.state, {
            top: y,
            left: x
          });
          item.calcXY(y, x);
          gridLayout.value.dragEvent(
            "dragstart",
            dropId,
            finalX,
            finalY,
            finalWH.h,
            finalWH.w
          );
          dragItem.x = layoutData.value[index2].x;
          dragItem.y = layoutData.value[index2].y;
          layoutDragData.value = [];
        }
      });
    });
    eventBus.default.on("onFormDragStart", () => {
      addToGrid.value = false;
    });
    eventBus.default.on("onFormDragEnd", (event) => {
      cachedRect = null;
      lastPosition = { x: null, y: null };
      const component = event.clonedData;
      const mouseX = event.originalEvent.clientX;
      const mouseY = event.originalEvent.clientY;
      const rect = document.querySelector(".form-grid-container").getBoundingClientRect();
      const isInRect = mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom;
      if (!isInRect) {
        gridLayout.value.dragEvent(
          "dragend",
          dropId,
          dragItem.x,
          dragItem.y,
          dragItem.h,
          dragItem.w
        );
        layoutData.value = layoutData.value.filter(
          (item) => item.i != dropId && item.i != component.id
        );
      }
      console.log("🚀 ~ onFormDragEnd:", event);
    });
    eventBus.default.on("resizeEvent", () => {
      gridLayout.value.resizeEvent();
    });
    Vue.ref(/* @__PURE__ */ new Map());
    const isDragging = Vue.computed(() => {
      var _a;
      return ((_a = gridLayout.value) == null ? void 0 : _a.state.isDragging) || false;
    });
    function isLinkedVisibility(id) {
      var _a;
      const linkedVisibility = ((_a = editConfigData.value.linkedConfig) == null ? void 0 : _a.visibility) || [];
      for (const item of linkedVisibility) {
        if (item.dataLinkFieldList.includes(id)) {
          return true;
        }
      }
      return false;
    }
    __expose({
      onFormDragMove
    });
    return (_ctx, _cache) => {
      const _component_el_icon = index$4.ElIcon;
      const _component_Hide = Vue.resolveComponent("Hide");
      const _component_el_divider = index$6.ElDivider;
      const _component_el_form = index$3.ElForm;
      const _component_el_scrollbar = index$2.ElScrollbar;
      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
        Vue.createVNode(PageHeaderSetting.default),
        Vue.createVNode(formSetting.default),
        Vue.createElementVNode("div", _hoisted_2, [
          Vue.createVNode(_component_el_scrollbar, null, {
            default: Vue.withCtx(() => [
              Vue.createVNode(_component_el_form, {
                class: "form-grid",
                "label-width": editConfigData.value.labelWidth,
                "label-position": editConfigData.value.labelPosition
              }, {
                default: Vue.withCtx(() => [
                  Vue.createVNode(Vue.unref(vueDraggablePlus.VueDraggable), {
                    draggable: "false",
                    modelValue: layoutDragData.value,
                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => layoutDragData.value = $event),
                    group: "dev",
                    class: "grid-draggable-wrapper",
                    onAdd: handleAddToGrid,
                    style: Vue.normalizeStyle(
                      gridWrapperHeight.value !== null ? "height: " + gridWrapperHeight.value + "px;" : ""
                    )
                  }, {
                    default: Vue.withCtx(() => [
                      Vue.createVNode(Vue.unref(gridLayout_vue.default), {
                        ref_key: "gridLayout",
                        ref: gridLayout,
                        layout: layoutData.value,
                        "onUpdate:layout": _cache[1] || (_cache[1] = ($event) => layoutData.value = $event),
                        "row-height": editConfigData.value.labelPosition == "top" ? 90 : 60,
                        margin: [0, 0],
                        "col-num": editConfigData.value.columns,
                        "prevent-collision": false,
                        "vertical-compact": true,
                        style: { "height": "100%" }
                      }, {
                        item: Vue.withCtx(({ item }) => [
                          item.component ? (Vue.openBlock(), Vue.createElementBlock("div", {
                            key: 0,
                            class: Vue.normalizeClass(["form-component", [
                              Vue.unref(common.getCurrentClass)(item.component),
                              item.component.fieldType
                            ]]),
                            onMouseenter: ($event) => Vue.unref(common.setHoverItem)(item.component),
                            onMouseleave: _cache[0] || (_cache[0] = ($event) => Vue.unref(common.setHoverItem)()),
                            onClick: Vue.withModifiers(($event) => Vue.unref(common.setSelectedItem)(item.component), ["stop"])
                          }, [
                            !isDragging.value && Vue.unref(common.isSelectedItem)(item.component) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
                              Vue.createElementVNode("span", {
                                class: Vue.normalizeClass(["toolbar-btn required-btn", { "is-required": item.component.required }]),
                                title: "设置必填",
                                onClick: Vue.withModifiers(($event) => item.component.required = !item.component.required, ["stop"])
                              }, [
                                Vue.createVNode(_component_el_icon, null, {
                                  default: Vue.withCtx(() => [
                                    item.component.required ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$5.StarFilled), { key: 0 })) : (Vue.openBlock(), Vue.createBlock(Vue.unref(index$5.Star), { key: 1 }))
                                  ]),
                                  _: 2
                                }, 1024)
                              ], 10, _hoisted_5),
                              Vue.createElementVNode("span", {
                                class: Vue.normalizeClass(["toolbar-btn disabled-btn", { "is-disabled": item.component.disabled }]),
                                title: "设置只读",
                                onClick: Vue.withModifiers(($event) => item.component.disabled = !item.component.disabled, ["stop"])
                              }, [
                                Vue.createVNode(_component_el_icon, null, {
                                  default: Vue.withCtx(() => [
                                    item.component.disabled ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$5.Lock), { key: 0 })) : (Vue.openBlock(), Vue.createBlock(Vue.unref(index$5.Unlock), { key: 1 }))
                                  ]),
                                  _: 2
                                }, 1024)
                              ], 10, _hoisted_6),
                              Vue.createElementVNode("span", {
                                class: "toolbar-btn settings-btn",
                                title: "放进隐藏域",
                                onClick: Vue.withModifiers(($event) => handleHide(item), ["stop"])
                              }, [
                                Vue.createVNode(_component_el_icon, null, {
                                  default: Vue.withCtx(() => [
                                    Vue.createVNode(_component_Hide)
                                  ]),
                                  _: 1
                                })
                              ], 8, _hoisted_7),
                              Vue.createElementVNode("span", {
                                class: "toolbar-btn delete-btn",
                                title: "删除组件",
                                onClick: Vue.withModifiers(($event) => handleDelete(item), ["stop"])
                              }, [
                                Vue.createVNode(_component_el_icon, null, {
                                  default: Vue.withCtx(() => [
                                    Vue.createVNode(Vue.unref(index$5.Delete))
                                  ]),
                                  _: 1
                                })
                              ], 8, _hoisted_8)
                            ])) : Vue.createCommentVNode("", true),
                            Vue.createElementVNode("div", _hoisted_9, [
                              editConfigData.value.showFieldName && item.component.fieldName ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_10, Vue.toDisplayString(item.component.fieldType == "blank" ? "空白占位" : item.component.fieldName), 1)) : Vue.createCommentVNode("", true),
                              item.component.disabled ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_11, [
                                Vue.createVNode(_component_el_icon, null, {
                                  default: Vue.withCtx(() => [
                                    Vue.createVNode(Vue.unref(index$5.Lock))
                                  ]),
                                  _: 1
                                })
                              ])) : Vue.createCommentVNode("", true)
                            ]),
                            Vue.createElementVNode("div", {
                              class: Vue.normalizeClass(["component-content", {
                                "is-disabled": item.component.disabled,
                                "is-readonly": item.component.readOnly && !item.component.disabled,
                                "is-linked-visibility": isLinkedVisibility(
                                  item.component.id
                                )
                              }])
                            }, [
                              item.component.fieldType == "subTitle" ? (Vue.openBlock(), Vue.createBlock(SubTitle.default, {
                                key: 0,
                                "component-data": item.component
                              }, null, 8, ["component-data"])) : item.component.fieldType == "h2" ? (Vue.openBlock(), Vue.createBlock(H2Wrapper.default, {
                                key: 1,
                                "component-data": item.component
                              }, null, 8, ["component-data"])) : item.component.fieldType == "subForm" ? (Vue.openBlock(), Vue.createBlock(SubForm.default, {
                                key: 2,
                                "component-data": item.component
                              }, null, 8, ["component-data"])) : item.component.fieldType == "subTable" ? (Vue.openBlock(), Vue.createBlock(SubTable.default, {
                                key: 3,
                                "component-data": item.component
                              }, null, 8, ["component-data"])) : item.component.fieldType == "approvalHistory" ? (Vue.openBlock(), Vue.createBlock(approvalHistory.default, {
                                key: 4,
                                "component-data": item.component
                              }, null, 8, ["component-data"])) : item.component.fieldType == "document" ? (Vue.openBlock(), Vue.createBlock(Document.default, {
                                key: 5,
                                "component-data": item.component
                              }, null, 8, ["component-data"])) : item.component.fieldType == "contract" ? (Vue.openBlock(), Vue.createBlock(Contract.default, {
                                key: 6,
                                "component-data": item.component
                              }, null, 8, ["component-data"])) : item.component.fieldType == "divider" ? (Vue.openBlock(), Vue.createBlock(_component_el_divider, {
                                key: 7,
                                "border-style": "dashed"
                              }, {
                                default: Vue.withCtx(() => _cache[3] || (_cache[3] = [
                                  Vue.createTextVNode(" 此处为分割线，阻止下方组件自动向上补齐，解析时不显示 ")
                                ])),
                                _: 1
                              })) : (Vue.openBlock(), Vue.createBlock(ComponentPreviewWrapper.default, {
                                key: 8,
                                "component-data": item.component
                              }, null, 8, ["component-data"]))
                            ], 2)
                          ], 42, _hoisted_3)) : Vue.createCommentVNode("", true)
                        ]),
                        _: 1
                      }, 8, ["layout", "row-height", "col-num"])
                    ]),
                    _: 1
                  }, 8, ["modelValue", "style"])
                ]),
                _: 1
              }, 8, ["label-width", "label-position"])
            ]),
            _: 1
          })
        ]),
        Vue.createVNode(PageFooterSetting.default)
      ]);
    };
  }
};
const formWorkArea = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-d23df582"]]);
exports.default = formWorkArea;
