import { pushScopeId as P, popScopeId as V, createElementVNode as h, resolveComponent as g, openBlock as o, createElementBlock as p, createBlock as f, normalizeClass as T, normalizeStyle as A, withModifiers as R, withCtx as r, renderSlot as q, createCommentVNode as _, Fragment as B, createVNode as s, mergeProps as k, renderList as j, toDisplayString as E, normalizeProps as K, guardReactiveProps as Q, resolveDynamicComponent as Z, defineAsyncComponent as $, computed as F, unref as D, withDirectives as ee, vShow as te } from "vue";
import { _ as x, d as S, a as L, u as N } from "./index-48a289b7.js";
import "vue-router";
const I = {
  computed: {},
  methods: {
    // 选中组件
    selectField(e) {
      e.itemRender && e.itemRender.children || e.buttonRender && e.buttonRender.name == "toolBarTitle" || this.designer.setSelected(e);
    },
    // 选中容器
    selectWidget(e) {
      this.designer.setSelected(e);
    },
    // 选中父组件
    selectParentWidget() {
      this.designer.setSelected(this.designer.selectedWidgetParent);
    },
    // 删除
    removeFieldWidget() {
      const e = this.designer.selectedWidget.id;
      this.$nextTick(() => {
        let t = this.parentWidget.findIndex((i) => i.id === e);
        t >= 0 && (this.parentWidget.splice(t, 1), this.designer.selectedConfigType ? delete this.designer.designerConfig[this.rootWidgetId][this.designer.selectedConfigType][e] : (delete this.designer.designerConfig[e], delete this.designer.designerConfig[e + "LAYOUT"]), this.designer.clearSelected());
      });
    },
    // 匹配新加组件类型，生成对应类型配置
    switchFieldType(e, t) {
      switch (e.type) {
        case "ElSelect":
          t.itemRender.attrs.style = "min-width: 120px;max-width:100%", t.itemRender.props.filterable = !0, e.options.multiple && (t.itemRender.props.multiple = !0, t.itemRender.props["collapse-tags"] = !0, t.itemRender.props["collapse-tags-tooltip"] = !0), e.options && e.options.optionItems && (t.itemRender.options = e.options.optionItems.map((i) => Object.assign(
            {
              value: i.value,
              label: i.label
            },
            i
          )));
          break;
        case "ElSwitch":
          break;
        case "ElInputNumber":
          t.itemRender.props.type = "number";
          break;
        case "ElDatePicker":
          t.itemRender.attrs.style = "width: 100%;", e.options.type == "date" ? t.itemRender.props = {
            ...t.itemRender.props,
            type: "date",
            valueFormat: "YYYY-MM-DD"
          } : t.itemRender.props = {
            ...t.itemRender.props,
            type: "daterange",
            valueFormat: "YYYY-MM-DD",
            isRange: !0
          };
          break;
        case "ElTimePicker":
          t.itemRender.attrs.style = "width: 100%;", e.options.type == "time" ? t.itemRender.props = {
            ...t.itemRender.props,
            type: "datetime",
            valueFormat: "YYYY-MM-DD HH:mm:ss"
          } : t.itemRender.props = {
            ...t.itemRender.props,
            type: "datetimerange",
            valueFormat: "YYYY-MM-DD HH:mm:ss",
            isRange: !0
          };
          break;
        case "ElInput":
          t.itemRender.props.type = e.options.type;
          break;
      }
      return t;
    },
    // 表格工具栏新增组件事件
    onDragToolbarAdd(e) {
      let t = e.item._underlying_vm_;
      if (t.type != "ElButton" || t.code) {
        for (let n in this.designer.designerConfig)
          this.designer.designerConfig[n].btnConfig && this.designer.designerConfig[n].btnConfig[t.id] && n != this.widget.id && (this.designer.designerConfig[this.widget.id].btnConfig[t.id] = deepClone(
            this.designer.designerConfig[n].btnConfig[t.id]
          ), delete this.designer.designerConfig[n].btnConfig[t.id]);
        this.designer.emitHistoryChange();
        return;
      }
      let i;
      this.toolbarConfig.forEach((n, d) => {
        n.id == t.id && (i = d);
      });
      let l = {
        type: "NEW",
        code: "NEW",
        name: "新增",
        iconComponent: "Add",
        viewType: "primary",
        visible: !0,
        icon: null,
        id: t.id,
        _button_id: null,
        _region_id: null,
        clickFunction: null,
        displayLogic: null,
        showInGrid: null,
        requestPath: null,
        windowId: null,
        css: "",
        openWidth: null,
        openHeight: null,
        loading: !1,
        btnLoad: {},
        // 在表格中的按钮是否显示加载状态的双向绑定对象
        btnShowInGrid: {},
        // 在表格中的按钮是否显示的双向绑定对象
        btnShow: {},
        // 按钮在工具栏的显示状态
        isNew: !0
        // 所有新加组件都新增一个isNew字段，用来与原有组件作区分，判断是否为新增组件
      };
      this.toolbarConfig.splice(i, 1, l), this.designer.newWidgetInitConfig(this.widget.gridData.id, "btnConfig", l), this.designer.emitHistoryChange();
    },
    // 新增表单项配置
    addFormItemConfig(e) {
      return {
        field: e.field,
        // 新增组件时如果未进行配置选择引用字段
        folding: !1,
        // 默认收起
        id: e.id,
        itemRender: {
          name: e.type,
          props: {
            placeholder: "请输入",
            size: "default",
            clearable: !0,
            filterable: !0
          },
          defaultValue: "",
          events: {
            "on-change": function() {
            },
            change: function() {
            }
          },
          attrs: {}
        },
        name: e.name,
        title: e.name,
        visible: !0,
        displayForm: !0,
        // 新增到表单的基础组件都添加 displayForm 属性 用来与表格里的表单组件作区分
        isNew: !0
        // 所有新加组件都新增一个isNew字段，用来与原有组件作区分，判断是否为新增组件
      };
    }
  }
};
const ie = {
  name: "container-wrapper",
  mixins: [I],
  components: {},
  props: {
    widget: Object,
    designer: Object,
    parentWidget: Array,
    // 删除函数调用
    height: [String, Number]
  },
  computed: {
    // 点击选中组件
    selected() {
      return (e) => e.mode != null && e.gridData ? e.id + "LAYOUT" === this.designer.selectedId : e.id === this.designer.selectedId;
    },
    // 如果是表格或表单，则隐藏删除与拖拽按钮 只允许通过其外层的布局组件删除和拖拽
    isHide() {
      return (e, t) => {
        if (t == "back" && e.mode == null)
          return !0;
        if (t == "delete" || t == "drag")
          return e.mode != null;
      };
    }
  }
}, M = (e) => (P("data-v-a5ec9eee"), e = e(), V(), e), ne = { class: "container-wrapper" }, de = {
  key: 0,
  class: "container-action"
}, re = /* @__PURE__ */ M(() => /* @__PURE__ */ h("i", { class: "iconfont icon-back" }, null, -1)), oe = [
  re
], se = /* @__PURE__ */ M(() => /* @__PURE__ */ h("i", { class: "iconfont icon-delete" }, null, -1)), ae = [
  se
], le = {
  key: 1,
  class: "drag-handler"
}, ge = /* @__PURE__ */ M(() => /* @__PURE__ */ h("i", { title: "拖拽手柄" }, [
  /* @__PURE__ */ h("i", { class: "iconfont icon-drag" })
], -1)), ce = [
  ge
];
function ue(e, t, i, l, n, d) {
  const c = g("el-row");
  return o(), p("div", ne, [
    (o(), f(c, {
      key: i.widget.id,
      class: T(["vxe-grid-container", [d.selected(i.widget) ? "selected" : ""]]),
      style: A({ height: i.height + "px", overflow: "auto" }),
      onClick: t[0] || (t[0] = R((v) => e.selectWidget(i.widget), ["stop"]))
    }, {
      default: r(() => [
        q(e.$slots, "default", {}, void 0, !0)
      ]),
      _: 3
    }, 8, ["class", "style"])),
    d.selected(i.widget) ? (o(), p("div", de, [
      d.isHide(i.widget, "back") ? (o(), p("i", {
        key: 0,
        title: "选中布局",
        onClick: t[1] || (t[1] = R((v) => e.selectParentWidget(i.widget), ["stop"]))
      }, oe)) : _("", !0),
      d.isHide(i.widget, "delete") ? (o(), p("i", {
        key: 1,
        title: "移除组件",
        onClick: t[2] || (t[2] = R((...v) => e.removeFieldWidget && e.removeFieldWidget(...v), ["stop"]))
      }, ae)) : _("", !0)
    ])) : _("", !0),
    d.selected(i.widget) && d.isHide(i.widget, "drag") ? (o(), p("div", le, ce)) : _("", !0)
  ]);
}
const O = /* @__PURE__ */ x(ie, [["render", ue], ["__scopeId", "data-v-a5ec9eee"]]);
const pe = {
  name: "static-content-wrapper",
  mixins: [I],
  components: {},
  props: {
    field: Object,
    designer: Object,
    parentWidget: Array,
    // 删除函数调用
    rootWidgetId: String,
    // 删除函数调用
    width: {
      type: String
    }
  },
  computed: {
    selected() {
      return !!this.designer && this.field.id === this.designer.selectedId;
    },
    isHide() {
      return () => this.field.displayForm == null ? !this.field.visible : !this.field.displayForm;
    }
  },
  watch: {
    field: {
      deep: !0,
      immediate: !0,
      handler(e) {
      }
    }
  },
  methods: {}
}, H = (e) => (P("data-v-6617c757"), e = e(), V(), e), me = {
  key: 0,
  class: "field-action"
}, fe = /* @__PURE__ */ H(() => /* @__PURE__ */ h("i", { class: "iconfont icon-delete" }, null, -1)), he = [
  fe
], _e = {
  key: 1,
  class: "drag-handler background-opacity"
}, we = /* @__PURE__ */ H(() => /* @__PURE__ */ h("i", { title: "拖拽手柄" }, [
  /* @__PURE__ */ h("i", { class: "iconfont icon-drag" })
], -1)), ve = {
  key: 0,
  title: "隐藏"
}, ye = /* @__PURE__ */ H(() => /* @__PURE__ */ h("i", { class: "iconfont icon-hide" }, null, -1)), Ce = [
  ye
];
function be(e, t, i, l, n, d) {
  return o(), p("div", {
    class: "field-wrapper",
    style: A({ "flex-basis": i.width })
  }, [
    h("div", {
      class: T(["static-content-item", [d.selected ? "selected" : ""]]),
      onClick: t[0] || (t[0] = R((c) => e.selectField(i.field), ["stop"]))
    }, [
      q(e.$slots, "default", {}, void 0, !0)
    ], 2),
    this.designer ? (o(), p(B, { key: 0 }, [
      i.designer.selectedId === i.field.id ? (o(), p("div", me, [
        h("i", {
          title: "移除组件",
          onClick: t[1] || (t[1] = R((...c) => e.removeFieldWidget && e.removeFieldWidget(...c), ["stop"]))
        }, he)
      ])) : _("", !0),
      i.designer.selectedId === i.field.id ? (o(), p("div", _e, [
        we,
        d.isHide() ? (o(), p("i", ve, Ce)) : _("", !0)
      ])) : _("", !0)
    ], 64)) : _("", !0)
  ], 4);
}
const U = /* @__PURE__ */ x(pe, [["render", be], ["__scopeId", "data-v-6617c757"]]);
const We = {
  name: "grid-widget",
  componentName: "ContainerWidget",
  mixins: [I],
  inject: [],
  components: {
    ContainerWrapper: O,
    StaticContentWrapper: U,
    draggable: S
  },
  props: {
    widget: Object,
    designer: Object,
    parentWidget: Array
    // 删除组件时调用
  },
  data() {
    return {
      formBtnConfig: [],
      toolbarConfig: [],
      showButtons: []
    };
  },
  computed: {
    // toolbar buttons按钮配置
    btnRender() {
      return (e) => ({
        name: "ElButton",
        props: {
          autoInsertSpace: !0,
          // 自动在两个中文字符之间插入空格
          content: e.name,
          icon: e.iconComponent,
          nativeType: "submit",
          size: "default",
          type: e.viewType
        }
      });
    },
    // 按钮绑定属性
    operationButton(e) {
      return (t) => ({
        size: "small",
        type: t.viewType,
        // style: { ...btnItem.css, marginLeft: "0px" }, // 如果btnItem.css有数据，则会报错，原因未知
        icon: null,
        // 使用自定义iconComponent，该属性就必须为null
        text: !0,
        iconComponent: t.iconComponent,
        round: t.shape === "round",
        circle: t.shape === "circle",
        loading: t.loading,
        shape: t.shape
      });
    },
    computeGridHeight() {
      let e = window.innerHeight - 40 - 50 - 42 - 20 - 64;
      return e < this.widget.height ? e : this.widget.height;
    }
  },
  watch: {
    "widget.gridData.toolbarConfig": {
      handler(e) {
        if (e.buttons.forEach((t) => {
          t.hasOwnProperty("buttonRender") || (t.buttonRender = {
            name: "ElButton",
            props: {
              size: "default",
              type: t.viewType,
              style: t.css,
              icon: t.icon,
              iconComponent: t.iconComponent,
              round: t.shape === "round",
              circle: t.shape === "circle",
              shape: t.shape
            },
            events: {}
            // click: toolBarButtonClick
          });
        }), this.showButtons = e.buttons.filter((t) => t.showInGrid == "Y" || t.showInGrid === !0), this.showButtons.length > 0) {
          this.widget.gridData.data = [];
          let t = {};
          this.widget.gridData.columns.forEach((i) => {
            i.type !== "seq" && i.type !== "checkbox" && i.fixed !== "left" && (t[i.field] = void 0);
          }), this.widget.gridData.data.push(t);
        }
        this.toolbarConfig = e.buttons;
      },
      deep: !0,
      immediate: !0
    },
    "widget.gridData.formConfig.items": {
      handler(e) {
        this.formBtnConfig = e;
      },
      deep: !0
    },
    "widget.gridData.columns": {
      handler(e) {
        this.$refs.curRegion && this.$refs.curRegion.loadColumn(e);
      },
      deep: !0
    },
    // 监听表格表单的数组长度，来 删除 / 新增 默认的查询与重置按钮
    formBtnConfig: {
      handler(e) {
        let t = this.widget.gridData.formConfig.items.findIndex((i) => i.align == "right");
        t < 0 && e.length > 0 ? this.widget.gridData.formConfig.items.push({
          align: "right",
          collapseNode: !1,
          itemRender: {
            name: "ElButtons",
            children: [
              {
                props: {
                  "native-type": "submit",
                  type: "primary",
                  content: "查询",
                  iconComponent: "Search",
                  size: "default",
                  autoInsertSpace: !0
                }
              },
              {
                props: {
                  "native-type": "reset",
                  content: "重置",
                  iconComponent: "Refresh",
                  size: "default",
                  autoInsertSpace: !0
                }
              }
            ]
          },
          visible: !0
        }) : t >= 0 && e.length == 1 && this.widget.gridData.formConfig.items.splice(t, 1);
      },
      deep: !0
    }
  },
  created() {
    this.formBtnConfig = this.widget.gridData.formConfig.items, this.toolbarConfig = this.widget.gridData.toolbarConfig.buttons;
  },
  mounted() {
  },
  methods: {
    // 自定义控制那些元素可以拖拽或不允许拖拽
    checkFieldMove(e) {
      return this.designer.checkFieldMove(e);
    },
    // 表单新增组件事件
    onDragFormAdd(e) {
      let t = e.item._underlying_vm_;
      if (t.itemRender) {
        for (let n in this.designer.designerConfig)
          this.designer.designerConfig[n].queryConfig && this.designer.designerConfig[n].queryConfig[t.id] && n != this.widget.id && (this.designer.designerConfig[this.widget.id].queryConfig[t.id] = L(this.designer.designerConfig[n].queryConfig[t.id]), delete this.designer.designerConfig[n].queryConfig[t.id]);
        this.designer.emitHistoryChange();
        return;
      }
      let i;
      this.formBtnConfig.forEach((n, d) => {
        n.id == t.id && (i = d);
      });
      let l = this.addFormItemConfig(t);
      l = this.switchFieldType(t, l), this.formBtnConfig.splice(i, 1, l), this.designer.newWidgetInitConfig(this.widget.gridData.id, "queryConfig", l), this.designer.emitHistoryChange();
    }
  }
};
const De = {
  key: 0,
  class: "toolBar-title"
}, ke = {
  key: 0,
  style: { verticalAlign: "middle" }
};
function Re(e, t, i, l, n, d) {
  const c = g("vxe-form-item"), v = g("vxe-form"), C = g("StaticContentWrapper"), b = g("draggable"), y = g("el-icon"), u = g("el-tooltip"), a = g("el-button"), m = g("vxe-grid"), G = g("el-col"), z = g("container-wrapper");
  return o(), f(z, {
    designer: i.designer,
    widget: i.widget,
    parentWidget: i.parentWidget
  }, {
    default: r(() => [
      s(G, { class: "grid-cell" }, {
        default: r(() => [
          s(z, {
            designer: i.designer,
            widget: i.widget.gridData
          }, {
            default: r(() => [
              s(G, { class: "grid-cell" }, {
                default: r(() => [
                  s(m, k({
                    ref: "curRegion",
                    "keep-source": ""
                  }, i.widget.gridData, { height: d.computeGridHeight }), {
                    form: r(() => [
                      s(b, k({
                        list: n.formBtnConfig,
                        "item-key": "id"
                      }, {
                        group: "dragGroup",
                        ghostClass: "ghost",
                        animation: 300
                      }, {
                        "component-data": {
                          name: "fade",
                          class: "transition-group field formBtnConfig"
                        },
                        handle: ".drag-handler",
                        tag: "div",
                        onAdd: d.onDragFormAdd,
                        move: d.checkFieldMove
                      }), {
                        item: r(({ element: w }) => [
                          s(C, {
                            designer: i.designer,
                            field: w,
                            parentWidget: n.formBtnConfig,
                            rootWidgetId: i.widget.id
                          }, {
                            default: r(() => [
                              s(v, null, {
                                default: r(() => [
                                  w.itemRender && w.itemRender.name == "ElButtons" ? (o(!0), p(B, { key: 0 }, j(w.itemRender.children, (Y) => (o(), f(c, {
                                    "item-render": {
                                      name: "ElButton",
                                      props: Y.props
                                    },
                                    visible: w.visible
                                  }, null, 8, ["item-render", "visible"]))), 256)) : (o(), f(c, {
                                    key: 1,
                                    field: w.field,
                                    title: w.title,
                                    "title-overflow": "tooltip",
                                    "item-render": w.itemRender
                                  }, null, 8, ["field", "title", "item-render"]))
                                ]),
                                _: 2
                              }, 1024)
                            ]),
                            _: 2
                          }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])
                        ]),
                        _: 1
                      }, 16, ["list", "onAdd", "move"])
                    ]),
                    toolbar_buttons: r(() => [
                      s(b, k({
                        list: n.toolbarConfig,
                        "item-key": "id"
                      }, {
                        group: "dragGroup",
                        ghostClass: "ghost",
                        animation: 300
                      }, {
                        "component-data": {
                          name: "fade",
                          class: "transition-group field toolbar"
                        },
                        handle: ".drag-handler",
                        tag: "div",
                        onAdd: e.onDragToolbarAdd,
                        move: d.checkFieldMove
                      }), {
                        item: r(({ element: w }) => [
                          s(C, {
                            designer: i.designer,
                            field: w,
                            parentWidget: n.toolbarConfig,
                            rootWidgetId: i.widget.id
                          }, {
                            default: r(() => [
                              w.buttonRender && w.buttonRender.name == "toolBarTitle" ? (o(), p("span", De, E(w.name), 1)) : (o(), f(v, { key: 1 }, {
                                default: r(() => [
                                  s(c, {
                                    "item-render": d.btnRender(w)
                                  }, null, 8, ["item-render"])
                                ]),
                                _: 2
                              }, 1024))
                            ]),
                            _: 2
                          }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])
                        ]),
                        _: 1
                      }, 16, ["list", "onAdd", "move"])
                    ]),
                    operation: r(({ row: w, rowIndex: Y }) => [
                      (o(!0), p(B, null, j(n.showButtons, (W) => (o(), f(a, k({
                        key: W._button_id
                      }, d.operationButton(W)), {
                        icon: r(() => [
                          s(u, {
                            title: W.name,
                            content: W.name,
                            placement: "top"
                          }, {
                            default: r(() => [
                              s(y, K(Q({ size: 15, style: { verticalAlign: "middle" } })), {
                                default: r(() => [
                                  (o(), f(Z(W.iconComponent)))
                                ]),
                                _: 2
                              }, 1040)
                            ]),
                            _: 2
                          }, 1032, ["title", "content"])
                        ]),
                        default: r(() => [
                          !W.iconComponent || typeof W.iconComponent > "u" ? (o(), p("span", ke, E(W.name), 1)) : _("", !0)
                        ]),
                        _: 2
                      }, 1040))), 128))
                    ]),
                    _: 1
                  }, 16, ["height"])
                ]),
                _: 1
              })
            ]),
            _: 1
          }, 8, ["designer", "widget"])
        ]),
        _: 1
      })
    ]),
    _: 1
  }, 8, ["designer", "widget", "parentWidget"]);
}
const X = /* @__PURE__ */ x(We, [["render", Re], ["__scopeId", "data-v-ee994d8d"]]);
const xe = {
  name: "form-widget",
  componentName: "FromWidget",
  mixins: [I],
  inject: [],
  components: {
    ContainerWrapper: O,
    StaticContentWrapper: U,
    draggable: S
  },
  props: {
    widget: Object,
    designer: Object,
    parentWidget: Array
    // 删除组件时调用
  },
  data() {
    return {
      formColumns: [],
      editRules: []
    };
  },
  computed: {
    // toolbar buttons按钮配置
    btnRender() {
      return (e) => ({
        name: "ElButton",
        props: {
          autoInsertSpace: !0,
          // 自动在两个中文字符之间插入空格
          content: e.name,
          icon: e.iconComponent,
          nativeType: "submit",
          size: "default",
          type: e.viewType
        }
      });
    },
    computeSpan() {
      return (e) => e.dataType === "EDITOR" || e.dataType === "TEXT" ? 24 : e.fwidth ? Number(e.fwidth) > 24 ? 24 : Number(e.fwidth) : 12;
    },
    toolbarConfig() {
      return this.widget.gridData.type == "FORM" ? this.widget.gridData.toolbarConfig.buttons.filter(
        (e) => e.type != "DELETE" && e.type != "EDIT"
      ) : this.widget.gridData.toolbarConfig.buttons;
    }
  },
  watch: {
    "widget.gridData.columns": {
      handler(e) {
        this.formColumns = e;
      },
      deep: !0
    },
    "widget.gridData.toolbarConfig": {
      handler(e) {
        e.buttons.forEach((t) => {
          t.hasOwnProperty("buttonRender") || (t.buttonRender = {
            name: "ElButton",
            props: {
              size: "default",
              type: t.viewType,
              style: t.css,
              icon: t.icon,
              iconComponent: t.iconComponent,
              round: t.shape === "round",
              circle: t.shape === "circle",
              shape: t.shape
            },
            events: {}
            // click: toolBarButtonClick
          });
        });
      },
      deep: !0,
      immediate: !0
    }
  },
  created() {
    this.formColumns = this.widget.gridData.columns, this.editRules = this.widget.gridData.editRules, this.widget.gridData.toolbarConfig.buttons.forEach((e) => {
      e.hasOwnProperty("buttonRender") || (e.buttonRender = {
        name: "ElButton",
        props: {
          size: "default",
          type: e.viewType,
          style: e.css,
          icon: e.icon,
          iconComponent: e.iconComponent,
          round: e.shape === "round",
          circle: e.shape === "circle",
          shape: e.shape
        },
        events: {}
        // click: toolBarButtonClick
      });
    });
  },
  mounted() {
  },
  methods: {
    // 自定义控制那些元素可以拖拽或不允许拖拽
    checkFieldMove(e) {
      return this.designer.checkFieldMove(e);
    },
    // 表单新增组件事件
    onDragFormAdd(e) {
      let t = e.item._underlying_vm_;
      if (t.itemRender) {
        for (let n in this.designer.designerConfig)
          this.designer.designerConfig[n].fieldConfig && this.designer.designerConfig[n].fieldConfig[t.id] && n != this.widget.id && (this.designer.designerConfig[this.widget.id].fieldConfig[t.id] = L(
            this.designer.designerConfig[n].fieldConfig[t.id]
          ), delete this.designer.designerConfig[n].fieldConfig[t.id]);
        this.designer.emitHistoryChange();
        return;
      }
      let i;
      this.formColumns.forEach((n, d) => {
        n.id == t.id && (i = d);
      });
      let l = this.addFormItemConfig(t);
      l = this.switchFieldType(t, l), this.formColumns.splice(i, 1, l), this.designer.newWidgetInitConfig(
        this.widget.gridData.id,
        "fieldConfig",
        l
      ), this.designer.emitHistoryChange();
    }
  }
};
const Ie = { class: "toolBar-title" }, Te = {
  key: 1,
  class: "no-widget-hint"
};
function Ee(e, t, i, l, n, d) {
  const c = g("el-col"), v = g("vxe-form-item"), C = g("vxe-form"), b = g("StaticContentWrapper"), y = g("draggable"), u = g("container-wrapper");
  return o(), f(u, {
    designer: i.designer,
    widget: i.widget,
    parentWidget: i.parentWidget
  }, {
    default: r(() => [
      s(c, { class: "grid-cell" }, {
        default: r(() => [
          s(u, {
            designer: i.designer,
            widget: i.widget.gridData,
            height: i.widget.height
          }, {
            default: r(() => [
              d.toolbarConfig.length > 0 && d.toolbarConfig[0].buttonRender && d.toolbarConfig[0].buttonRender.name == "toolBarTitle" ? (o(), f(c, {
                key: 0,
                class: "grid-cell"
              }, {
                default: r(() => [
                  h("span", Ie, E(d.toolbarConfig[0].name), 1)
                ]),
                _: 1
              })) : _("", !0),
              s(c, { class: "grid-cell" }, {
                default: r(() => [
                  s(y, k({
                    list: n.formColumns,
                    "item-key": "id"
                  }, { group: "dragGroup", ghostClass: "ghost", animation: 300 }, {
                    "component-data": {
                      name: "fade",
                      class: "transition-group field formBtnConfig el-row"
                    },
                    handle: ".drag-handler",
                    tag: "div",
                    onAdd: d.onDragFormAdd,
                    move: d.checkFieldMove
                  }), {
                    item: r(({ element: a }) => [
                      a.type !== "seq" && a.type !== "checkbox" && a.fixed !== "left" && a.dataType !== "ID" && a.displayForm ? (o(), f(c, {
                        key: 0,
                        class: "grid-cell",
                        span: d.computeSpan(a)
                      }, {
                        default: r(() => [
                          s(b, {
                            designer: i.designer,
                            field: a,
                            parentWidget: n.formColumns,
                            rootWidgetId: i.widget.id
                          }, {
                            default: r(() => [
                              s(C, {
                                rules: n.editRules,
                                "title-align": "right",
                                "title-width": "120"
                              }, {
                                default: r(() => [
                                  s(v, {
                                    field: a.field,
                                    title: a.title,
                                    "title-overflow": "tooltip",
                                    "item-render": a.itemRender,
                                    "title-prefix": a.titlePrefix,
                                    style: A(a.style)
                                  }, null, 8, ["field", "title", "item-render", "title-prefix", "style"])
                                ]),
                                _: 2
                              }, 1032, ["rules"])
                            ]),
                            _: 2
                          }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])
                        ]),
                        _: 2
                      }, 1032, ["span"])) : _("", !0)
                    ]),
                    _: 1
                  }, 16, ["list", "onAdd", "move"])
                ]),
                _: 1
              }),
              s(c, { class: "grid-cell" }, {
                default: r(() => [
                  s(y, k({
                    list: d.toolbarConfig,
                    "item-key": "id"
                  }, { group: "dragGroup", ghostClass: "ghost", animation: 300 }, {
                    "component-data": {
                      name: "fade",
                      class: "transition-group field toolbar"
                    },
                    handle: ".drag-handler",
                    tag: "div",
                    onAdd: e.onDragToolbarAdd,
                    move: d.checkFieldMove
                  }), {
                    item: r(({ element: a }) => [
                      !a.buttonRender || a.buttonRender && a.buttonRender.name != "toolBarTitle" ? (o(), f(b, {
                        key: 0,
                        designer: i.designer,
                        field: a,
                        parentWidget: d.toolbarConfig,
                        rootWidgetId: i.widget.id
                      }, {
                        default: r(() => [
                          s(C, null, {
                            default: r(() => [
                              s(v, {
                                "item-render": d.btnRender(a),
                                visible: a.code != null
                              }, null, 8, ["item-render", "visible"])
                            ]),
                            _: 2
                          }, 1024)
                        ]),
                        _: 2
                      }, 1032, ["designer", "field", "parentWidget", "rootWidgetId"])) : _("", !0)
                    ]),
                    _: 1
                  }, 16, ["list", "onAdd", "move"])
                ]),
                _: 1
              }),
              n.formColumns.length === 0 ? (o(), p("div", Te, " 请从左侧列表中选择基础字段, 然后用鼠标拖动组件放置于此处 ")) : _("", !0)
            ]),
            _: 1
          }, 8, ["designer", "widget", "height"])
        ]),
        _: 1
      })
    ]),
    _: 1
  }, 8, ["designer", "widget", "parentWidget"]);
}
const J = /* @__PURE__ */ x(xe, [["render", Ee], ["__scopeId", "data-v-02ba7b3e"]]);
const Ae = {
  name: "grid-layout-wrapper",
  componentName: "GridLayouWrapper",
  mixins: [I],
  inject: {},
  components: {
    ContainerWrapper: O,
    VxeGridWidget: X,
    VxeFormWidget: J,
    draggable: S,
    WindowGrid: $(() => Promise.resolve().then(() => Pe))
  },
  props: {
    widget: Object,
    designer: Object
  },
  data() {
    return {};
  },
  computed: {},
  watch: {
    widget: {
      handler(e) {
        e.child.length > 0 && e.child.findIndex((i) => i.isActive) < 0 && (e.child[0].isActive = !0);
      },
      immediate: !0,
      deep: !0
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    selectTabpane(e) {
      this.widget.child.forEach((t) => {
        delete t.isActive, t.id == e && (t.isActive = !0);
      });
    },
    // 在tabs中添加tabpane时触发
    onDragAdd(e) {
      let t = e.item._underlying_vm_;
      this.designer.newWidgetInitConfig(this.widget.id, "layout", t);
    },
    // 拖拽变换位置时触发的事件
    onDragUpdate() {
    },
    // 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠
    onMove(e) {
      return this.designer.checkWidgetMove(e);
    }
  }
};
const Se = {
  key: 0,
  class: "no-widget-hint"
}, Be = {
  key: 2,
  class: "el-tabs el-tabs--tops"
}, Me = { class: "el-tabs__header" }, Oe = { class: "transition-group-el" }, He = ["onClick"], Ge = {
  key: 0,
  class: "el-tabs__content"
};
function ze(e, t, i, l, n, d) {
  const c = g("WindowGrid"), v = g("draggable"), C = g("el-col"), b = g("container-wrapper");
  return o(), f(b, {
    designer: i.designer,
    widget: i.widget
  }, {
    default: r(() => [
      s(C, { class: "grid-cell" }, {
        default: r(() => [
          i.widget.child.length === 0 && i.widget.gridData == null ? (o(), p("div", Se, "请从左侧列表中选择一个高级组件, 然后用鼠标拖动组件放置于此处")) : _("", !0),
          i.widget.mode == "horizontal" || i.widget.mode === "vertical" ? (o(), f(c, {
            key: 1,
            preViewData: i.widget,
            designer: i.designer
          }, null, 8, ["preViewData", "designer"])) : (o(), p("div", Be, [
            h("div", Me, [
              h("div", {
                class: T(["el-tabs__nav-wrap", { hideAfter: i.widget.child.length == 0 }])
              }, [
                s(v, {
                  list: i.widget.child,
                  "item-key": "id",
                  "ghost-class": "ghost",
                  group: "dragGroup",
                  animation: "300",
                  tag: "div",
                  "component-data": {
                    name: "fade",
                    class: "transition-group container tabpane-label"
                  },
                  handle: ".drag-handler",
                  onAdd: d.onDragAdd,
                  move: d.onMove
                }, {
                  item: r(({ element: y }) => [
                    h("div", Oe, [
                      h("div", {
                        class: T(["el-tabs__item", { "is-active": y.isActive }]),
                        onClick: R((u) => d.selectTabpane(y.id), ["stop"])
                      }, E(y.name), 11, He)
                    ])
                  ]),
                  _: 1
                }, 8, ["list", "onAdd", "move"])
              ], 2)
            ]),
            i.widget.child.length > 0 ? (o(), p("div", Ge, [
              s(c, {
                preViewData: i.widget,
                designer: i.designer
              }, null, 8, ["preViewData", "designer"])
            ])) : _("", !0)
          ]))
        ]),
        _: 1
      })
    ]),
    _: 1
  }, 8, ["designer", "widget"]);
}
const Ye = /* @__PURE__ */ x(Ae, [["render", ze], ["__scopeId", "data-v-02273c28"]]);
const je = { class: "form-widget-list" }, Fe = {
  __name: "index",
  props: {
    designer: Object,
    preViewData: Object
  },
  emits: ["update:designer", "update:preViewData"],
  setup(e, { emit: t }) {
    const i = e;
    let l = N(i, "designer", t), n = N(i, "preViewData", t);
    const d = F(() => {
      let u = "transition-group grid";
      return n.value.mode === "horizontal" && n.value.child.length > 0 && (u += " horizontal"), {
        name: "fade",
        class: u
      };
    }), c = F(() => {
      let u = {};
      return n.value.mode === "horizontal" && n.value.child.length > 0 && (u = { width: parseInt(100 / n.value.child.length) - 0.5 + "%" }), u;
    }), v = (u) => {
      let a = u.item._underlying_vm_;
      l.value.newWidgetInitConfig(n.value.id, "layout", a);
    }, C = (u) => {
      l.value.emitHistoryChange();
    }, b = (u) => l.value.checkWidgetMove(u), y = (u) => n.value.mode == "tab" ? !!u.isActive : !0;
    return (u, a) => (o(), p("div", je, [
      s(D(S), {
        list: D(n).child,
        "item-key": "id",
        "ghost-class": "ghost",
        group: "dragGroup",
        animation: "300",
        tag: "div",
        "component-data": d.value,
        handle: ".drag-handler",
        onAdd: v,
        onUpdate: C,
        move: b
      }, {
        item: r(({ element: m }) => [
          ee(h("div", {
            class: "transition-group-el",
            style: A(c.value)
          }, [
            m.gridData && (m.gridData.type === "GRID" || m.gridData.type === "TREE" || m.gridData.type === "TREE_STRUCTURE" || m.gridData.type === "EDIT_GRID") ? (o(), f(X, {
              key: 0,
              designer: D(l),
              widget: m,
              parentWidget: D(n).child
            }, null, 8, ["designer", "widget", "parentWidget"])) : m.gridData && m.gridData.type === "FORM" ? (o(), f(J, {
              key: 1,
              designer: D(l),
              widget: m,
              parentWidget: D(n).child
            }, null, 8, ["designer", "widget", "parentWidget"])) : m.mode == "horizontal" || m.mode === "vertical" || m.mode == "tab" ? (o(), f(Ye, {
              key: 2,
              designer: D(l),
              widget: m,
              parentWidget: D(n).child
            }, null, 8, ["designer", "widget", "parentWidget"])) : _("", !0)
          ], 4), [
            [te, y(m)]
          ])
        ]),
        _: 1
      }, 8, ["list", "component-data"])
    ]));
  }
}, Ne = /* @__PURE__ */ x(Fe, [["__scopeId", "data-v-48225462"]]), Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: Ne
}, Symbol.toStringTag, { value: "Module" }));
export {
  Ne as default
};
