import { defineAsyncComponent as n, defineComponent as D, ref as S, onActivated as _, watch as x, createVNode as e, resolveComponent as t, createTextVNode as E, isVNode as V } from "vue";
import { ElCollapse as I, ElCollapseItem as N, ElInput as P } from "element-plus";
import { useResolveVnode as a, useGetCompNode as h, useGetCompRefProps as j } from "@klweb/compose-app-engine";
import { j as u, k as w, a8 as b, i as k } from "./main-DXvReGBc.js";
const K = n({
  loader: () => import("./LayoutSetter-DRKUy9NK.js"),
  loadingComponent: u
}), U = n({
  loader: () => import("./WidthSetter-C27I77zi.js"),
  loadingComponent: u
}), G = n({
  loader: () => import("./HeightSetter-CEIrffwE.js"),
  loadingComponent: u
}), L = n({
  loader: () => import("./MarginPaddingSetter-DoILcWTu.js"),
  loadingComponent: u
}), O = n({
  loader: () => import("./PositionSetter-DhgCbmlP.js"),
  loadingComponent: u
}), R = n({
  loader: () => import("./BorderSetter-BHEPDwHe.js"),
  loadingComponent: u
}), T = n({
  loader: () => import("./BorderRadiusSetter-DIWF4COO.js"),
  loadingComponent: u
}), A = n({
  loader: () => import("./CustomStyleSlotTitle-BECDPG7s.js"),
  loadingComponent: u
});
function m(s) {
  return typeof s == "function" || Object.prototype.toString.call(s) === "[object Object]" && !V(s);
}
const z = /* @__PURE__ */ D({
  name: "KlStyleSetter",
  components: {
    ElCollapse: I,
    ElCollapseItem: N,
    ElInput: P,
    CustomStyleSlotTitle: A
  },
  props: {
    compId: {
      type: String,
      default: ""
    }
  },
  setup(s) {
    const v = window.KlComposeAppEngineEditor, C = S({}), o = S({}), g = async () => {
      const l = h(s.compId);
      if (!l) return;
      const i = l.styles ? null : await j(s.compId), d = (i == null ? void 0 : i.styles) || {};
      l.styles = k(l.styles ?? d), o.value = l.styles;
      const p = v == null ? void 0 : v.document.querySelector(`[comp-id="${s.compId}"]`), r = p ? p.parentElement : null, c = r ? getComputedStyle(r) : {}, {
        display: y,
        flexDirection: f
      } = c;
      C.value = {
        display: y,
        flexDirection: f
      };
    };
    g();
    const F = S(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]), B = S(`
        {
            'padding-left': '20px',
            'padding-right': '20px'
        }`);
    return _(() => g()), x([w, b], () => {
      g();
    }), () => {
      let l, i, d, p, r, c, y;
      return e(t("el-collapse"), {
        class: "kl-editor-setter__collapse",
        modelValue: F.value,
        "onUpdate:modelValue": (f) => F.value = f
      }, {
        default: () => [e(t("el-collapse-item"), {
          title: "布局",
          name: "1"
        }, m(l = a(K, {
          parentStyles: C.value,
          styles: o.value
        })) ? l : {
          default: () => [l]
        }), e(t("el-collapse-item"), {
          title: "宽度",
          name: "2"
        }, m(i = a(U, {
          parentStyles: C.value,
          styles: o.value
        })) ? i : {
          default: () => [i]
        }), e(t("el-collapse-item"), {
          title: "高度",
          name: "3"
        }, m(d = a(G, {
          parentStyles: C.value,
          styles: o.value
        })) ? d : {
          default: () => [d]
        }), e(t("el-collapse-item"), {
          title: "边距",
          name: "4"
        }, m(p = a(L, {
          styles: o.value
        })) ? p : {
          default: () => [p]
        }), e(t("el-collapse-item"), {
          title: "位置",
          name: "5"
        }, m(r = a(O, {
          styles: o.value
        })) ? r : {
          default: () => [r]
        }), e(t("el-collapse-item"), {
          title: "边框",
          name: "6"
        }, m(c = a(R, {
          styles: o.value
        })) ? c : {
          default: () => [c]
        }), e(t("el-collapse-item"), {
          title: "圆角",
          name: "7"
        }, m(y = a(T, {
          styles: o.value
        })) ? y : {
          default: () => [y]
        }), e(t("el-collapse-item"), {
          title: "背景",
          name: "8"
        }, {
          default: () => [E("待接入背景设置器...")]
        }), e(t("el-collapse-item"), {
          title: "文字",
          name: "9"
        }, {
          default: () => [E("待接入文字设置器...")]
        }), e(t("el-collapse-item"), {
          title: "阴影",
          name: "10"
        }, {
          default: () => [E("待接入阴影设置器...")]
        }), e(t("el-collapse-item"), {
          title: "高级",
          name: "11"
        }, {
          default: () => [E("待接入高级设置器...")]
        }), e(t("el-collapse-item"), {
          name: "12"
        }, {
          default: () => [e(t("el-input"), {
            modelValue: B.value,
            "onUpdate:modelValue": (f) => B.value = f,
            rows: 6,
            type: "textarea",
            placeholder: "Please input"
          }, null)],
          title: () => a(A)
        })]
      });
    };
  }
});
export {
  z as default
};
