import { defineComponent as k, toRefs as V, reactive as F, computed as b, createVNode as i, resolveComponent as n, isVNode as G } from "vue";
import { ElForm as g, ElFormItem as C, ElButtonGroup as E, ElButton as j, ElSlider as O, ElTooltip as T } from "element-plus";
import { ai as X } from "./main-Blxobku2.js";
import { N } from "./index-CJma-oCZ.js";
import { C as m } from "./index.module-DCp39l7Y.js";
function x(d) {
  return typeof d == "function" || Object.prototype.toString.call(d) === "[object Object]" && !G(d);
}
const H = /* @__PURE__ */ k({
  name: "KlWidthSetter",
  components: {
    ElForm: g,
    ElFormItem: C,
    ElButtonGroup: E,
    ElButton: j,
    ElSlider: O,
    ElTooltip: T,
    NumericUnitSetter: N
  },
  props: {
    parentStyles: {
      type: Object,
      default: () => ({})
    },
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  setup(d) {
    const {
      styles: e,
      parentStyles: p
    } = V(d), y = F([{
      label: "宽度类型",
      type: "widthType",
      children: [{
        label: "弹性",
        property: "flexGrow",
        value: 1,
        type: "flexWidth",
        tooltip: "弹性响应宽度"
      }, {
        label: "继承",
        property: "width",
        value: "inherit",
        type: "inheritWidth",
        tooltip: "继承父元素宽度值"
      }, {
        label: "固定",
        property: "width",
        value: "150px",
        type: "customWidth",
        tooltip: "自定义宽度"
      }, {
        label: "自适应",
        property: "width",
        value: "auto",
        type: "fitWidth",
        tooltip: "跟随内容宽度"
      }]
    }, {
      label: "弹性比例",
      property: "flexGrow",
      type: "flexRatio"
    }, {
      label: "缩小比例",
      property: "flexShrink",
      type: "flexRatio"
    }, {
      label: "宽度值",
      property: "width",
      type: "widthValue"
    }, {
      label: "水平溢出",
      type: "overflow",
      children: [{
        label: "显示",
        property: "overflowX",
        value: "visible",
        type: "xVisible",
        tooltip: "内容溢出显示: visible"
      }, {
        label: "滚动",
        property: "overflowX",
        value: "scroll",
        type: "xScroll",
        tooltip: "水平滚动条: scroll"
      }, {
        label: "隐藏",
        property: "overflowX",
        value: "hidden",
        type: "xHidden",
        tooltip: "内容溢出被裁剪: hidden"
      }, {
        label: "自动",
        property: "overflowX",
        value: "auto",
        type: "xAuto",
        tooltip: "自动滚动条: auto"
      }]
    }, {
      label: "最大宽度",
      property: "maxWidth",
      type: "widthValue"
    }, {
      label: "最小宽度",
      property: "minWidth",
      type: "widthValue"
    }]), f = b({
      get() {
        return parseInt(e.value.flexGrow) || 0;
      },
      set(a) {
        e.value.flexGrow = a >= 0 ? a : 0;
      }
    }), h = b({
      get() {
        return parseInt(e.value.flexShrink) || 0;
      },
      set(a) {
        e.value.flexShrink = a >= 0 ? a : 0;
      }
    }), W = (a, r, u) => {
      const {
        flexGrow: s,
        width: o
      } = e.value, {
        display: t,
        flexDirection: l
      } = p.value;
      switch (u) {
        case "flexWidth":
          if (parseFloat(s) > 0) {
            delete e.value[a];
            return;
          }
          e.value[a] = r, e.value.width = "";
          break;
        case "inheritWidth":
        case "customWidth":
        case "fitWidth":
          if ((!(t != null && t.startsWith("flex")) || l != null && l.startsWith("column") || !s || parseFloat(s) < 1) && (u === "inheritWidth" && o === "inherit" || u === "customWidth" && parseFloat(o) >= 0 || u === "fitWidth" && 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;
      }
    }, w = (a) => {
      const {
        flexGrow: r,
        width: u,
        overflowX: s
      } = e.value, {
        display: o,
        flexDirection: t
      } = p.value;
      switch (a) {
        case "flexWidth":
          return (o == null ? void 0 : o.startsWith("flex")) && !(t != null && t.startsWith("column")) && parseFloat(r) > 0;
        case "inheritWidth":
          return o != null && o.startsWith("flex") && !(t != null && t.startsWith("column")) && parseFloat(r) > 0 ? !1 : u === "inherit";
        case "customWidth":
          return o != null && o.startsWith("flex") && !(t != null && t.startsWith("column")) && parseFloat(r) > 0 ? !1 : parseFloat(u) >= 0;
        case "fitWidth":
          return o != null && o.startsWith("flex") && !(t != null && t.startsWith("column")) && parseFloat(r) > 0 ? !1 : u === "auto";
        case "xVisible":
          return s === "visible";
        case "xScroll":
          return s === "scroll";
        case "xHidden":
          return s === "hidden";
        case "xAuto":
          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"
      }, x(a = y.map((r, u) => {
        var o, t;
        let s;
        switch (r.type) {
          case "widthType":
          case "overflow":
            return i(n("el-form-item"), {
              label: r.label,
              key: u
            }, {
              default: () => [i(n("el-button-group"), {
                class: m["button-group-icons"]
              }, x(s = r.children.map((l, S) => {
                var c, v;
                return (((c = p.value.display) == null ? void 0 : c.startsWith("flex")) && !((v = p.value.flexDirection) != null && v.startsWith("column")) || l.type !== "flexWidth") && i(n("el-tooltip"), {
                  effect: "dark",
                  placement: "top",
                  "hide-after": 0,
                  content: `<span>${l.tooltip}</span>`,
                  "raw-content": !0,
                  key: S
                }, {
                  default: () => [i(n("el-button"), {
                    plain: !0,
                    class: w(l.type) ? m.active : "",
                    onClick: () => W(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 && 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: h.value,
                "onUpdate:modelValue": (l) => h.value = l,
                style: "padding: 0 12px 0 8px"
              }, null)]
            });
          // 宽度值   
          case "widthValue":
            return i(n("el-form-item"), {
              label: r.label,
              key: u
            }, {
              default: () => [i(n("numeric-unit-setter"), {
                min: 0,
                tooltip: `${X(r.property)}`,
                modelValue: e.value[r.property],
                "onUpdate:modelValue": (l) => e.value[r.property] = l
              }, null)]
            });
        }
      })) ? a : {
        default: () => [a]
      });
    };
  }
});
export {
  H as default
};
