import '../../../hooks/index.mjs';
import { resizableColumnProps } from './resizable-column.mjs';
import { defineComponent, getCurrentInstance, inject, computed, ref, reactive, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, renderSlot, withDirectives, createBlock, withCtx, createVNode, vShow, createCommentVNode } from 'vue';
import '../../../utils/index.mjs';
import { resizableColumnsRootContextKey } from './constants.mjs';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { throwError } from '../../../utils/error.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';

const _sfc_main = defineComponent({
  name: "ElResizableColumn",
  components: { ArrowLeft, ArrowRight },
  props: resizableColumnProps,
  setup(props, { slots }) {
    const instance = getCurrentInstance();
    const columnsRoot = inject(resizableColumnsRootContextKey);
    if (!columnsRoot)
      throwError("ElResizableColumn", "usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>");
    const collapsable = computed(() => props.collapsable || columnsRoot.props.collapsable);
    const showCollapse = computed(() => props.showCollapse || columnsRoot.props.showCollapse);
    const collapsed = ref(false);
    const column = reactive({
      uid: instance.uid,
      slots,
      props,
      maxWidth: 0,
      parentWidth: 0,
      index: 0,
      width: 0,
      left: 0,
      collapsable,
      showCollapse,
      collapsed
    });
    const columnStyle = computed(() => {
      if (instance.parent && instance.parent.type.name === "ElResizableColumns" && instance.parent.props.direction === "vertical") {
        return { height: `${column.width}px`, top: `${column.left}px`, display: column.collapsed ? "none" : "unset", width: "100%" };
      } else {
        return { width: `${column.width}px`, left: `${column.left}px`, display: column.collapsed ? "none" : "unset" };
      }
    });
    const resizerStyle = computed(() => {
      if (instance.parent && instance.parent.type.name === "ElResizableColumns" && instance.parent.props.direction === "vertical") {
        return { top: `${column.left + (column.collapsed ? 0 : column.width)}px`, width: "100%" };
      } else {
        return { left: `${column.left + (column.collapsed ? 0 : column.width)}px` };
      }
    });
    onMounted(() => {
      columnsRoot.registerColumn(column);
      columnsRoot.initColumnSize();
    });
    onUnmounted(() => {
      columnsRoot.unregisterColumn(column.uid);
      columnsRoot.initColumnSize();
    });
    const columnsCount = computed(() => columnsRoot.columns.value.length);
    const ns = useNamespace("resizable-column");
    const handleCollapse = () => {
      columnsRoot.handleCollapse(column);
    };
    const handleExpand = () => {
      columnsRoot.handleExpand(column);
    };
    return {
      ns,
      column,
      columnsCount,
      columnStyle,
      resizerStyle,
      handleCollapse,
      handleExpand
    };
  }
});
const _hoisted_1 = ["widget"];
const _hoisted_2 = ["data-index"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ArrowLeft = resolveComponent("ArrowLeft");
  const _component_el_icon = resolveComponent("el-icon");
  const _component_el_button = resolveComponent("el-button");
  const _component_ArrowRight = resolveComponent("ArrowRight");
  return openBlock(), createElementBlock(Fragment, null, [
    createElementVNode("div", {
      class: normalizeClass(_ctx.ns.b()),
      widget: _ctx.widget,
      style: normalizeStyle(_ctx.columnStyle)
    }, [
      renderSlot(_ctx.$slots, "default")
    ], 14, _hoisted_1),
    _ctx.column.index < _ctx.columnsCount - 1 ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: normalizeClass(["resizer", { "collapsed": _ctx.column.collapsed }]),
      style: normalizeStyle(_ctx.resizerStyle),
      "data-index": _ctx.column.index
    }, [
      !_ctx.column.collapsed ? withDirectives((openBlock(), createBlock(_component_el_button, {
        key: 0,
        class: "left",
        size: "small",
        onClick: _ctx.handleCollapse,
        disabled: !_ctx.column.collapsable
      }, {
        default: withCtx(() => [
          createVNode(_component_el_icon, null, {
            default: withCtx(() => [
              createVNode(_component_ArrowLeft)
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["onClick", "disabled"])), [
        [vShow, _ctx.column.showCollapse]
      ]) : withDirectives((openBlock(), createBlock(_component_el_button, {
        key: 1,
        class: "right",
        size: "small",
        onClick: _ctx.handleExpand,
        disabled: !_ctx.column.collapsable
      }, {
        default: withCtx(() => [
          createVNode(_component_el_icon, null, {
            default: withCtx(() => [
              createVNode(_component_ArrowRight)
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["onClick", "disabled"])), [
        [vShow, _ctx.column.showCollapse]
      ])
    ], 14, _hoisted_2)) : createCommentVNode("v-if", true)
  ], 64);
}
var ResizableColumn = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\workspace\\element-pe\\packages\\components\\resizable-columns\\src\\resizable-column.vue"]]);

export { ResizableColumn as default };
//# sourceMappingURL=resizable-column2.mjs.map
