"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const error = require("../../../utils/error.js");
const index = require("../../../hooks/use-namespace/index.js");
const useSize = require("./hooks/useSize.js");
const type = require("./type.js");
const splitPanel = require("./split-panel.js");
const usePanel = require("./hooks/usePanel.js");
const splitBar = require("./split-bar.js");
const Vue = require("vue");
const COMPONENT_NAME = "ElSplitterPanel";
var split_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: COMPONENT_NAME,
  __name: "split-panel",
  props: splitPanel.splitterPanelProps,
  emits: splitPanel.splitterPanelEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const ns = index.useNamespace("splitter-panel");
    const props = __props;
    const emits = __emit;
    const splitterContext = Vue.inject(type.splitterRootContextKey);
    if (!splitterContext) error.throwError(COMPONENT_NAME, "usage: <el-splitter><el-splitter-panel /></el-splitter/>");
    const { panels, layout, lazy, containerSize, pxSizes } = Vue.toRefs(splitterContext);
    const { registerPanel, unregisterPanel, onCollapse, onMoveEnd, onMoveStart, onMoving } = splitterContext;
    const panelEl = Vue.ref();
    const instance = Vue.getCurrentInstance();
    const uid = instance.uid;
    const index$1 = Vue.ref(0);
    const panel = Vue.computed(() => panels.value[index$1.value]);
    const setIndex = (val) => {
      index$1.value = val;
    };
    const panelSize = Vue.computed(() => {
      if (!panel.value) return 0;
      return pxSizes.value[index$1.value] ?? 0;
    });
    const nextSize = Vue.computed(() => {
      if (!panel.value) return 0;
      return pxSizes.value[index$1.value + 1] ?? 0;
    });
    const nextPanel = Vue.computed(() => {
      if (panel.value) return panels.value[index$1.value + 1];
      return null;
    });
    const isResizable = Vue.computed(() => {
      var _a;
      if (!nextPanel.value) return false;
      return props.resizable && ((_a = nextPanel.value) == null ? void 0 : _a.resizable) && (panelSize.value !== 0 || !props.min) && (nextSize.value !== 0 || !nextPanel.value.min);
    });
    const isShowBar = Vue.computed(() => {
      if (!panel.value) return false;
      return index$1.value !== panels.value.length - 1;
    });
    const startCollapsible = Vue.computed(() => usePanel.isCollapsible(panel.value, panelSize.value, nextPanel.value, nextSize.value));
    const endCollapsible = Vue.computed(() => usePanel.isCollapsible(nextPanel.value, nextSize.value, panel.value, panelSize.value));
    function sizeToPx(str) {
      if (useSize.isPct(str)) return useSize.getPct(str) * containerSize.value || 0;
      else if (useSize.isPx(str)) return useSize.getPx(str);
      return str ?? 0;
    }
    let isSizeUpdating = false;
    Vue.watch(() => props.size, () => {
      if (!isSizeUpdating && panel.value) {
        if (!containerSize.value) {
          panel.value.size = props.size;
          return;
        }
        const size = sizeToPx(props.size);
        const maxSize = sizeToPx(props.max);
        const minSize = sizeToPx(props.min);
        const finalSize = Math.min(Math.max(size, minSize || 0), maxSize || size);
        if (finalSize !== size) emits("update:size", finalSize);
        panel.value.size = finalSize;
      }
    });
    Vue.watch(() => {
      var _a;
      return (_a = panel.value) == null ? void 0 : _a.size;
    }, (val) => {
      if (val !== props.size) {
        isSizeUpdating = true;
        emits("update:size", val);
        Vue.nextTick(() => isSizeUpdating = false);
      }
    });
    Vue.watch(() => props.resizable, (val) => {
      if (panel.value) panel.value.resizable = val;
    });
    const _panel = Vue.reactive({
      uid,
      getVnode: () => instance.vnode,
      setIndex,
      ...props,
      collapsible: Vue.computed(() => usePanel.getCollapsible(props.collapsible))
    });
    registerPanel(_panel);
    Vue.onBeforeUnmount(() => unregisterPanel(_panel));
    __expose({ splitterPanelRef: panelEl });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, [Vue.createElementVNode("div", Vue.mergeProps({
        ref_key: "panelEl",
        ref: panelEl,
        class: [Vue.unref(ns).b()],
        style: { flexBasis: `${panelSize.value}px` }
      }, _ctx.$attrs), [Vue.renderSlot(_ctx.$slots, "default")], 16), isShowBar.value ? (Vue.openBlock(), Vue.createBlock(splitBar.default, {
        key: 0,
        index: index$1.value,
        layout: Vue.unref(layout),
        lazy: Vue.unref(lazy),
        resizable: isResizable.value,
        "start-collapsible": startCollapsible.value,
        "end-collapsible": endCollapsible.value,
        onMoveStart: Vue.unref(onMoveStart),
        onMoving: Vue.unref(onMoving),
        onMoveEnd: Vue.unref(onMoveEnd),
        onCollapse: Vue.unref(onCollapse)
      }, {
        "start-collapsible": Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "start-collapsible")]),
        "end-collapsible": Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "end-collapsible")]),
        _: 3
      }, 8, [
        "index",
        "layout",
        "lazy",
        "resizable",
        "start-collapsible",
        "end-collapsible",
        "onMoveStart",
        "onMoving",
        "onMoveEnd",
        "onCollapse"
      ])) : Vue.createCommentVNode("v-if", true)], 64);
    };
  }
});
exports.default = split_panel_vue_vue_type_script_setup_true_lang_default;
