"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                                                               */
;/* empty css                                                             */
require("../../../../node_modules/element-plus/theme-chalk/el-tab-pane.css.js");
;/* empty css                                                              */
;/* empty css                                                                  */
;/* empty css                                                               */
;/* empty css                                                               */
;/* empty css                                                             */
;/* empty css                                                                  */
;/* empty css                                                               */
;/* empty css                                                                     */
;/* empty css                                                                 */
require("../../../../node_modules/element-plus/theme-chalk/el-dropdown-menu.css.js");
require("../../../../node_modules/element-plus/theme-chalk/el-dropdown-item.css.js");
const Vue = require("vue");
const index$5 = ;/* empty css                      */
const defaultProcessData = require("../eventFlow/defaultProcessData.js");
const common = require("../utils/common.js");
;/* empty css           */
const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.js");
const index = require("../../../../node_modules/element-plus/es/components/dialog/index.js");
const index$1 = require("../../../../node_modules/element-plus/es/components/container/index.js");
const index$2 = require("../../../../node_modules/element-plus/es/components/dropdown/index.js");
const index$3 = require("../../../../node_modules/element-plus/es/components/icon/index.js");
const index$4 = require("../../../../node_modules/element-plus/es/components/tabs/index.js");
const index$6 = require("../../../../node_modules/element-plus/es/components/button/index.js");
const index$7 = require("../../../../node_modules/element-plus/es/components/message/index.js");
const _hoisted_1 = { class: "el-dropdown-link" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = { class: "event-title" };
const _hoisted_4 = { class: "event-method" };
const _hoisted_5 = { class: "el-dropdown-link" };
const _hoisted_6 = { class: "event-name" };
const _hoisted_7 = { class: "event-label" };
const _hoisted_8 = { class: "tab-content" };
const _hoisted_9 = {
  key: 1,
  class: "empty-selection"
};
const _hoisted_10 = { class: "dialog-footer" };
const _sfc_main = {
  __name: "index",
  props: /* @__PURE__ */ Vue.mergeModels({
    eventConfig: Object,
    title: {
      type: String,
      default: "事件配置"
    },
    onConfirm: Function
  }, {
    "modelValue": { required: true },
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const dialogVisible = Vue.useModel(__props, "modelValue");
    const props = __props;
    const createEventFlow = () => JSON.parse(JSON.stringify(defaultProcessData.default));
    const eventData = Vue.ref([
      { name: "Click", description: "点击时触发", eventFlow: createEventFlow() },
      {
        name: "Change",
        description: "当绑定值变化时触发",
        eventFlow: createEventFlow()
      },
      {
        name: "Input",
        description: "当绑定值变化时触发",
        eventFlow: createEventFlow()
      },
      { name: "Blur", description: "失去焦点时触发", eventFlow: createEventFlow() },
      {
        name: "Focus",
        description: "获得焦点时触发",
        eventFlow: createEventFlow()
      },
      {
        name: "Clear",
        description: "在点击清空按钮时触发",
        eventFlow: createEventFlow()
      }
    ]);
    const selectedEvents = Vue.ref([]);
    const activeEventIndex = Vue.ref(-1);
    Vue.watch(dialogVisible, (val) => {
      if (val) {
        selectedEvents.value = common.cloneDeep(props.eventConfig) || [];
        if (selectedEvents.value.length > 0) {
          activeEventIndex.value = 0;
        }
      }
    });
    const activeTab = Vue.ref("eventFlow");
    const eventFlowRefs = Vue.ref({});
    const availableEventTypes = Vue.computed(() => {
      return eventData.value;
    });
    const handleChangeEventType = (index2, newEventName) => {
      const eventType = eventData.value.find((e) => e.name === newEventName);
      if (eventType) {
        const isAlreadySelected = selectedEvents.value.some(
          (event, i) => i !== index2 && event.name === newEventName
        );
        if (isAlreadySelected) {
          index$7.ElMessage.warning(`事件类型 "${newEventName}" 已被选择，请选择其他类型`);
          return;
        }
        const currentEvent = selectedEvents.value[index2];
        const newEvent = {
          name: eventType.name,
          description: eventType.description,
          eventFlow: currentEvent.eventFlow
          // 保留原有的流程配置
        };
        selectedEvents.value.splice(index2, 1, newEvent);
      }
    };
    const validationErrors = Vue.ref({});
    const setEventFlowRef = (el, index2) => {
      if (el) {
        eventFlowRefs.value[index2] = el;
      }
    };
    const validateAllEventFlows = async () => {
      var _a;
      validationErrors.value = {};
      const errors = [];
      for (const [index2, ref] of Object.entries(eventFlowRefs.value)) {
        try {
          if (ref == null ? void 0 : ref.validate) {
            await ref.validate();
          }
        } catch (error) {
          validationErrors.value[index2] = true;
          errors.push({
            event: (_a = selectedEvents.value[index2]) == null ? void 0 : _a.name,
            errors: error
          });
        }
      }
      if (errors.length > 0) {
        throw errors;
      }
    };
    const isEventSelected = (eventName) => {
      return selectedEvents.value.some((e) => e.name === eventName);
    };
    const handleAddEvent = (event) => {
      const exists = selectedEvents.value.some((e) => e.name === event.name);
      if (!exists) {
        selectedEvents.value.push({
          name: event.name,
          description: event.description,
          eventFlow: createEventFlow()
        });
        activeEventIndex.value = selectedEvents.value.length - 1;
        activeTab.value = "eventFlow";
      }
    };
    const handleRemoveEvent = (index2) => {
      selectedEvents.value.splice(index2, 1);
      delete eventFlowRefs.value[index2];
      if (activeEventIndex.value === index2) {
        activeEventIndex.value = -1;
        activeTab.value = "eventFlow";
      } else if (activeEventIndex.value > index2) {
        activeEventIndex.value--;
      }
    };
    const onConfirm = async () => {
      try {
        if (activeTab.value === "eventFlow") {
          await validateAllEventFlows();
        }
        props.onConfirm && props.onConfirm(common.cloneDeep(selectedEvents.value));
        dialogVisible.value = false;
      } catch (errors) {
        console.error("事件流校验失败:", errors);
        const eventNames = errors.map((e) => e.event).join("、");
        index$7.ElMessage.error(`请完善 ${eventNames} 的事件配置`);
      }
    };
    return (_ctx, _cache) => {
      const _component_arrow_down = Vue.resolveComponent("arrow-down");
      const _component_el_icon = index$3.ElIcon;
      const _component_el_dropdown_item = index$2.ElDropdownItem;
      const _component_el_dropdown_menu = index$2.ElDropdownMenu;
      const _component_el_dropdown = index$2.ElDropdown;
      const _component_el_header = index$1.ElHeader;
      const _component_Delete = Vue.resolveComponent("Delete");
      const _component_el_main = index$1.ElMain;
      const _component_el_container = index$1.ElContainer;
      const _component_el_aside = index$1.ElAside;
      const _component_el_tab_pane = index$4.ElTabPane;
      const _component_el_tabs = index$4.ElTabs;
      const _component_el_button = index$6.ElButton;
      const _component_el_dialog = index.ElDialog;
      return Vue.openBlock(), Vue.createBlock(_component_el_dialog, {
        modelValue: dialogVisible.value,
        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dialogVisible.value = $event),
        width: "70%",
        title: __props.title,
        draggable: "",
        overflow: "",
        "append-to-body": "",
        class: "fec-dev-designer-dialog"
      }, {
        footer: Vue.withCtx(() => [
          Vue.createElementVNode("div", _hoisted_10, [
            Vue.createVNode(_component_el_button, {
              onClick: _cache[1] || (_cache[1] = ($event) => dialogVisible.value = false)
            }, {
              default: Vue.withCtx(() => _cache[6] || (_cache[6] = [
                Vue.createTextVNode("取消")
              ])),
              _: 1
            }),
            Vue.createVNode(_component_el_button, {
              type: "primary",
              onClick: onConfirm
            }, {
              default: Vue.withCtx(() => _cache[7] || (_cache[7] = [
                Vue.createTextVNode(" 确定 ")
              ])),
              _: 1
            })
          ])
        ]),
        default: Vue.withCtx(() => [
          Vue.createVNode(_component_el_container, { style: { "border": "1px solid #ebeef5", "border-radius": "4px" } }, {
            default: Vue.withCtx(() => [
              Vue.createVNode(_component_el_aside, { width: "300px" }, {
                default: Vue.withCtx(() => [
                  Vue.createVNode(_component_el_container, { style: { "height": "600px" } }, {
                    default: Vue.withCtx(() => [
                      Vue.createVNode(_component_el_header, {
                        height: "40px",
                        style: { "background-color": "#f2f2f2" }
                      }, {
                        default: Vue.withCtx(() => [
                          Vue.createVNode(_component_el_dropdown, {
                            "max-height": 500,
                            trigger: "click",
                            placement: "bottom-start",
                            style: { "height": "100%" }
                          }, {
                            dropdown: Vue.withCtx(() => [
                              Vue.createVNode(_component_el_dropdown_menu, null, {
                                default: Vue.withCtx(() => [
                                  (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(eventData.value, (event) => {
                                    return Vue.openBlock(), Vue.createBlock(_component_el_dropdown_item, {
                                      key: event.name,
                                      disabled: isEventSelected(event.name),
                                      onClick: ($event) => handleAddEvent(event)
                                    }, {
                                      default: Vue.withCtx(() => [
                                        Vue.createElementVNode("div", null, [
                                          Vue.createElementVNode("span", null, Vue.toDisplayString(event.name), 1),
                                          Vue.createElementVNode("span", null, Vue.toDisplayString(event.description), 1)
                                        ])
                                      ]),
                                      _: 2
                                    }, 1032, ["disabled", "onClick"]);
                                  }), 128))
                                ]),
                                _: 1
                              })
                            ]),
                            default: Vue.withCtx(() => [
                              Vue.createElementVNode("span", _hoisted_1, [
                                _cache[3] || (_cache[3] = Vue.createTextVNode(" 新增事件 ")),
                                Vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
                                  default: Vue.withCtx(() => [
                                    Vue.createVNode(_component_arrow_down)
                                  ]),
                                  _: 1
                                })
                              ])
                            ]),
                            _: 1
                          })
                        ]),
                        _: 1
                      }),
                      Vue.createVNode(_component_el_main, { style: { "padding": "10px" } }, {
                        default: Vue.withCtx(() => [
                          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(selectedEvents.value, (event, index2) => {
                            return Vue.openBlock(), Vue.createElementBlock("div", {
                              key: index2,
                              class: Vue.normalizeClass([
                                "event-menu-item",
                                {
                                  "is-active": activeEventIndex.value === index2,
                                  "is-error": validationErrors.value[index2]
                                }
                              ]),
                              onClick: ($event) => activeEventIndex.value = index2
                            }, [
                              Vue.createElementVNode("div", _hoisted_3, [
                                Vue.createElementVNode("div", _hoisted_4, [
                                  Vue.createVNode(_component_el_dropdown, {
                                    "max-height": 500,
                                    trigger: "click",
                                    placement: "bottom-start",
                                    onCommand: (command) => handleChangeEventType(index2, command)
                                  }, {
                                    dropdown: Vue.withCtx(() => [
                                      Vue.createVNode(_component_el_dropdown_menu, null, {
                                        default: Vue.withCtx(() => [
                                          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(availableEventTypes.value, (eventType) => {
                                            return Vue.openBlock(), Vue.createBlock(_component_el_dropdown_item, {
                                              key: eventType.name,
                                              disabled: eventType.name === event.name,
                                              command: eventType.name
                                            }, {
                                              default: Vue.withCtx(() => [
                                                Vue.createElementVNode("div", null, [
                                                  Vue.createElementVNode("span", null, Vue.toDisplayString(eventType.name), 1),
                                                  Vue.createElementVNode("span", null, Vue.toDisplayString(eventType.description), 1)
                                                ])
                                              ]),
                                              _: 2
                                            }, 1032, ["disabled", "command"]);
                                          }), 128))
                                        ]),
                                        _: 2
                                      }, 1024)
                                    ]),
                                    default: Vue.withCtx(() => [
                                      Vue.createElementVNode("span", _hoisted_5, [
                                        _cache[4] || (_cache[4] = Vue.createTextVNode(" function ")),
                                        Vue.createElementVNode("span", _hoisted_6, Vue.toDisplayString(event.name), 1),
                                        Vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
                                          default: Vue.withCtx(() => [
                                            Vue.createVNode(_component_arrow_down)
                                          ]),
                                          _: 1
                                        })
                                      ])
                                    ]),
                                    _: 2
                                  }, 1032, ["onCommand"]),
                                  Vue.createElementVNode("span", _hoisted_7, Vue.toDisplayString(event.description), 1)
                                ]),
                                Vue.createVNode(_component_el_icon, {
                                  class: "delete-icon",
                                  onClick: ($event) => handleRemoveEvent(index2)
                                }, {
                                  default: Vue.withCtx(() => [
                                    Vue.createVNode(_component_Delete)
                                  ]),
                                  _: 2
                                }, 1032, ["onClick"])
                              ])
                            ], 10, _hoisted_2);
                          }), 128))
                        ]),
                        _: 1
                      })
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              }),
              Vue.createVNode(_component_el_main, { style: { "border-left": "1px solid #ebeef5", "padding": "0" } }, {
                default: Vue.withCtx(() => [
                  activeEventIndex.value !== -1 ? (Vue.openBlock(), Vue.createBlock(_component_el_tabs, {
                    key: 0,
                    modelValue: activeTab.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTab.value = $event),
                    class: "event-tabs"
                  }, {
                    default: Vue.withCtx(() => [
                      Vue.createVNode(_component_el_tab_pane, {
                        label: "事件流",
                        name: "eventFlow"
                      }, {
                        default: Vue.withCtx(() => [
                          Vue.createElementVNode("div", _hoisted_8, [
                            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(selectedEvents.value, (event, index2) => {
                              return Vue.openBlock(), Vue.createBlock(index$5.default, {
                                key: index2,
                                ref_for: true,
                                ref: (el) => setEventFlowRef(el, index2),
                                process: event.eventFlow,
                                style: Vue.normalizeStyle({
                                  display: activeEventIndex.value === index2 ? "block" : "none"
                                })
                              }, null, 8, ["process", "style"]);
                            }), 128))
                          ])
                        ]),
                        _: 1
                      }),
                      Vue.createVNode(_component_el_tab_pane, {
                        label: "自定义",
                        name: "custom"
                      }, {
                        default: Vue.withCtx(() => _cache[5] || (_cache[5] = [
                          Vue.createElementVNode("div", { class: "tab-content" }, [
                            Vue.createElementVNode("div", { class: "custom-code-area" }, " 自定义 ")
                          ], -1)
                        ])),
                        _: 1
                      })
                    ]),
                    _: 1
                  }, 8, ["modelValue"])) : (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_9, "请从左侧选择一个事件"))
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["modelValue", "title"]);
    };
  }
};
const EventConfig = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-64aef55e"]]);
exports.default = EventConfig;
