'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var flexSplitLayout = require('./flex-split-layout.js');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlFlexSplitLayout" },
  __name: "flex-split-layout",
  props: flexSplitLayout.flexSplitLayoutProps,
  emits: [
    "update:leftCurrentWidth",
    "update:foldState",
    "handleFold"
  ],
  setup(__props, { expose: __expose, emit: __emit }) {
    const bem = createNamespace.createNamespace("flex-split-layout");
    const props = __props;
    const emits = __emit;
    const leftWidth = vue.ref(0);
    const isDragging = vue.ref(false);
    const startX = vue.ref(0);
    const startWidth = vue.ref(0);
    const dragLayoutRef = vue.ref();
    const leftPanelRef = vue.ref();
    const layoutWidth = vue.ref(0);
    const foldBtnRef = vue.ref();
    const showDragBtn = vue.computed(() => {
      return props.drag && props.isShowBtn && !(props.fold && foldState.value);
    });
    const preFoldWidth = vue.ref(0);
    const foldState = vue.computed({
      get: () => internalFoldState.value,
      set: (value) => {
        internalFoldState.value = value;
        emits("update:foldState", value);
        emits("handleFold", value);
      }
    });
    const internalFoldState = vue.ref(props.foldState || false);
    const initLayoutWidth = () => {
      leftWidth.value = props.leftCurrentWidth > 0 ? props.leftCurrentWidth : props.leftDefaultWidth > 0 ? props.leftDefaultWidth : 0;
      preFoldWidth.value = leftWidth.value;
    };
    const constrainBoundaries = () => {
      if (!dragLayoutRef.value) return;
      const leftMin = props.leftMinWidth;
      const leftMax = Math.max(0, props.leftMaxWidth);
      const rightMin = Math.max(0, props.rightMinWidth);
      layoutWidth.value = dragLayoutRef.value.clientWidth;
      if (layoutWidth.value < leftMin + rightMin) {
        const safeWidth = Math.max(0, layoutWidth.value - rightMin);
        leftWidth.value = Math.min(leftMax, safeWidth);
        return;
      }
      if (leftWidth.value < leftMin) {
        leftWidth.value = leftMin;
      }
      if (leftWidth.value > leftMax) {
        leftWidth.value = leftMax;
      }
      if (layoutWidth.value - leftWidth.value < rightMin) {
        leftWidth.value = Math.max(0, layoutWidth.value - rightMin);
      }
      leftWidth.value = Math.max(0, leftWidth.value);
    };
    const handleFold = (state) => {
      if (!props.fold) return;
      const newState = state !== void 0 ? state : !foldState.value;
      if (newState) {
        preFoldWidth.value = leftWidth.value;
        leftWidth.value = 0;
      } else {
        const targetWidth = preFoldWidth.value > 0 ? preFoldWidth.value : props.leftDefaultWidth;
        leftWidth.value = targetWidth;
        constrainBoundaries();
      }
      foldState.value = newState;
    };
    const startDrag = (e) => {
      if (!props.drag || foldState.value && props.fold) return;
      isDragging.value = true;
      startX.value = e.clientX;
      startWidth.value = leftPanelRef.value.offsetWidth;
      layoutWidth.value = dragLayoutRef.value.clientWidth;
      constrainBoundaries();
      window.addEventListener("mousemove", onDrag);
      window.addEventListener("mouseup", stopDrag);
    };
    const stopDrag = () => {
      isDragging.value = false;
      emits("update:leftCurrentWidth", leftWidth.value);
      preFoldWidth.value = leftWidth.value;
      removeListeners();
    };
    const onDrag = (e) => {
      if (!isDragging.value || !leftPanelRef.value) return;
      const currentLayoutWidth = dragLayoutRef.value.clientWidth;
      const safeLeftMin = props.leftMinWidth;
      const safeLeftMax = Math.max(0, props.leftMaxWidth);
      const safeRightMin = Math.max(0, props.rightMinWidth);
      const maxAllowedLeftWidth = Math.max(0, currentLayoutWidth - safeRightMin);
      const deltaX = e.clientX - startX.value;
      let newWidth = startWidth.value + deltaX;
      newWidth = Math.min(
        Math.min(safeLeftMax, maxAllowedLeftWidth),
        Math.max(safeLeftMin, newWidth)
      );
      leftWidth.value = Math.max(0, newWidth);
    };
    const handleResize = () => {
      if (props.fold && foldState.value) return;
      constrainBoundaries();
    };
    vue.watch(
      () => props.leftCurrentWidth,
      (val) => {
        if (!isDragging.value && !foldState.value) {
          leftWidth.value = val < 0 ? 0 : val;
          preFoldWidth.value = leftWidth.value;
        }
      }
    );
    vue.watch(
      () => leftWidth.value,
      (val) => {
        if (!isDragging.value) {
          emits("update:leftCurrentWidth", val);
        }
      }
    );
    vue.watch(
      () => props.foldState,
      (newState) => {
        if (newState !== foldState.value) {
          handleFold(newState);
        }
      }
    );
    const removeListeners = () => {
      window.removeEventListener("mousemove", onDrag);
      window.removeEventListener("mouseup", stopDrag);
    };
    vue.onMounted(() => {
      window.addEventListener("resize", handleResize);
      initLayoutWidth();
      if (props.foldState) {
        handleFold(props.foldState);
        emits("update:leftCurrentWidth", leftWidth.value);
      }
    });
    vue.onBeforeUnmount(() => {
      window.removeEventListener("resize", handleResize);
      removeListeners();
    });
    __expose({ handleFold });
    return (_ctx, _cache) => {
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_ll_tooltip = vue.resolveComponent("ll-tooltip");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          ref_key: "dragLayoutRef",
          ref: dragLayoutRef,
          class: vue.normalizeClass([vue.unref(bem).b()])
        },
        [
          vue.createCommentVNode(" \u5DE6\u4FA7 "),
          vue.createElementVNode(
            "div",
            {
              ref_key: "leftPanelRef",
              ref: leftPanelRef,
              class: vue.normalizeClass([
                vue.unref(bem).e("left-panel"),
                showDragBtn.value ? vue.unref(bem).is("drag-btn") : "",
                _ctx.speed ? vue.unref(bem).is(_ctx.speed) : ""
              ]),
              style: vue.normalizeStyle({
                width: props.flex && !foldState.value ? "auto" : `${leftWidth.value}px`
              })
            },
            [
              vue.renderSlot(_ctx.$slots, "left-layout"),
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass([
                    _ctx.drag || _ctx.fold ? vue.unref(bem).e("divider") : "",
                    vue.unref(bem).is(_ctx.drag && !(_ctx.fold && foldState.value) ? "drag" : "undrag")
                  ]),
                  style: vue.normalizeStyle({
                    backgroundColor: leftWidth.value === 0 && !props.flex ? "transparent" : _ctx.dividerColor || "var(--color-split)"
                  }),
                  onMousedown: vue.withModifiers(startDrag, ["prevent"])
                },
                [
                  showDragBtn.value ? (vue.openBlock(), vue.createBlock(_component_ll_icon, {
                    key: 0,
                    class: vue.normalizeClass([vue.unref(bem).e("divider-icon")]),
                    "icon-name": "icon-drag2",
                    size: 8
                  }, null, 8, ["class"])) : vue.createCommentVNode("v-if", true),
                  vue.createCommentVNode(" \u6298\u53E0\u6309\u94AE "),
                  _ctx.fold ? (vue.openBlock(), vue.createElementBlock(
                    "div",
                    {
                      key: 1,
                      ref_key: "foldBtnRef",
                      ref: foldBtnRef,
                      class: vue.normalizeClass([vue.unref(bem).e("fold-btn"), vue.unref(bem).is(foldState.value ? "fold" : "unfold")]),
                      onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                      }, ["stop"])),
                      onClick: _cache[1] || (_cache[1] = ($event) => handleFold(!foldState.value))
                    },
                    [
                      vue.createVNode(_component_ll_tooltip, {
                        open: true,
                        tip: foldState.value ? "\u5C55\u5F00" : "\u6536\u8D77",
                        placement: "right",
                        arrow: false,
                        "get-popup-container": () => foldBtnRef.value
                      }, {
                        default: vue.withCtx(() => [
                          vue.createVNode(_component_ll_icon, {
                            "icon-name": foldState.value ? "icon-solid-arrow-right" : "icon-solid-arrow-left",
                            size: 12
                          }, null, 8, ["icon-name"])
                        ]),
                        _: 1
                        /* STABLE */
                      }, 8, ["tip", "get-popup-container"])
                    ],
                    34
                    /* CLASS, NEED_HYDRATION */
                  )) : vue.createCommentVNode("v-if", true)
                ],
                38
                /* CLASS, STYLE, NEED_HYDRATION */
              )
            ],
            6
            /* CLASS, STYLE */
          ),
          vue.createCommentVNode(" \u53F3\u4FA7 "),
          vue.createElementVNode(
            "div",
            {
              class: vue.normalizeClass(vue.unref(bem).e("right-panel"))
            },
            [
              vue.renderSlot(_ctx.$slots, "right-layout")
            ],
            2
            /* CLASS */
          )
        ],
        2
        /* CLASS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=flex-split-layout.vue2.js.map
