import { defineComponent as S, toRefs as k, reactive as V, computed as y, createVNode as i, resolveComponent as n, isVNode as W } from "vue";
import { ElForm as F, ElFormItem as G, ElButtonGroup as C, ElButton as E, ElSlider as j, ElTooltip as O } from "element-plus";
import { toKebabCase as T } from "@klweb/utils";
import { N as Y } from "./index-BRrmKl1s.js";
import { C as b } from "./index.module-DCp39l7Y.js";
function g(h) {
  return typeof h == "function" || Object.prototype.toString.call(h) === "[object Object]" && !W(h);
}
const A = /* @__PURE__ */ S({
  name: "KlHeightSetter",
  components: {
    ElForm: F,
    ElFormItem: G,
    ElButtonGroup: C,
    ElButton: E,
    ElSlider: j,
    ElTooltip: O,
    NumericUnitSetter: Y
  },
  props: {
    parentStyles: {
      type: Object,
      default: () => ({})
    },
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  setup(h) {
    const {
      styles: e,
      parentStyles: p
    } = k(h), m = V([{
      label: "高度类型",
      type: "heightType",
      children: [{
        label: "弹性",
        property: "flexGrow",
        value: 1,
        type: "flexHeight",
        tooltip: "弹性响应高度"
      }, {
        label: "继承",
        property: "height",
        value: "inherit",
        type: "inheritHeight",
        tooltip: "继承父元素高度值"
      }, {
        label: "固定",
        property: "height",
        value: "150px",
        type: "customHeight",
        tooltip: "自定义高度"
      }, {
        label: "自适应",
        property: "height",
        value: "auto",
        type: "fitHeight",
        tooltip: "跟随内容高度"
      }]
    }, {
      label: "弹性比例",
      property: "flexGrow",
      type: "flexRatio"
    }, {
      label: "缩小比例",
      property: "flexShrink",
      type: "flexRatio"
    }, {
      label: "高度值",
      property: "height",
      type: "heightValue"
    }, {
      label: "垂直溢出",
      type: "overflow",
      children: [{
        label: "显示",
        property: "overflowY",
        value: "visible",
        type: "yVisible",
        tooltip: "内容溢出显示: visible"
      }, {
        label: "滚动",
        property: "overflowY",
        value: "scroll",
        type: "yScroll",
        tooltip: "垂直滚动条: scroll"
      }, {
        label: "隐藏",
        property: "overflowY",
        value: "hidden",
        type: "yHidden",
        tooltip: "内容溢出被裁剪: hidden"
      }, {
        label: "自动",
        property: "overflowY",
        value: "auto",
        type: "yAuto",
        tooltip: "自动滚动条: auto"
      }]
    }, {
      label: "最大高度",
      property: "maxHeight",
      type: "heightValue"
    }, {
      label: "最小高度",
      property: "minHeight",
      type: "heightValue"
    }]), f = y({
      get() {
        return parseInt(e.value.flexGrow) || 0;
      },
      set(a) {
        e.value.flexGrow = a >= 0 ? a : 0;
      }
    }), c = y({
      get() {
        return parseInt(e.value.flexShrink) || 0;
      },
      set(a) {
        e.value.flexShrink = a >= 0 ? a : 0;
      }
    }), x = (a, r, u) => {
      const {
        flexGrow: s,
        height: o
      } = e.value, {
        display: t,
        flexDirection: l
      } = p.value;
      switch (u) {
        case "flexHeight":
          if (parseFloat(s) > 0) {
            delete e.value[a];
            return;
          }
          e.value[a] = r, e.value.height = "";
          break;
        case "inheritHeight":
        case "customHeight":
        case "fitHeight":
          if ((!(t != null && t.startsWith("flex")) || !(l != null && l.startsWith("column")) || !s || parseFloat(s) < 1) && (u === "inheritHeight" && o === "inherit" || u === "customHeight" && parseFloat(o) >= 0 || u === "fitHeight" && o === "auto")) {
            delete e.value[a];
            return;
          }
          l != null && l.startsWith("column") && (t != null && t.startsWith("flex") ? e.value.flexShrink = 0 : delete e.value.flexShrink, delete e.value.flex, delete e.value.flexBasis, delete e.value.flexGrow), e.value[a] = r;
          break;
        default:
          if (e.value[a] === r) {
            delete e.value[a];
            return;
          }
          e.value[a] = r;
          break;
      }
    }, H = (a) => {
      const {
        flexGrow: r,
        height: u,
        overflowY: s
      } = e.value, {
        display: o,
        flexDirection: t
      } = p.value;
      switch (a) {
        case "flexHeight":
          return (o == null ? void 0 : o.startsWith("flex")) && (t == null ? void 0 : t.startsWith("column")) && parseFloat(r) > 0;
        case "inheritHeight":
          return o != null && o.startsWith("flex") && (t != null && t.startsWith("column")) && parseFloat(r) > 0 ? !1 : u === "inherit";
        case "customHeight":
          return o != null && o.startsWith("flex") && (t != null && t.startsWith("column")) && parseFloat(r) > 0 ? !1 : parseFloat(u) >= 0;
        case "fitHeight":
          return o != null && o.startsWith("flex") && (t != null && t.startsWith("column")) && parseFloat(r) > 0 ? !1 : u === "auto";
        case "yVisible":
          return s === "visible";
        case "yScroll":
          return s === "scroll";
        case "yHidden":
          return s === "hidden";
        case "yAuto":
          return s === "auto";
        default:
          return !1;
      }
    };
    return () => {
      let a;
      return i(n("el-form"), {
        class: "kl-editor-setter__form",
        model: e.value,
        "label-width": "auto",
        "label-position": "left"
      }, g(a = m.map((r, u) => {
        var o, t;
        let s;
        switch (r.type) {
          case "heightType":
          case "overflow":
            return i(n("el-form-item"), {
              label: r.label,
              key: u
            }, {
              default: () => [i(n("el-button-group"), {
                class: b["button-group-icons"]
              }, g(s = r.children.map((l, w) => {
                var d, v;
                return (((d = p.value.display) == null ? void 0 : d.startsWith("flex")) && ((v = p.value.flexDirection) == null ? void 0 : v.startsWith("column")) || l.type !== "flexHeight") && i(n("el-tooltip"), {
                  effect: "dark",
                  placement: "top",
                  "hide-after": 0,
                  content: `<span>${l.tooltip}</span>`,
                  "raw-content": !0,
                  key: w
                }, {
                  default: () => [i(n("el-button"), {
                    plain: !0,
                    class: H(l.type) ? b.active : "",
                    onClick: () => x(l.property, l.value, l.type)
                  }, {
                    default: () => [l.label]
                  })]
                });
              })) ? s : {
                default: () => [s]
              })]
            });
          // 高度比例 
          case "flexRatio":
            return ((o = p.value.display) == null ? void 0 : o.startsWith("flex")) && ((t = p.value.flexDirection) == null ? void 0 : t.startsWith("column")) && i(n("el-form-item"), {
              label: r.label,
              key: u
            }, {
              default: () => [r.property === "flexGrow" ? i(n("el-slider"), {
                max: 24,
                modelValue: f.value,
                "onUpdate:modelValue": (l) => f.value = l,
                style: "padding: 0 12px 0 8px"
              }, null) : i(n("el-slider"), {
                max: 24,
                modelValue: c.value,
                "onUpdate:modelValue": (l) => c.value = l,
                style: "padding: 0 12px 0 8px"
              }, null)]
            });
          // 高度值   
          case "heightValue":
            return i(n("el-form-item"), {
              label: r.label,
              key: u
            }, {
              default: () => [i(n("numeric-unit-setter"), {
                min: 0,
                tooltip: `${T(r.property)}`,
                modelValue: e.value[r.property],
                "onUpdate:modelValue": (l) => e.value[r.property] = l
              }, null)]
            });
        }
      })) ? a : {
        default: () => [a]
      });
    };
  }
});
export {
  A as default
};
