import { defineComponent as E, ref as a, watch as p, createVNode as n, resolveComponent as l, Fragment as d, nextTick as m, withModifiers as V } from "vue";
import { ElIcon as b, ElTree as y, ElInput as R, ElTooltip as x } from "element-plus";
import { compTree as f } from "@klweb/compose-app-engine";
import { k as _, s as C, T as g, v as T, w, x as D, A as i, y as N, h as P } from "./main-DXvReGBc.js";
import { e as M } from "./index-ClGUov3E.js";
const c = {
  "outline-tree-container": "_outline-tree-container_vkpqr_1",
  "custom-node-icon": "_custom-node-icon_vkpqr_11",
  "outline-tree__head": "_outline-tree__head_vkpqr_22",
  "tree-node-action-icon": "_tree-node-action-icon_vkpqr_32"
}, {
  IconSearch: A,
  IconVisible: S,
  IconHidden: L,
  IconDel: q,
  IconRename: B,
  IconPageSub: H,
  IconLayout: K,
  IconComponentSub: O
} = M, j = /* @__PURE__ */ E({
  name: "KlEditorOutlinePanel",
  components: {
    ElIcon: b,
    ElTree: y,
    ElInput: R,
    ElTooltip: x,
    IconVisible: S,
    IconHidden: L,
    IconDel: q,
    IconRename: B,
    IconPageSub: H,
    IconLayout: K,
    IconComponentSub: O
  },
  inheritAttrs: !1,
  setup() {
    const t = a(), r = a(""), k = {
      label: "name",
      children: "children"
    }, h = (e, o) => e ? o.name.includes(e) : !0, I = (e, o, s) => {
      switch (o.data.type) {
        case "page":
          return s === "inner";
        case "component":
          return s !== "inner";
        default:
          return !0;
      }
    }, v = (e) => {
      const o = e || void 0;
      m(() => {
        t.value && t.value.setCurrentKey(o);
      });
    }, u = (e) => {
      P(e.compId), (!e.isVisible || !e.isRender) && (_.value = e.compId);
    };
    return p([_, C, f], ([e]) => {
      v(e);
    }, {
      deep: !0,
      immediate: !0
    }), p(r, (e) => {
      t.value && t.value.filter(e);
    }), () => n("section", {
      class: c["outline-tree-container"]
    }, [n("section", {
      class: c["outline-tree__head"]
    }, [n(l("el-input"), {
      modelValue: r.value,
      "onUpdate:modelValue": (e) => r.value = e,
      "prefix-icon": A,
      placeholder: g.TREE_NODE_SEARCH_PLACEHOLDER,
      clearable: !0
    }, null)]), n(l("el-tree"), {
      key: C.value,
      data: f.value,
      "filter-node-method": h,
      ref: t,
      props: k,
      "node-key": "compId",
      "expand-on-click-node": !1,
      "default-expand-all": !0,
      indent: 12,
      draggable: !0,
      "allow-drop": I
    }, {
      default: ({
        data: e
      }) => n("span", {
        class: "custom-tree-node"
      }, [e.isRename ? n(d, null, [n("span", null, [n(l("el-input"), {
        size: "small",
        modelValue: e.name,
        "onUpdate:modelValue": (o) => e.name = o,
        onBlur: () => e.isRename = !1
      }, null)]), n("span", null, null)]) : n(d, null, [n("span", {
        title: e.name,
        style: !e.isVisible || !e.isRender ? {
          opacity: ".55",
          textDecorationLine: e.isRender ? "" : "line-through"
        } : "",
        onClick: () => u(e),
        onMouseover: () => T(2, e),
        onMouseleave: () => w(2),
        onContextmenu: (o) => {
          o.preventDefault(), u(e), m(() => {
            D(o.clientX, o.clientY, e);
          });
        }
      }, [n(l("el-icon"), {
        class: c["custom-node-icon"]
      }, {
        default: () => [e.type === "page" ? n(l("icon-page-sub"), null, null) : e.type === "container" ? n(l("icon-layout"), null, null) : n(l("icon-component-sub"), null, null)]
      }), e.name]), n("span", {
        class: c["tree-node-action-icon"],
        onClick: V(() => {
        }, ["stop"])
      }, [n(l("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "hide-after": 0,
        content: e.isVisible ? i.HIDDEN : i.VISIBLE
      }, {
        default: () => [e.isVisible ? n(l("el-icon"), {
          onClick: () => e.isVisible = !1
        }, {
          default: () => [n(l("icon-hidden"), null, null)]
        }) : n(l("el-icon"), {
          onClick: () => e.isVisible = !0
        }, {
          default: () => [n(l("icon-visible"), null, null)]
        })]
      }), n(l("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "hide-after": 0,
        content: i.RENAME
      }, {
        default: () => [n(l("el-icon"), {
          onClick: () => e.isRename = !0
        }, {
          default: () => [n(l("icon-rename"), null, null)]
        })]
      }), n(l("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "hide-after": 0,
        content: i.REMOVE
      }, {
        default: () => [e.type === "page" ? n(l("el-icon"), {
          class: "icon-disabled"
        }, {
          default: () => [n(l("icon-del"), null, null)]
        }) : n(l("el-icon"), {
          onClick: () => N(e.compId)
        }, {
          default: () => [n(l("icon-del"), null, null)]
        })]
      })])])])
    })]);
  }
});
export {
  j as default
};
