import { defineComponent, getCurrentInstance, provide, computed, ref, watch, onMounted, onUnmounted, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, withDirectives, createVNode, Transition, withCtx, createCommentVNode, createBlock, createTextVNode, toDisplayString, vShow } from 'vue';
import { debounce, throttle } from 'lodash-unified';
import '../../../directives/index.mjs';
import '../../../hooks/index.mjs';
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
import { ElScrollbar } from '../../scrollbar/index.mjs';
import { ElIcon } from '../../icon/index.mjs';
import { createStore } from './store/helper.mjs';
import TableLayout from './table-layout.mjs';
import TableHeader from './table-header/index.mjs';
import TableBody from './table-body/index.mjs';
import TableFooter from './table-footer/index.mjs';
import useUtils from './table/utils-helper.mjs';
import useStyle from './table/style-helper.mjs';
import useKeyRender from './table/key-render-helper.mjs';
import defaultProps from './table/defaults.mjs';
import { TABLE_INJECTION_KEY } from './tokens.mjs';
import { hColgroup } from './h-helper.mjs';
import { useScrollbar } from './composables/use-scrollbar.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import Mousewheel from '../../../directives/mousewheel/index.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';

const TABLE_ARROW_BOUNDING = 4;
let tableIdSeed = 1;
const _sfc_main = defineComponent({
  name: "ElTable",
  directives: {
    Mousewheel
  },
  components: {
    TableHeader,
    TableBody,
    TableFooter,
    ElScrollbar,
    hColgroup,
    DArrowLeft,
    DArrowRight,
    ElIcon
  },
  props: defaultProps,
  emits: [
    "select",
    "select-all",
    "selection-change",
    "cell-mouse-enter",
    "cell-mouse-leave",
    "cell-contextmenu",
    "cell-click",
    "cell-dblclick",
    "row-click",
    "row-contextmenu",
    "row-dblclick",
    "header-click",
    "header-contextmenu",
    "sort-change",
    "filter-change",
    "current-change",
    "header-dragend",
    "expand-change"
  ],
  setup(props) {
    const { t } = useLocale();
    const ns = useNamespace("table");
    const table = getCurrentInstance();
    provide(TABLE_INJECTION_KEY, table);
    const store = createStore(table, props);
    table.store = store;
    const layout = new TableLayout({
      store: table.store,
      table,
      fit: props.fit,
      showHeader: props.showHeader
    });
    table.layout = layout;
    const isEmpty = computed(() => (store.states.data.value || []).length === 0);
    const {
      setCurrentRow,
      getSelectionRows,
      toggleRowSelection,
      clearSelection,
      clearFilter,
      toggleAllSelection,
      toggleRowExpansion,
      clearSort,
      sort
    } = useUtils(store);
    const {
      isHidden,
      renderExpanded,
      setDragVisible,
      isGroup,
      handleMouseLeave,
      handleHeaderFooterMousewheel,
      tableSize,
      emptyBlockStyle,
      handleFixedMousewheel,
      resizeProxyVisible,
      bodyWidth,
      resizeState,
      doLayout,
      tableBodyStyles,
      tableLayout,
      scrollbarViewStyle,
      tableInnerStyle,
      scrollbarStyle
    } = useStyle(props, layout, store, table);
    const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar();
    const debouncedUpdateLayout = debounce(doLayout, 50);
    const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
    table.tableId = tableId;
    table.state = {
      isGroup,
      resizeState,
      doLayout,
      debouncedUpdateLayout
    };
    const computedSumText = computed(() => props.sumText || t("el.table.sumText"));
    const computedEmptyText = computed(() => {
      return props.emptyText || t("el.table.emptyText");
    });
    const tableBody = ref();
    const showLeftArrow = ref(false);
    const showRightArrow = ref(false);
    const scrollArrowStyle = ref({});
    let lastScrollLeft = 0;
    let isScrolling = false;
    const hanldeScrollArrowMouseUp = () => {
      isScrolling = false;
    };
    const computedShowArrow = () => {
      showLeftArrow.value = lastScrollLeft > TABLE_ARROW_BOUNDING;
      showRightArrow.value = Math.abs(lastScrollLeft + table.vnode.el.clientWidth - Number.parseInt(bodyWidth.value)) >= TABLE_ARROW_BOUNDING;
      const nextHeight = `${headerWrapper.value.clientHeight - 2}px`;
      scrollArrowStyle.value = {
        height: nextHeight,
        lineHeight: nextHeight
      };
    };
    const onTableBodyScoll = throttle(({ scrollLeft }) => {
      lastScrollLeft = scrollLeft || 0;
      computedShowArrow();
    }, 50);
    watch(bodyWidth, () => {
      showRightArrow.value = table.vnode.el.clientWidth < Number.parseInt(bodyWidth.value);
    });
    const scrollTable = (type) => {
      isScrolling = true;
      const clientWidth = table.vnode.el.clientWidth;
      const maxScrollLeftPosition = Number.parseInt(bodyWidth.value) - clientWidth;
      let hasScroll = false;
      if (type === "right" && lastScrollLeft < maxScrollLeftPosition) {
        const maxLeft = Math.min(lastScrollLeft + 10, maxScrollLeftPosition);
        setScrollLeft(maxLeft);
        hasScroll = true;
      }
      if (type === "left" && lastScrollLeft > 0) {
        const maxRight = Math.max(lastScrollLeft - 10, 0);
        setScrollLeft(maxRight);
        hasScroll = true;
      }
      hasScroll && setTimeout(() => {
        if (isScrolling) {
          scrollTable(type);
        }
      }, 18);
      isScrolling = hasScroll;
    };
    const headerWrapper = ref();
    let observer;
    onMounted(() => {
      requestAnimationFrame(() => {
        if (headerWrapper.value) {
          observer = new MutationObserver(computedShowArrow);
          observer.observe(headerWrapper.value, {
            attributes: true,
            childList: true,
            subtree: true
          });
        }
      });
    });
    onUnmounted(() => {
      observer == null ? void 0 : observer.disconnect();
      observer = null;
    });
    useKeyRender(table);
    return {
      ns,
      layout,
      tableBody,
      store,
      headerWrapper,
      handleHeaderFooterMousewheel,
      handleMouseLeave,
      tableId,
      tableSize,
      isHidden,
      isEmpty,
      renderExpanded,
      resizeProxyVisible,
      resizeState,
      isGroup,
      bodyWidth,
      tableBodyStyles,
      emptyBlockStyle,
      debouncedUpdateLayout,
      handleFixedMousewheel,
      setCurrentRow,
      getSelectionRows,
      toggleRowSelection,
      clearSelection,
      clearFilter,
      toggleAllSelection,
      toggleRowExpansion,
      clearSort,
      doLayout,
      sort,
      t,
      setDragVisible,
      context: table,
      computedSumText,
      computedEmptyText,
      tableLayout,
      scrollbarViewStyle,
      tableInnerStyle,
      scrollbarStyle,
      scrollBarRef,
      scrollTo,
      setScrollLeft,
      setScrollTop,
      scrollTable,
      hanldeScrollArrowMouseUp,
      onTableBodyScoll,
      showLeftArrow,
      showRightArrow,
      scrollArrowStyle
    };
  }
});
const _hoisted_1 = ["data-prefix"];
const _hoisted_2 = {
  ref: "hiddenColumns",
  class: "hidden-columns"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_DArrowLeft = resolveComponent("DArrowLeft");
  const _component_el_icon = resolveComponent("el-icon");
  const _component_DArrowRight = resolveComponent("DArrowRight");
  const _component_hColgroup = resolveComponent("hColgroup");
  const _component_table_header = resolveComponent("table-header");
  const _component_table_body = resolveComponent("table-body");
  const _component_el_scrollbar = resolveComponent("el-scrollbar");
  const _component_table_footer = resolveComponent("table-footer");
  const _directive_mousewheel = resolveDirective("mousewheel");
  return openBlock(), createElementBlock("div", {
    ref: "tableWrapper",
    class: normalizeClass([
      {
        [_ctx.ns.m("fit")]: _ctx.fit,
        [_ctx.ns.m("striped")]: _ctx.stripe,
        [_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup,
        [_ctx.ns.m("hidden")]: _ctx.isHidden,
        [_ctx.ns.m("group")]: _ctx.isGroup,
        [_ctx.ns.m("fluid-height")]: _ctx.maxHeight,
        [_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value,
        [_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value,
        [_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value,
        [_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
        "has-footer": _ctx.showSummary
      },
      _ctx.ns.m(_ctx.tableSize),
      _ctx.className,
      _ctx.ns.b(),
      _ctx.ns.m(`layout-${_ctx.tableLayout}`)
    ]),
    style: normalizeStyle(_ctx.style),
    "data-prefix": _ctx.ns.namespace.value,
    onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.handleMouseLeave())
  }, [
    createElementVNode("div", {
      class: normalizeClass(_ctx.ns.e("inner-wrapper")),
      style: normalizeStyle(_ctx.tableInnerStyle)
    }, [
      createElementVNode("div", _hoisted_2, [
        renderSlot(_ctx.$slots, "default")
      ], 512),
      _ctx.showHeader && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
        key: 0,
        ref: "headerWrapper",
        class: normalizeClass(_ctx.ns.e("header-wrapper"))
      }, [
        _ctx.scrollArrow ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass(_ctx.ns.e("scroll-arrow")),
          onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.hanldeScrollArrowMouseUp && _ctx.hanldeScrollArrowMouseUp(...args))
        }, [
          createVNode(Transition, { name: "qd-fade-in" }, {
            default: withCtx(() => [
              _ctx.showLeftArrow ? (openBlock(), createElementBlock("div", {
                key: 0,
                ref: "scrollLeft",
                class: normalizeClass([_ctx.ns.e("scroll-arrow-left")]),
                style: normalizeStyle(_ctx.scrollArrowStyle),
                onMousedown: _cache[0] || (_cache[0] = ($event) => _ctx.scrollTable("left"))
              }, [
                createVNode(_component_el_icon, null, {
                  default: withCtx(() => [
                    createVNode(_component_DArrowLeft)
                  ]),
                  _: 1
                })
              ], 38)) : createCommentVNode("v-if", true)
            ]),
            _: 1
          }),
          createVNode(Transition, { name: "qd-fade-in" }, {
            default: withCtx(() => [
              _ctx.showRightArrow ? (openBlock(), createElementBlock("div", {
                key: 0,
                ref: "scrollRight",
                class: normalizeClass([_ctx.ns.e("scroll-arrow-right")]),
                style: normalizeStyle(_ctx.scrollArrowStyle),
                onMousedown: _cache[1] || (_cache[1] = ($event) => _ctx.scrollTable("right"))
              }, [
                createVNode(_component_el_icon, null, {
                  default: withCtx(() => [
                    createVNode(_component_DArrowRight)
                  ]),
                  _: 1
                })
              ], 38)) : createCommentVNode("v-if", true)
            ]),
            _: 1
          })
        ], 34)) : createCommentVNode("v-if", true),
        createElementVNode("table", {
          ref: "tableHeader",
          class: normalizeClass(_ctx.ns.e("header")),
          style: normalizeStyle(_ctx.tableBodyStyles),
          border: "0",
          cellpadding: "0",
          cellspacing: "0"
        }, [
          createVNode(_component_hColgroup, {
            columns: _ctx.store.states.columns.value,
            "table-layout": _ctx.tableLayout
          }, null, 8, ["columns", "table-layout"]),
          createVNode(_component_table_header, {
            ref: "tableHeaderRef",
            border: _ctx.border,
            "default-sort": _ctx.defaultSort,
            store: _ctx.store,
            onSetDragVisible: _ctx.setDragVisible
          }, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])
        ], 6)
      ], 2)), [
        [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
      ]) : createCommentVNode("v-if", true),
      createElementVNode("div", {
        ref: "bodyWrapper",
        class: normalizeClass(_ctx.ns.e("body-wrapper"))
      }, [
        createVNode(_component_el_scrollbar, {
          ref: "scrollBarRef",
          "view-style": _ctx.scrollbarViewStyle,
          "wrap-style": _ctx.scrollbarStyle,
          always: _ctx.scrollbarAlwaysOn,
          onScroll: _ctx.onTableBodyScoll
        }, {
          default: withCtx(() => [
            createElementVNode("table", {
              ref: "tableBody",
              class: normalizeClass(_ctx.ns.e("body")),
              cellspacing: "0",
              cellpadding: "0",
              border: "0",
              style: normalizeStyle({
                width: _ctx.bodyWidth,
                tableLayout: _ctx.tableLayout
              })
            }, [
              createVNode(_component_hColgroup, {
                columns: _ctx.store.states.columns.value,
                "table-layout": _ctx.tableLayout
              }, null, 8, ["columns", "table-layout"]),
              _ctx.showHeader && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_header, {
                key: 0,
                ref: "tableHeaderRef",
                border: _ctx.border,
                "default-sort": _ctx.defaultSort,
                store: _ctx.store,
                onSetDragVisible: _ctx.setDragVisible
              }, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])) : createCommentVNode("v-if", true),
              createVNode(_component_table_body, {
                context: _ctx.context,
                highlight: _ctx.highlightCurrentRow,
                "row-class-name": _ctx.rowClassName,
                "tooltip-effect": _ctx.tooltipEffect,
                "tooltip-options": _ctx.tooltipOptions,
                "row-style": _ctx.rowStyle,
                store: _ctx.store,
                stripe: _ctx.stripe
              }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "tooltip-options", "row-style", "store", "stripe"])
            ], 6),
            _ctx.isEmpty ? (openBlock(), createElementBlock("div", {
              key: 0,
              ref: "emptyBlock",
              style: normalizeStyle(_ctx.emptyBlockStyle),
              class: normalizeClass(_ctx.ns.e("empty-block"))
            }, [
              createElementVNode("span", {
                class: normalizeClass(_ctx.ns.e("empty-text"))
              }, [
                renderSlot(_ctx.$slots, "empty", {}, () => [
                  createTextVNode(toDisplayString(_ctx.computedEmptyText), 1)
                ])
              ], 2)
            ], 6)) : createCommentVNode("v-if", true),
            _ctx.$slots.append ? (openBlock(), createElementBlock("div", {
              key: 1,
              ref: "appendWrapper",
              class: normalizeClass(_ctx.ns.e("append-wrapper"))
            }, [
              renderSlot(_ctx.$slots, "append")
            ], 2)) : createCommentVNode("v-if", true)
          ]),
          _: 3
        }, 8, ["view-style", "wrap-style", "always", "onScroll"])
      ], 2),
      _ctx.showSummary ? withDirectives((openBlock(), createElementBlock("div", {
        key: 1,
        ref: "footerWrapper",
        class: normalizeClass(_ctx.ns.e("footer-wrapper"))
      }, [
        createVNode(_component_table_footer, {
          border: _ctx.border,
          "default-sort": _ctx.defaultSort,
          store: _ctx.store,
          style: normalizeStyle(_ctx.tableBodyStyles),
          "sum-text": _ctx.computedSumText,
          "summary-method": _ctx.summaryMethod
        }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
      ], 2)), [
        [vShow, !_ctx.isEmpty],
        [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
      ]) : createCommentVNode("v-if", true),
      _ctx.border || _ctx.isGroup ? (openBlock(), createElementBlock("div", {
        key: 2,
        class: normalizeClass(_ctx.ns.e("border-left-patch"))
      }, null, 2)) : createCommentVNode("v-if", true)
    ], 6),
    withDirectives(createElementVNode("div", {
      ref: "resizeProxy",
      class: normalizeClass(_ctx.ns.e("column-resize-proxy"))
    }, null, 2), [
      [vShow, _ctx.resizeProxyVisible]
    ])
  ], 46, _hoisted_1);
}
var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/liyanjie/Desktop/codeProgram/element-plus/packages/components/table/src/table.vue"]]);

export { Table as default };
//# sourceMappingURL=table.mjs.map
