import "../../../../node_modules/element-plus/es/index.mjs";
/* empty css                                                          */
/* empty css                                                                */
/* empty css                                                               */
/* empty css                                                               */
/* empty css                                                             */
import "../../../../node_modules/element-plus/theme-chalk/el-tab-pane.css.mjs";
/* empty css                                                              */
/* empty css                                                                  */
/* empty css                                                               */
/* empty css                                                               */
/* empty css                                                             */
import { useModel, computed, ref, watch, resolveComponent, createBlock, openBlock, withCtx, createVNode, createElementVNode, createElementBlock, Fragment, renderList, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from "vue";
import _sfc_main$1 from "../eventFlow/index.vue.mjs";
import defaultProcessData from "../eventFlow/defaultProcessData.mjs";
import { getEditConfigData, cloneDeep } from "../utils/common.mjs";
/* empty css                                                              */
/* empty css                                                                */
/* empty css                */
import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.mjs";
import { ElDialog } from "../../../../node_modules/element-plus/es/components/dialog/index.mjs";
import { ElContainer, ElAside, ElHeader, ElMain } from "../../../../node_modules/element-plus/es/components/container/index.mjs";
import { ElIcon } from "../../../../node_modules/element-plus/es/components/icon/index.mjs";
import { ElTabs, ElTabPane } from "../../../../node_modules/element-plus/es/components/tabs/index.mjs";
import { ElButton } from "../../../../node_modules/element-plus/es/components/button/index.mjs";
import { ElMessage } from "../../../../node_modules/element-plus/es/components/message/index.mjs";
const _hoisted_1 = ["onClick"];
const _hoisted_2 = { class: "event-title" };
const _hoisted_3 = { class: "event-method" };
const _hoisted_4 = { class: "event-label" };
const _hoisted_5 = { class: "tab-content" };
const _hoisted_6 = { class: "dialog-footer" };
const _sfc_main = {
  __name: "pageEvent",
  props: {
    "modelValue": { required: true },
    "modelModifiers": {}
  },
  emits: ["update:modelValue"],
  setup(__props) {
    const dialogVisible = useModel(__props, "modelValue");
    const editConfigData = computed(() => {
      return getEditConfigData();
    });
    const createEventFlow = () => JSON.parse(JSON.stringify(defaultProcessData));
    const pageEvents = ref([
      {
        name: "onCreated",
        description: "页面加载时触发",
        eventFlow: createEventFlow()
      },
      {
        name: "onUnmounted",
        description: "页面卸载后触发",
        eventFlow: createEventFlow()
      }
    ]);
    const activeEventIndex = ref(0);
    const activeTab = ref("eventFlow");
    const eventFlowRefs = ref({});
    const validationErrors = ref({});
    watch(dialogVisible, (val) => {
      if (val) {
        pageEvents.value = cloneDeep(
          editConfigData.value.pageEventConfig || pageEvents.value
        );
        if (pageEvents.value.length > 0) {
          activeEventIndex.value = 0;
        }
      }
    });
    const setEventFlowRef = (el, index) => {
      if (el) {
        eventFlowRefs.value[index] = el;
      }
    };
    const validateAllEventFlows = async () => {
      var _a;
      validationErrors.value = {};
      const errors = [];
      for (const [index, ref2] of Object.entries(eventFlowRefs.value)) {
        try {
          if (ref2 == null ? void 0 : ref2.validate) {
            await ref2.validate();
          }
        } catch (error) {
          validationErrors.value[index] = true;
          errors.push({
            event: (_a = pageEvents.value[index]) == null ? void 0 : _a.name,
            errors: error
          });
        }
      }
      if (errors.length > 0) {
        throw errors;
      }
    };
    const handleRemoveEvent = (index) => {
      pageEvents.value[index].eventFlow = createEventFlow();
    };
    const onConfirm = async () => {
      try {
        if (activeTab.value === "eventFlow") {
          await validateAllEventFlows();
        }
        editConfigData.value.pageEventConfig = cloneDeep(pageEvents.value);
        dialogVisible.value = false;
      } catch (errors) {
        console.error("事件流校验失败:", errors);
        const eventNames = errors.map((e) => e.event).join("、");
        ElMessage.error(`请完善 ${eventNames} 的事件配置`);
      }
    };
    return (_ctx, _cache) => {
      const _component_el_header = ElHeader;
      const _component_Delete = resolveComponent("Delete");
      const _component_el_icon = ElIcon;
      const _component_el_main = ElMain;
      const _component_el_container = ElContainer;
      const _component_el_aside = ElAside;
      const _component_el_tab_pane = ElTabPane;
      const _component_el_tabs = ElTabs;
      const _component_el_button = ElButton;
      const _component_el_dialog = ElDialog;
      return openBlock(), createBlock(_component_el_dialog, {
        modelValue: dialogVisible.value,
        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dialogVisible.value = $event),
        width: "70%",
        title: "页面事件配置",
        draggable: "",
        overflow: "",
        "append-to-body": "",
        class: "fec-dev-designer-dialog"
      }, {
        footer: withCtx(() => [
          createElementVNode("div", _hoisted_6, [
            createVNode(_component_el_button, {
              onClick: _cache[1] || (_cache[1] = ($event) => dialogVisible.value = false)
            }, {
              default: withCtx(() => _cache[6] || (_cache[6] = [
                createTextVNode("取消")
              ])),
              _: 1
            }),
            createVNode(_component_el_button, {
              type: "primary",
              onClick: onConfirm
            }, {
              default: withCtx(() => _cache[7] || (_cache[7] = [
                createTextVNode(" 确定 ")
              ])),
              _: 1
            })
          ])
        ]),
        default: withCtx(() => [
          createVNode(_component_el_container, { style: { "border": "1px solid #ebeef5", "border-radius": "4px" } }, {
            default: withCtx(() => [
              createVNode(_component_el_aside, { width: "300px" }, {
                default: withCtx(() => [
                  createVNode(_component_el_container, { style: { "height": "600px" } }, {
                    default: withCtx(() => [
                      createVNode(_component_el_header, {
                        height: "40px",
                        style: { "background-color": "#f2f2f2" }
                      }, {
                        default: withCtx(() => _cache[3] || (_cache[3] = [
                          createElementVNode("span", { class: "dev-header-title" }, "页面生命周期", -1)
                        ])),
                        _: 1
                      }),
                      createVNode(_component_el_main, { style: { "padding": "10px" } }, {
                        default: withCtx(() => [
                          (openBlock(true), createElementBlock(Fragment, null, renderList(pageEvents.value, (event, index) => {
                            return openBlock(), createElementBlock("div", {
                              key: index,
                              class: normalizeClass([
                                "event-menu-item",
                                {
                                  "is-active": activeEventIndex.value === index,
                                  "is-error": validationErrors.value[index]
                                }
                              ]),
                              onClick: ($event) => activeEventIndex.value = index
                            }, [
                              createElementVNode("div", _hoisted_2, [
                                createElementVNode("div", _hoisted_3, [
                                  createElementVNode("span", null, [
                                    _cache[4] || (_cache[4] = createTextVNode("function ")),
                                    createElementVNode("span", null, toDisplayString(event.name), 1)
                                  ]),
                                  createElementVNode("span", _hoisted_4, toDisplayString(event.description), 1)
                                ]),
                                createVNode(_component_el_icon, {
                                  class: "delete-icon",
                                  onClick: ($event) => handleRemoveEvent(index)
                                }, {
                                  default: withCtx(() => [
                                    createVNode(_component_Delete)
                                  ]),
                                  _: 2
                                }, 1032, ["onClick"])
                              ])
                            ], 10, _hoisted_1);
                          }), 128))
                        ]),
                        _: 1
                      })
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              }),
              createVNode(_component_el_main, { style: { "border-left": "1px solid #ebeef5", "padding": "0" } }, {
                default: withCtx(() => [
                  activeEventIndex.value !== -1 ? (openBlock(), createBlock(_component_el_tabs, {
                    key: 0,
                    modelValue: activeTab.value,
                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTab.value = $event),
                    class: "event-tabs"
                  }, {
                    default: withCtx(() => [
                      createVNode(_component_el_tab_pane, {
                        label: "事件流",
                        name: "eventFlow"
                      }, {
                        default: withCtx(() => [
                          createElementVNode("div", _hoisted_5, [
                            (openBlock(true), createElementBlock(Fragment, null, renderList(pageEvents.value, (event, index) => {
                              return openBlock(), createBlock(_sfc_main$1, {
                                key: index,
                                ref_for: true,
                                ref: (el) => setEventFlowRef(el, index),
                                process: event.eventFlow,
                                style: normalizeStyle({
                                  display: activeEventIndex.value === index ? "block" : "none"
                                })
                              }, null, 8, ["process", "style"]);
                            }), 128))
                          ])
                        ]),
                        _: 1
                      }),
                      createVNode(_component_el_tab_pane, {
                        label: "自定义",
                        name: "custom"
                      }, {
                        default: withCtx(() => _cache[5] || (_cache[5] = [
                          createElementVNode("div", { class: "tab-content" }, [
                            createElementVNode("div", { class: "custom-code-area" }, " 自定义 ")
                          ], -1)
                        ])),
                        _: 1
                      })
                    ]),
                    _: 1
                  }, 8, ["modelValue"])) : createCommentVNode("", true)
                ]),
                _: 1
              })
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["modelValue"]);
    };
  }
};
const PageEvent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-824c7c40"]]);
export {
  PageEvent as default
};
