"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../../ui/src/comp.js");
require("../../../ui/index.js");
const utils = require("../../../ui/src/utils.js");
const dom = require("../../../ui/src/dom.js");
const log = require("../../../ui/src/log.js");
const XEUtils = require("xe-utils");
const index_esm = require("../../../../../@vxe-ui/core/es/index.esm.js");
const { getI18n, getIcon, renderEmptyElement } = index_esm.VxeUI;
function createInternalData() {
  return {
    // teleportTo: undefined,
    // prevDragCol: undefined,
    // prevDragGroupField: undefined,
    // prevDragAggFnColid: undefined,
    // prevDragToChild: false,
    // prevDragPos: null
  };
}
const TableCustomPanelComponent = comp.defineVxeComponent({
  name: "TableCustomPanel",
  props: {
    customStore: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, context) {
    const xID = XEUtils.uniqueId();
    const VxeUIModalComponent = index_esm.VxeUI.getComponent("VxeModal");
    const VxeUIDrawerComponent = index_esm.VxeUI.getComponent("VxeDrawer");
    const VxeUIButtonComponent = index_esm.VxeUI.getComponent("VxeButton");
    const VxeUINumberInputComponent = index_esm.VxeUI.getComponent("VxeNumberInput");
    const VxeUIRadioGroupComponent = index_esm.VxeUI.getComponent("VxeRadioGroup");
    const $xeTable = vue.inject("$xeTable", {});
    const { props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
    const { computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps();
    const refElem = vue.ref();
    const refBodyWrapperElem = vue.ref();
    const refCustomBodyElem = vue.ref();
    const refDragLineElem = vue.ref();
    const refDragTipElem = vue.ref();
    const customPanelReactData = vue.reactive({
      dragCol: null,
      dragGroupField: null,
      dragAggFnCol: null,
      dragTipText: ""
    });
    let customPanelInternalData = createInternalData();
    const refMaps = {
      refElem,
      refBodyWrapperElem,
      refCustomBodyElem,
      refDragLineElem,
      refDragTipElem
    };
    const computeMaps = {};
    const handleWrapperMouseenterEvent = (evnt) => {
      const { customStore } = props;
      customStore.activeWrapper = true;
      $xeTable.customOpenEvent(evnt);
    };
    const handleWrapperMouseleaveEvent = (evnt) => {
      const { customStore } = props;
      customStore.activeWrapper = false;
      setTimeout(() => {
        if (!customStore.activeBtn && !customStore.activeWrapper) {
          $xeTable.customCloseEvent(evnt);
        }
      }, 300);
    };
    const confirmCustomEvent = ({ $event }) => {
      tableReactData.isCustomStatus = true;
      $xeTable.saveCustom();
      $xeTable.closeCustom();
      $xeTable.emitCustomEvent("confirm", $event);
      $xeTable.emitCustomEvent("close", $event);
    };
    const cancelCloseEvent = ({ $event }) => {
      $xeTable.closeCustom();
      $xeTable.emitCustomEvent("close", $event);
    };
    const cancelCustomEvent = ({ $event }) => {
      $xeTable.cancelCustom();
      $xeTable.closeCustom();
      $xeTable.emitCustomEvent("cancel", $event);
      $xeTable.emitCustomEvent("close", $event);
    };
    const handleResetCustomEvent = (evnt) => {
      $xeTable.resetCustom(true);
      $xeTable.closeCustom();
      $xeTable.emitCustomEvent("reset", evnt);
      $xeTable.emitCustomEvent("close", evnt);
    };
    const resetCustomEvent = ({ $event }) => {
      if (index_esm.VxeUI.modal) {
        index_esm.VxeUI.modal.confirm({
          content: getI18n("vxe.custom.cstmConfirmRestore"),
          className: "vxe-table--ignore-clear",
          escClosable: true
        }).then((type) => {
          if (type === "confirm") {
            handleResetCustomEvent($event);
          }
        });
      } else {
        handleResetCustomEvent($event);
      }
    };
    const handleOptionCheck = (column) => {
      const { customColumnList } = tableReactData;
      const matchObj = XEUtils.findTree(customColumnList, (item) => item === column);
      if (matchObj && matchObj.parent) {
        const { parent } = matchObj;
        if (parent.children && parent.children.length) {
          parent.renderVisible = parent.children.every((column2) => column2.renderVisible);
          parent.halfVisible = !parent.renderVisible && parent.children.some((column2) => column2.renderVisible || column2.halfVisible);
          handleOptionCheck(parent);
        }
      }
    };
    const changeCheckboxOption = (column, evnt) => {
      const isChecked = !column.renderVisible;
      const customOpts = computeCustomOpts.value;
      if (customOpts.immediate) {
        XEUtils.eachTree([column], (item) => {
          item.visible = isChecked;
          item.renderVisible = isChecked;
          item.halfVisible = false;
        });
        tableReactData.isCustomStatus = true;
        $xeTable.handleCustom();
        $xeTable.saveCustomStore("update:visible");
      } else {
        XEUtils.eachTree([column], (item) => {
          item.renderVisible = isChecked;
          item.halfVisible = false;
        });
      }
      handleOptionCheck(column);
      $xeTable.checkCustomStatus();
      $xeTable.dispatchEvent("custom-visible-change", { column, checked: isChecked }, evnt);
    };
    const changeColumnWidth = (column) => {
      const customOpts = computeCustomOpts.value;
      if (customOpts.immediate) {
        if (column.renderResizeWidth !== column.renderWidth) {
          column.resizeWidth = column.renderResizeWidth;
          column.renderWidth = column.renderResizeWidth;
          tableReactData.isCustomStatus = true;
          $xeTable.handleCustom();
          $xeTable.saveCustomStore("update:width");
        }
      }
    };
    const changeFixedOption = (column, colFixed, evnt) => {
      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
      const customOpts = computeCustomOpts.value;
      let targetFixed = null;
      if (customOpts.immediate) {
        if (column.renderFixed === colFixed) {
          targetFixed = "";
          XEUtils.eachTree([column], (col) => {
            col.fixed = "";
            col.renderFixed = "";
          });
        } else {
          if (!isMaxFixedColumn || column.renderFixed) {
            targetFixed = colFixed;
            XEUtils.eachTree([column], (col) => {
              col.fixed = colFixed;
              col.renderFixed = colFixed;
            });
          }
        }
        tableReactData.isCustomStatus = true;
        $xeTable.handleCustom();
        $xeTable.saveCustomStore("update:fixed");
      } else {
        if (column.renderFixed === colFixed) {
          targetFixed = "";
          XEUtils.eachTree([column], (col) => {
            col.renderFixed = "";
          });
        } else {
          if (!isMaxFixedColumn || column.renderFixed) {
            targetFixed = colFixed;
            XEUtils.eachTree([column], (col) => {
              col.renderFixed = colFixed;
            });
          }
        }
      }
      if (targetFixed !== null) {
        $xeTable.dispatchEvent("custom-fixed-change", { column, fixed: targetFixed }, evnt);
      }
    };
    const allOptionEvent = (evnt) => {
      const { customStore } = tableReactData;
      const isAll = !customStore.isAll;
      $xeTable.toggleCustomAllCheckbox();
      $xeTable.dispatchEvent("custom-visible-all", { checked: isAll }, evnt);
    };
    const showDropTip = (evnt, optEl, showLine, dragPos) => {
      const bodyWrapperElem = refBodyWrapperElem.value;
      if (!bodyWrapperElem) {
        return;
      }
      const customBodyElem = refCustomBodyElem.value;
      if (!customBodyElem) {
        return;
      }
      const { prevDragToChild } = customPanelInternalData;
      const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect();
      const customBodyRect = customBodyElem.getBoundingClientRect();
      const dragLineEl = refDragLineElem.value;
      if (optEl) {
        if (dragLineEl) {
          if (showLine) {
            const optRect = optEl.getBoundingClientRect();
            dragLineEl.style.display = "block";
            dragLineEl.style.left = `${Math.max(0, customBodyRect.x - bodyWrapperRect.x)}px`;
            dragLineEl.style.top = `${Math.max(1, optRect.y + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`;
            dragLineEl.style.height = `${optRect.height}px`;
            dragLineEl.style.width = `${optRect.width}px`;
            dragLineEl.setAttribute("drag-pos", dragPos);
            dragLineEl.setAttribute("drag-to-child", prevDragToChild ? "y" : "n");
          } else {
            dragLineEl.style.display = "";
          }
        }
      } else {
        if (dragLineEl) {
          dragLineEl.style.display = "node";
        }
      }
      const dragTipEl = refDragTipElem.value;
      if (dragTipEl) {
        dragTipEl.style.display = "block";
        dragTipEl.style.top = `${Math.min(bodyWrapperElem.clientHeight + bodyWrapperElem.scrollTop - dragTipEl.clientHeight, evnt.clientY + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`;
        dragTipEl.style.left = `${Math.min(bodyWrapperElem.clientWidth + bodyWrapperElem.scrollLeft - dragTipEl.clientWidth, evnt.clientX + bodyWrapperElem.scrollLeft - bodyWrapperRect.x)}px`;
        dragTipEl.setAttribute("drag-status", showLine ? prevDragToChild ? "sub" : "normal" : "disabled");
      }
    };
    const updateColDropTipContent = () => {
      const { dragCol } = customPanelReactData;
      const columnDragOpts = computeColumnDragOpts.value;
      const { tooltipMethod } = columnDragOpts;
      let tipContent = "";
      if (tooltipMethod) {
        const dtParams = {
          $table: $xeTable,
          column: dragCol
        };
        tipContent = `${tooltipMethod(dtParams) || ""}`;
      } else {
        tipContent = getI18n("vxe.custom.cstmDragTarget", [dragCol && dragCol.type !== "html" ? dragCol.getTitle() : ""]);
      }
      customPanelReactData.dragTipText = tipContent;
    };
    const hideDropTip = () => {
      const dragTipEl = refDragTipElem.value;
      const dragLineEl = refDragLineElem.value;
      if (dragTipEl) {
        dragTipEl.style.display = "";
      }
      if (dragLineEl) {
        dragLineEl.style.display = "";
      }
    };
    const sortMousedownEvent = (evnt) => {
      const btnEl = evnt.currentTarget;
      const cellEl = btnEl.parentElement;
      const tdEl = cellEl.parentElement;
      const trEl = tdEl.parentElement;
      const colid = trEl.getAttribute("colid");
      const column = $xeTable.getColumnById(colid);
      trEl.draggable = true;
      customPanelReactData.dragCol = column;
      customPanelReactData.dragGroupField = null;
      customPanelReactData.dragAggFnCol = null;
      updateColDropTipContent();
      dom.addClass(trEl, "active--drag-origin");
    };
    const sortMouseupEvent = (evnt) => {
      const btnEl = evnt.currentTarget;
      const cellEl = btnEl.parentElement;
      const tdEl = cellEl.parentElement;
      const trEl = tdEl.parentElement;
      hideDropTip();
      trEl.draggable = false;
      customPanelReactData.dragCol = null;
      customPanelReactData.dragGroupField = null;
      customPanelReactData.dragAggFnCol = null;
      dom.removeClass(trEl, "active--drag-origin");
    };
    const sortDragstartEvent = (evnt) => {
      if (evnt.dataTransfer) {
        evnt.dataTransfer.setDragImage(dom.getTpImg(), 0, 0);
      }
      customPanelInternalData.prevDragGroupField = null;
      customPanelInternalData.prevDragAggFnColid = null;
    };
    const sortDragendEvent = (evnt) => {
      const { mouseConfig } = tableProps;
      const { customColumnList } = tableReactData;
      const { collectColumn } = tableInternalData;
      const customOpts = computeCustomOpts.value;
      const { immediate } = customOpts;
      const trEl = evnt.currentTarget;
      const columnDragOpts = computeColumnDragOpts.value;
      const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
      const { dragCol } = customPanelReactData;
      const { prevDragCol, prevDragGroupField, prevDragAggFnColid, prevDragPos, prevDragToChild } = customPanelInternalData;
      const dragOffsetIndex = prevDragPos === "bottom" ? 1 : 0;
      if (prevDragGroupField || prevDragAggFnColid) {
        if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
          $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
        }
      } else if (prevDragCol && dragCol) {
        if (prevDragCol !== dragCol) {
          const dragColumn = dragCol;
          const newColumn = prevDragCol;
          Promise.resolve(dragEndMethod ? dragEndMethod({
            oldColumn: dragColumn,
            newColumn,
            dragColumn,
            dragPos: prevDragPos,
            dragToChild: !!prevDragToChild,
            offsetIndex: dragOffsetIndex
          }) : true).then((status) => {
            if (!status) {
              return;
            }
            let oafIndex = -1;
            let nafIndex = -1;
            const oldAllMaps = {};
            XEUtils.eachTree([dragColumn], (column) => {
              oldAllMaps[column.id] = column;
            });
            let isSelfToChildStatus = false;
            if (immediate) {
              if (dragColumn.parentId && newColumn.parentId) {
                if (!isCrossDrag) {
                  return;
                }
                if (oldAllMaps[newColumn.id]) {
                  isSelfToChildStatus = true;
                  if (!(isCrossDrag && isSelfToChildDrag)) {
                    if (index_esm.VxeUI.modal) {
                      index_esm.VxeUI.modal.message({
                        status: "error",
                        content: getI18n("vxe.error.treeDragChild")
                      });
                    }
                    return;
                  }
                }
              } else if (dragColumn.parentId) {
                if (!isCrossDrag) {
                  return;
                }
              } else if (newColumn.parentId) {
                if (!isCrossDrag) {
                  return;
                }
                if (oldAllMaps[newColumn.id]) {
                  isSelfToChildStatus = true;
                  if (!(isCrossDrag && isSelfToChildDrag)) {
                    if (index_esm.VxeUI.modal) {
                      index_esm.VxeUI.modal.message({
                        status: "error",
                        content: getI18n("vxe.error.treeDragChild")
                      });
                    }
                    return;
                  }
                }
              } else ;
              const oldewMatchRest = XEUtils.findTree(collectColumn, (item) => item.id === dragColumn.id);
              if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
                if (oldewMatchRest) {
                  const { items: oCols, index: oIndex } = oldewMatchRest;
                  const childList = dragColumn.children || [];
                  childList.forEach((column) => {
                    column.parentId = dragColumn.parentId;
                  });
                  oCols.splice(oIndex, 1, ...childList);
                  dragColumn.children = [];
                }
              } else {
                if (oldewMatchRest) {
                  const { items: oCols, index: oIndex, parent: oParent } = oldewMatchRest;
                  oCols.splice(oIndex, 1);
                  if (!oParent) {
                    oafIndex = oIndex;
                  }
                }
              }
              const newMatchRest = XEUtils.findTree(collectColumn, (item) => item.id === newColumn.id);
              if (newMatchRest) {
                const { items: nCols, index: nIndex, parent: nParent } = newMatchRest;
                if (isCrossDrag && isToChildDrag && prevDragToChild) {
                  dragColumn.parentId = newColumn.id;
                  newColumn.children = (newColumn.children || []).concat([dragColumn]);
                } else {
                  dragColumn.parentId = newColumn.parentId;
                  nCols.splice(nIndex + dragOffsetIndex, 0, dragColumn);
                }
                if (!nParent) {
                  nafIndex = nIndex;
                }
              }
              XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
                if (!parent) {
                  const sortIndex = index + 1;
                  column.renderSortNumber = sortIndex;
                }
              });
            } else {
              oafIndex = XEUtils.findIndexOf(customColumnList, (item) => item.id === dragColumn.id);
              customColumnList.splice(oafIndex, 1);
              nafIndex = XEUtils.findIndexOf(customColumnList, (item) => item.id === newColumn.id);
              customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn);
            }
            if (mouseConfig) {
              if ($xeTable.clearSelected) {
                $xeTable.clearSelected();
              }
              if ($xeTable.clearCellAreas) {
                $xeTable.clearCellAreas();
                $xeTable.clearCopyCellArea();
              }
            }
            const csParams = {
              oldColumn: dragColumn,
              newColumn,
              dragColumn,
              dragPos: prevDragPos,
              offsetIndex: dragOffsetIndex,
              _index: {
                newIndex: nafIndex,
                oldIndex: oafIndex
              }
            };
            $xeTable.dispatchEvent("custom-sort-change", csParams, evnt);
            $xeTable.dispatchEvent("column-dragend", csParams, evnt);
            if (immediate) {
              tableReactData.customColumnList = collectColumn.slice(0);
              $xeTable.handleColDragSwapColumn();
            }
          }).catch(() => {
          });
        }
      }
      hideDropTip();
      customPanelReactData.dragCol = null;
      customPanelReactData.dragGroupField = null;
      customPanelReactData.dragAggFnCol = null;
      customPanelInternalData.prevDragGroupField = null;
      customPanelInternalData.prevDragAggFnColid = null;
      trEl.draggable = false;
      trEl.removeAttribute("drag-pos");
      dom.removeClass(trEl, "active--drag-target");
      dom.removeClass(trEl, "active--drag-origin");
    };
    const sortDragoverEvent = (evnt) => {
      const customOpts = computeCustomOpts.value;
      const { immediate } = customOpts;
      const columnDragOpts = computeColumnDragOpts.value;
      const { isCrossDrag, isToChildDrag } = columnDragOpts;
      const optEl = evnt.currentTarget;
      const isControlKey = dom.hasControlKey(evnt);
      const colid = optEl.getAttribute("colid");
      const column = $xeTable.getColumnById(colid);
      const { dragCol } = customPanelReactData;
      customPanelInternalData.prevDragGroupField = null;
      customPanelInternalData.prevDragAggFnColid = null;
      if (column && (isCrossDrag || column.level === 1)) {
        evnt.preventDefault();
        const offsetY = evnt.clientY - optEl.getBoundingClientRect().y;
        const dragPos = offsetY < optEl.clientHeight / 2 ? "top" : "bottom";
        if (!dragCol || dragCol && dragCol.id === column.id || !isCrossDrag && column.level > 1 || !immediate && column.level > 1) {
          showDropTip(evnt, optEl, false, dragPos);
          return;
        }
        customPanelInternalData.prevDragToChild = !!(isCrossDrag && isToChildDrag && isControlKey && immediate);
        customPanelInternalData.prevDragCol = column;
        customPanelInternalData.prevDragPos = dragPos;
        showDropTip(evnt, optEl, true, dragPos);
      }
    };
    const renderDragTip = () => {
      const { dragTipText } = customPanelReactData;
      const columnDragOpts = computeColumnDragOpts.value;
      return vue.h("div", {}, [
        vue.h("div", {
          ref: refDragLineElem,
          class: ["vxe-table-custom-popup--drag-line", {
            "is--guides": columnDragOpts.showGuidesStatus
          }]
        }),
        vue.h("div", {
          ref: refDragTipElem,
          class: "vxe-table-custom-popup--drag-tip"
        }, [
          vue.h("div", {
            class: "vxe-table-custom-popup--drag-tip-wrapper"
          }, [
            vue.h("div", {
              class: "vxe-table-custom-popup--drag-tip-status"
            }, [
              vue.h("span", {
                class: ["vxe-table-custom-popup--drag-tip-normal-status", getIcon().TABLE_DRAG_STATUS_ROW]
              }),
              vue.h("span", {
                class: ["vxe-table-custom-popup--drag-tip-sub-status", getIcon().TABLE_DRAG_STATUS_SUB_ROW]
              }),
              vue.h("span", {
                class: ["vxe-table-custom-popup--drag-tip-group-status", getIcon().TABLE_DRAG_STATUS_AGG_GROUP]
              }),
              vue.h("span", {
                class: ["vxe-table-custom-popup--drag-tip-values-status", getIcon().TABLE_DRAG_STATUS_AGG_VALUES]
              }),
              vue.h("span", {
                class: ["vxe-table-custom-popup--drag-tip-disabled-status", getIcon().TABLE_DRAG_DISABLED]
              })
            ]),
            vue.h("div", {
              class: "vxe-table-custom-popup--drag-tip-content"
            }, `${dragTipText || ""}`)
          ])
        ])
      ]);
    };
    const renderSimplePanel = () => {
      const $xeGrid = $xeTable.xeGrid;
      const $xeGantt = $xeTable.xeGantt;
      const tableProps2 = $xeTable.props;
      const { customStore } = props;
      const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps2;
      const { isCustomStatus, customColumnList } = tableReactData;
      const customOpts = computeCustomOpts.value;
      const { immediate } = customOpts;
      const columnDragOpts = computeColumnDragOpts.value;
      const { maxHeight } = customStore;
      const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
      const { isCrossDrag } = columnDragOpts;
      const slots = customOpts.slots || {};
      const headerSlot = slots.header;
      const topSlot = slots.top;
      const bottomSlot = slots.bottom;
      const defaultSlot = slots.default;
      const footerSlot = slots.footer;
      const colVNs = [];
      const customWrapperOns = {};
      const isAllChecked = customStore.isAll;
      const isAllIndeterminate = customStore.isIndeterminate;
      if (trigger === "hover") {
        customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
        customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
      }
      const params = {
        $table: $xeTable,
        $grid: $xeGrid,
        $gantt: $xeGantt,
        columns: customColumnList,
        isAllChecked,
        isAllIndeterminate,
        isCustomStatus
      };
      XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
        const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true;
        if (isVisible) {
          const isChecked = column.renderVisible;
          const isIndeterminate = column.halfVisible;
          const isColGroup = column.children && column.children.length;
          const colTitle = utils.formatText(column.getTitle(), 1);
          const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false;
          const isHidden = !isChecked;
          colVNs.push(vue.h("li", {
            key: column.id,
            colid: column.id,
            class: ["vxe-table-custom--option", `level--${column.level}`, {
              "is--hidden": isDisabled || isHidden,
              "is--group": isColGroup
            }],
            onDragstart: sortDragstartEvent,
            onDragend: sortDragendEvent,
            onDragover: sortDragoverEvent
          }, [
            allowVisible ? vue.h("div", {
              class: ["vxe-table-custom--checkbox-option", {
                "is--checked": isChecked,
                "is--indeterminate": isIndeterminate,
                "is--disabled": isDisabled
              }],
              title: getI18n("vxe.custom.setting.colVisible"),
              onClick: (evnt) => {
                if (!isDisabled) {
                  changeCheckboxOption(column, evnt);
                }
              }
            }, [
              vue.h("span", {
                class: ["vxe-checkbox--icon", isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
              })
            ]) : renderEmptyElement($xeTable),
            vue.h("div", {
              class: "vxe-table-custom--name-option"
            }, [
              allowSort && ((isCrossDrag ? immediate : false) || column.level === 1) ? vue.h("div", {
                class: "vxe-table-custom--sort-option"
              }, [
                vue.h("span", Object.assign({ class: ["vxe-table-custom--sort-btn", {
                  "is--disabled": isHidden
                }], title: getI18n("vxe.custom.setting.sortHelpTip") }, isHidden ? {} : {
                  onMousedown: sortMousedownEvent,
                  onMouseup: sortMouseupEvent
                }), [
                  vue.h("i", {
                    class: getIcon().TABLE_CUSTOM_SORT
                  })
                ])
              ]) : renderEmptyElement($xeTable),
              column.type === "html" ? vue.h("div", {
                key: "1",
                class: "vxe-table-custom--checkbox-label",
                innerHTML: colTitle
              }) : vue.h("div", {
                key: "0",
                class: "vxe-table-custom--checkbox-label"
              }, colTitle)
            ]),
            !parent && allowFixed ? vue.h("div", {
              class: "vxe-table-custom--fixed-option"
            }, [
              VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                mode: "text",
                icon: column.renderFixed === "left" ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
                status: column.renderFixed === "left" ? "primary" : "",
                disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
                title: getI18n(column.renderFixed === "left" ? "vxe.toolbar.cancelFixed" : "vxe.toolbar.fixedLeft"),
                onClick: ({ $event }) => {
                  changeFixedOption(column, "left", $event);
                }
              }) : renderEmptyElement($xeTable),
              VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                mode: "text",
                icon: column.renderFixed === "right" ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
                status: column.renderFixed === "right" ? "primary" : "",
                disabled: isHidden || isMaxFixedColumn && !column.renderFixed,
                title: getI18n(column.renderFixed === "right" ? "vxe.toolbar.cancelFixed" : "vxe.toolbar.fixedRight"),
                onClick: ({ $event }) => {
                  changeFixedOption(column, "right", $event);
                }
              }) : renderEmptyElement($xeTable)
            ]) : renderEmptyElement($xeTable)
          ]));
        }
      });
      return vue.h("div", {
        ref: refElem,
        key: "simple",
        class: ["vxe-table-custom-wrapper", `placement--${placement}`, {
          "is--active": customStore.visible
        }],
        style: maxHeight && !["left", "right"].includes(placement || "") ? {
          maxHeight: `${maxHeight}px`
        } : {}
      }, customStore.visible ? [
        vue.h("div", {
          ref: refBodyWrapperElem,
          class: "vxe-table-custom-simple--body-wrapper"
        }, [
          !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? vue.h($xeTable.getPivotTableAggregateSimplePanel(), {
            customStore
          }) : renderEmptyElement($xeTable),
          vue.h("div", {
            ref: refCustomBodyElem,
            class: "vxe-table-custom--handle-wrapper"
          }, [
            vue.h("div", {
              class: "vxe-table-custom--header"
            }, headerSlot ? $xeTable.callSlot(headerSlot, params) : [
              vue.h("ul", {
                class: "vxe-table-custom--panel-list"
              }, [
                vue.h("li", {
                  class: "vxe-table-custom--option"
                }, [
                  allowVisible ? vue.h("div", {
                    class: ["vxe-table-custom--checkbox-option", {
                      "is--checked": isAllChecked,
                      "is--indeterminate": isAllIndeterminate
                    }],
                    title: getI18n("vxe.table.allTitle"),
                    onClick: allOptionEvent
                  }, [
                    vue.h("span", {
                      class: ["vxe-checkbox--icon", isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
                    }),
                    vue.h("span", {
                      class: "vxe-checkbox--label"
                    }, getI18n("vxe.toolbar.customAll"))
                  ]) : vue.h("span", {
                    class: "vxe-checkbox--label"
                  }, getI18n("vxe.table.customTitle"))
                ])
              ])
            ]),
            vue.h("div", {
              class: "vxe-table-custom--body"
            }, [
              topSlot ? vue.h("div", {
                class: "vxe-table-custom--panel-top"
              }, $xeTable.callSlot(topSlot, params)) : renderEmptyElement($xeTable),
              defaultSlot ? vue.h("div", {
                class: "vxe-table-custom--panel-body"
              }, $xeTable.callSlot(defaultSlot, params)) : vue.h(vue.TransitionGroup, Object.assign({ class: "vxe-table-custom--panel-list", name: "vxe-table-custom--list", tag: "ul" }, customWrapperOns), {
                default: () => colVNs
              }),
              bottomSlot ? vue.h("div", {
                class: "vxe-table-custom--panel-bottom"
              }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable)
            ]),
            customOpts.showFooter ? vue.h("div", {
              class: "vxe-table-custom--footer"
            }, footerSlot ? $xeTable.callSlot(footerSlot, params) : [
              vue.h("div", {
                class: "vxe-table-custom--footer-buttons"
              }, [
                VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                  mode: "text",
                  content: customOpts.resetButtonText || getI18n("vxe.table.customRestore"),
                  disabled: !isCustomStatus,
                  onClick: resetCustomEvent
                }) : renderEmptyElement($xeTable),
                immediate ? VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                  mode: "text",
                  content: customOpts.closeButtonText || getI18n("vxe.table.customClose"),
                  onClick: cancelCloseEvent
                }) : renderEmptyElement($xeTable) : VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                  mode: "text",
                  content: customOpts.cancelButtonText || getI18n("vxe.table.customCancel"),
                  onClick: cancelCustomEvent
                }) : renderEmptyElement($xeTable),
                immediate ? renderEmptyElement($xeTable) : VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
                  mode: "text",
                  status: "primary",
                  content: customOpts.confirmButtonText || getI18n("vxe.table.customConfirm"),
                  onClick: confirmCustomEvent
                }) : renderEmptyElement($xeTable)
              ])
            ]) : null
          ]),
          renderDragTip()
        ])
      ] : []);
    };
    const renderPopupPanel = () => {
      const $xeGrid = $xeTable.xeGrid;
      const $xeGantt = $xeTable.xeGantt;
      const { customStore } = props;
      const { treeConfig, rowGroupConfig, aggregateConfig, resizable: allResizable } = tableProps;
      const { isCustomStatus, customColumnList } = tableReactData;
      const customOpts = computeCustomOpts.value;
      const { immediate } = customOpts;
      const columnDragOpts = computeColumnDragOpts.value;
      const { mode, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
      const columnOpts = computeColumnOpts.value;
      const { maxFixedSize } = columnOpts;
      const resizableOpts = computeResizableOpts.value;
      const { minWidth: reMinWidth, maxWidth: reMaxWidth } = resizableOpts;
      const modalOpts = Object.assign({}, modalOptions);
      const drawerOpts = Object.assign({}, drawerOptions);
      const isMaxFixedColumn = computeIsMaxFixedColumn.value;
      const { isCrossDrag } = columnDragOpts;
      const slots = customOpts.slots || {};
      const headerSlot = slots.header;
      const topSlot = slots.top;
      const bottomSlot = slots.bottom;
      const defaultSlot = slots.default;
      const footerSlot = slots.footer;
      const trVNs = [];
      const isAllChecked = customStore.isAll;
      const isAllIndeterminate = customStore.isIndeterminate;
      const params = {
        $table: $xeTable,
        $grid: $xeGrid,
        $gantt: $xeGantt,
        columns: customColumnList,
        isAllChecked,
        isAllIndeterminate,
        isCustomStatus
      };
      XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
        const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true;
        if (isVisible) {
          let customMinWidth = 0;
          let customMaxWidth = 0;
          if (allowResizable) {
            const resizeParams = {
              $table: $xeTable,
              column,
              columnIndex: index,
              $columnIndex: index,
              $rowIndex: -1
            };
            if (reMinWidth) {
              customMinWidth = XEUtils.toNumber(XEUtils.isFunction(reMinWidth) ? reMinWidth(resizeParams) : reMinWidth);
            }
            if (reMaxWidth) {
              customMaxWidth = XEUtils.toNumber(XEUtils.isFunction(reMaxWidth) ? reMaxWidth(resizeParams) : reMaxWidth);
            }
          }
          const isChecked = column.renderVisible;
          const isIndeterminate = column.halfVisible;
          const colTitle = utils.formatText(column.getTitle(), 1);
          const isColGroup = column.children && column.children.length;
          const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false;
          const isHidden = !isChecked;
          trVNs.push(vue.h("tr", {
            key: column.id,
            colid: column.id,
            class: [`vxe-table-custom-popup--row level--${column.level}`, {
              "is--group": isColGroup
            }],
            onDragstart: sortDragstartEvent,
            onDragend: sortDragendEvent,
            onDragover: sortDragoverEvent
          }, [
            allowVisible ? vue.h("td", {
              class: "vxe-table-custom-popup--column-item col--visible"
            }, [
              vue.h("div", {
                class: ["vxe-table-custom--checkbox-option", {
                  "is--checked": isChecked,
                  "is--indeterminate": isIndeterminate,
                  "is--disabled": isDisabled
                }],
                title: getI18n("vxe.custom.setting.colVisible"),
                onClick: (evnt) => {
                  if (!isDisabled) {
                    changeCheckboxOption(column, evnt);
                  }
                }
              }, [
                vue.h("span", {
                  class: ["vxe-checkbox--icon", isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
                })
              ])
            ]) : renderEmptyElement($xeTable),
            vue.h("td", {
              class: "vxe-table-custom-popup--column-item col--name"
            }, [
              vue.h("div", {
                class: "vxe-table-custom-popup--name"
              }, [
                allowSort ? (isCrossDrag ? immediate : false) || column.level === 1 ? vue.h("div", Object.assign({ class: ["vxe-table-custom-popup--column-sort-btn", {
                  "is--disabled": isHidden
                }], title: getI18n("vxe.custom.setting.sortHelpTip") }, isHidden ? {} : {
                  onMousedown: sortMousedownEvent,
                  onMouseup: sortMouseupEvent
                }), [
                  vue.h("i", {
                    class: getIcon().TABLE_CUSTOM_SORT
                  })
                ]) : vue.h("div", {
                  class: "vxe-table-custom-popup--column-sort-placeholder"
                }) : renderEmptyElement($xeTable),
                column.type === "html" ? vue.h("div", {
                  key: "1",
                  class: "vxe-table-custom-popup--title",
                  innerHTML: colTitle
                }) : vue.h("div", {
                  key: "0",
                  class: "vxe-table-custom-popup--title",
                  title: colTitle
                }, colTitle)
              ])
            ]),
            allowResizable ? vue.h("td", {
              class: "vxe-table-custom-popup--column-item col--resizable"
            }, [
              column.children && column.children.length || !(XEUtils.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? vue.h("span", "-") : VxeUINumberInputComponent ? vue.h(VxeUINumberInputComponent, {
                type: "integer",
                immediate: false,
                disabled: isHidden,
                modelValue: column.renderResizeWidth,
                min: customMinWidth || void 0,
                max: customMaxWidth || void 0,
                "onUpdate:modelValue"(value) {
                  const width = Math.max(0, Number(value));
                  column.renderResizeWidth = width;
                },
                onChange() {
                  changeColumnWidth(column);
                }
              }) : renderEmptyElement($xeTable)
            ]) : renderEmptyElement($xeTable),
            allowFixed ? vue.h("td", {
              class: "vxe-table-custom-popup--column-item col--fixed"
            }, [
              parent ? vue.h("span", "-") : VxeUIRadioGroupComponent ? vue.h(VxeUIRadioGroupComponent, {
                modelValue: column.renderFixed || "",
                type: "button",
                size: "mini",
                disabled: isHidden,
                options: [
                  { label: getI18n("vxe.custom.setting.fixedLeft"), value: "left", disabled: isHidden || isMaxFixedColumn },
                  { label: getI18n("vxe.custom.setting.fixedUnset"), value: "", disabled: isHidden },
                  { label: getI18n("vxe.custom.setting.fixedRight"), value: "right", disabled: isHidden || isMaxFixedColumn }
                ],
                onChange({ label, $event }) {
                  changeFixedOption(column, label, $event);
                }
              }) : renderEmptyElement($xeTable)
            ]) : renderEmptyElement($xeTable)
          ]));
        }
      });
      const scopedSlots = {
        default: () => {
          return vue.h("div", {
            ref: refBodyWrapperElem,
            class: "vxe-table-custom-popup--body-wrapper"
          }, defaultSlot ? $xeTable.callSlot(defaultSlot, params) : [
            vue.h("div", {
              ref: refCustomBodyElem,
              class: "vxe-table-custom-popup--handle-wrapper"
            }, [
              topSlot ? vue.h("div", {
                class: "vxe-table-custom-popup--table-top"
              }, $xeTable.callSlot(topSlot, params)) : renderEmptyElement($xeTable),
              vue.h("div", {
                class: "vxe-table-custom-popup--table-wrapper"
              }, [
                vue.h("table", {}, [
                  vue.h("colgroup", {}, [
                    allowVisible ? vue.h("col", {
                      class: "vxe-table-custom-popup--table-col-seq"
                    }) : renderEmptyElement($xeTable),
                    vue.h("col", {
                      class: "vxe-table-custom-popup--table-col-title"
                    }),
                    allowResizable ? vue.h("col", {
                      class: "vxe-table-custom-popup--table-col-width"
                    }) : renderEmptyElement($xeTable),
                    allowFixed ? vue.h("col", {
                      class: "vxe-table-custom-popup--table-col-fixed"
                    }) : renderEmptyElement($xeTable)
                  ]),
                  vue.h("thead", {}, [
                    vue.h("tr", {}, [
                      allowVisible ? vue.h("th", {}, [
                        vue.h("div", {
                          class: ["vxe-table-custom--checkbox-option", {
                            "is--checked": isAllChecked,
                            "is--indeterminate": isAllIndeterminate
                          }],
                          title: getI18n("vxe.table.allTitle"),
                          onClick: allOptionEvent
                        }, [
                          vue.h("span", {
                            class: ["vxe-checkbox--icon", isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
                          }),
                          vue.h("span", {
                            class: "vxe-checkbox--label"
                          }, getI18n("vxe.toolbar.customAll"))
                        ])
                      ]) : renderEmptyElement($xeTable),
                      vue.h("th", {}, getI18n("vxe.custom.setting.colTitle")),
                      allowResizable ? vue.h("th", {}, getI18n("vxe.custom.setting.colResizable")) : renderEmptyElement($xeTable),
                      allowFixed ? vue.h("th", {}, getI18n(`vxe.custom.setting.${maxFixedSize ? "colFixedMax" : "colFixed"}`, [maxFixedSize])) : renderEmptyElement($xeTable)
                    ])
                  ]),
                  vue.h(vue.TransitionGroup, {
                    class: "vxe-table-custom--panel-list",
                    tag: "tbody",
                    name: "vxe-table-custom--list"
                  }, {
                    default: () => trVNs
                  })
                ])
              ]),
              bottomSlot ? vue.h("div", {
                class: "vxe-table-custom-popup--table-bottom"
              }, $xeTable.callSlot(bottomSlot, params)) : renderEmptyElement($xeTable),
              renderDragTip()
            ]),
            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? vue.h($xeTable.getPivotTableAggregatePopupPanel(), {
              customStore
            }) : renderEmptyElement($xeTable)
          ]);
        },
        footer: () => {
          if (footerSlot) {
            return $xeTable.callSlot(footerSlot, params);
          }
          return vue.h("div", {
            class: "vxe-table-custom-popup--footer"
          }, [
            VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
              content: customOpts.resetButtonText || getI18n("vxe.custom.cstmRestore"),
              disabled: !isCustomStatus,
              onClick: resetCustomEvent
            }) : renderEmptyElement($xeTable),
            immediate ? VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
              content: customOpts.closeButtonText || getI18n("vxe.table.customClose"),
              onClick: cancelCloseEvent
            }) : renderEmptyElement($xeTable) : VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
              content: customOpts.cancelButtonText || getI18n("vxe.table.customCancel"),
              onClick: cancelCustomEvent
            }) : renderEmptyElement($xeTable),
            immediate ? renderEmptyElement($xeTable) : VxeUIButtonComponent ? vue.h(VxeUIButtonComponent, {
              status: "primary",
              content: customOpts.confirmButtonText || getI18n("vxe.custom.cstmConfirm"),
              onClick: confirmCustomEvent
            }) : renderEmptyElement($xeTable)
          ]);
        }
      };
      if (headerSlot) {
        scopedSlots.header = () => $xeTable.callSlot(headerSlot, params);
      }
      if (mode === "drawer") {
        return VxeUIDrawerComponent ? vue.h(VxeUIDrawerComponent, {
          key: "drawer",
          className: ["vxe-table-custom-drawer-wrapper", "vxe-table--ignore-clear", drawerOpts.className || ""].join(" "),
          modelValue: customStore.visible,
          title: drawerOpts.title || getI18n("vxe.custom.cstmTitle"),
          width: drawerOpts.width || Math.min(880, Math.floor(document.documentElement.clientWidth * 0.6)),
          position: drawerOpts.position,
          resize: !!drawerOpts.resize,
          escClosable: !!drawerOpts.escClosable,
          maskClosable: !!drawerOpts.maskClosable,
          destroyOnClose: true,
          showFooter: true,
          "onUpdate:modelValue"(value) {
            customStore.visible = value;
          }
        }, scopedSlots) : renderEmptyElement($xeTable);
      }
      return VxeUIModalComponent ? vue.h(VxeUIModalComponent, {
        key: "modal",
        className: ["vxe-table-custom-modal-wrapper", "vxe-table--ignore-clear", modalOpts.className || ""].join(" "),
        modelValue: customStore.visible,
        title: modalOpts.title || getI18n("vxe.custom.cstmTitle"),
        width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
        minWidth: modalOpts.minWidth || 700,
        height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
        minHeight: modalOpts.minHeight || 400,
        showZoom: modalOpts.showZoom,
        showMaximize: modalOpts.showMaximize,
        showMinimize: modalOpts.showMinimize,
        mask: modalOpts.mask,
        lockView: modalOpts.lockView,
        resize: modalOpts.resize,
        escClosable: !!modalOpts.escClosable,
        maskClosable: !!modalOpts.maskClosable,
        destroyOnClose: true,
        showFooter: true,
        "onUpdate:modelValue"(value) {
          customStore.visible = value;
        }
      }, scopedSlots) : renderEmptyElement($xeTable);
    };
    const renderVN = () => {
      const customOpts = computeCustomOpts.value;
      if (["modal", "drawer", "popup"].includes(`${customOpts.mode}`)) {
        return renderPopupPanel();
      }
      return renderSimplePanel();
    };
    vue.nextTick(() => {
      const customOpts = computeCustomOpts.value;
      const { mode } = customOpts;
      if (!VxeUIModalComponent && mode === "modal") {
        log.errLog("vxe.error.reqComp", ["vxe-modal"]);
      }
      if (!VxeUIDrawerComponent && mode === "drawer") {
        log.errLog("vxe.error.reqComp", ["vxe-drawer"]);
      }
      if (!VxeUIButtonComponent) {
        log.errLog("vxe.error.reqComp", ["vxe-button"]);
      }
      if (!VxeUINumberInputComponent) {
        log.errLog("vxe.error.reqComp", ["vxe-number-input"]);
      }
      if (!VxeUIRadioGroupComponent) {
        log.errLog("vxe.error.reqComp", ["vxe-radio-group"]);
      }
    });
    const $xeTableCustomPanel = {
      xID,
      props,
      context,
      reactData: customPanelReactData,
      internalData: customPanelInternalData,
      xeTable: $xeTable,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps,
      renderVN
    };
    vue.onUnmounted(() => {
      customPanelInternalData = createInternalData();
    });
    vue.provide("$xeTableCustomPanel", $xeTableCustomPanel);
    return $xeTableCustomPanel;
  },
  render() {
    return this.renderVN();
  }
});
exports.createInternalData = createInternalData;
exports.default = TableCustomPanelComponent;
