"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../../ui/src/comp.js");
const XEUtils = require("xe-utils");
require("../../../ui/index.js");
const utils = require("../../../ui/src/utils.js");
const vn = require("../../../ui/src/vn.js");
const index_esm = require("../../../../../@vxe-ui/core/es/index.esm.js");
const { getIcon, getI18n, renderEmptyElement } = index_esm.VxeUI;
const TableMenuPanelComponent = comp.defineVxeComponent({
  name: "VxeTableMenuPanel",
  setup(props, context) {
    const xID = XEUtils.uniqueId();
    const $xeTable = vue.inject("$xeTable", {});
    const { reactData: tableReactData } = $xeTable;
    const refElem = vue.ref();
    const refMaps = {
      refElem
    };
    const $xeMenuPanel = {
      xID,
      props,
      context,
      getRefMaps: () => refMaps
    };
    const renderVN = () => {
      const { ctxMenuStore } = tableReactData;
      const { computeMenuOpts } = $xeTable.getComputeMaps();
      const menuOpts = computeMenuOpts.value;
      const { transfer, destroyOnClose } = menuOpts;
      const { visible, list, className } = ctxMenuStore;
      return vue.h(vue.Teleport, {
        to: "body",
        disabled: !transfer
      }, [
        vue.h("div", {
          ref: refElem,
          class: ["vxe-table--context-menu-wrapper", className, {
            "is--visible": visible
          }],
          style: ctxMenuStore.style
        }, (destroyOnClose ? visible : true) ? list.map((options, gIndex) => {
          return options.every((item) => item.visible === false) ? renderEmptyElement($xeTable) : vue.h("ul", {
            class: "vxe-context-menu--option-wrapper",
            key: gIndex
          }, options.map((item, index) => {
            const { children, loading } = item;
            const hasChildMenus = children && children.some((child) => child.visible !== false);
            const prefixOpts = Object.assign({}, item.prefixConfig);
            const prefixIcon = prefixOpts.icon || item.prefixIcon;
            const suffixOpts = Object.assign({}, item.suffixConfig);
            const suffixIcon = suffixOpts.icon || item.suffixIcon;
            const menuContent = utils.getFuncText(item.name);
            return item.visible === false ? renderEmptyElement($xeTable) : vue.h("li", {
              class: [item.className, {
                "link--loading": loading,
                "link--disabled": item.disabled,
                "link--active": item === ctxMenuStore.selected
              }],
              key: `${gIndex}_${index}`
            }, [
              vue.h("a", {
                class: "vxe-context-menu--link",
                onClick(evnt) {
                  $xeTable.ctxMenuLinkEvent(evnt, item);
                },
                onMouseover(evnt) {
                  $xeTable.ctxMenuMouseoverEvent(evnt, item);
                },
                onMouseout(evnt) {
                  $xeTable.ctxMenuMouseoutEvent(evnt, item);
                }
              }, [
                vue.h("div", {
                  class: ["vxe-context-menu--link-prefix", prefixOpts.className || ""]
                }, [
                  loading ? vue.h("span", {
                    class: getIcon("TABLE_MENU_OPTION_LOADING")
                  }) : prefixIcon && XEUtils.isFunction(prefixIcon) ? vue.h("span", {}, vn.getSlotVNs(prefixIcon({}))) : vue.h("span", {}, [
                    vue.h("i", {
                      class: prefixIcon
                    })
                  ]),
                  prefixOpts.content ? vue.h("span", {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
                ]),
                vue.h("div", {
                  class: "vxe-context-menu--link-content",
                  title: menuContent
                }, loading ? getI18n("vxe.table.menuLoading") : menuContent),
                vue.h("div", {
                  class: ["vxe-context-menu--link-suffix", suffixOpts.className || ""]
                }, [
                  suffixIcon && XEUtils.isFunction(suffixIcon) ? vue.h("span", {}, vn.getSlotVNs(suffixIcon({}))) : vue.h("i", {
                    class: suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : "")
                  }),
                  suffixOpts.content ? vue.h("span", `${suffixOpts.content}`) : renderEmptyElement($xeTable)
                ])
              ]),
              hasChildMenus && item.children ? vue.h("ul", {
                class: ["vxe-table--context-menu-clild-wrapper", {
                  "is--show": item === ctxMenuStore.selected && ctxMenuStore.showChild
                }]
              }, item.children.map((child, cIndex) => {
                const { loading: childLoading } = child;
                const childPrefixOpts = Object.assign({}, child.prefixConfig);
                const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon;
                const childSuffixOpts = Object.assign({}, child.suffixConfig);
                const childSuffixIcon = childSuffixOpts.icon || child.suffixIcon;
                const childMenuContent = utils.getFuncText(child.name);
                return child.visible === false ? null : vue.h("li", {
                  class: [child.className, {
                    "link--loading": childLoading,
                    "link--disabled": child.disabled,
                    "link--active": child === ctxMenuStore.selectChild
                  }],
                  key: `${gIndex}_${index}_${cIndex}`
                }, [
                  vue.h("a", {
                    class: "vxe-context-menu--link",
                    onClick(evnt) {
                      $xeTable.ctxMenuLinkEvent(evnt, child);
                    },
                    onMouseover(evnt) {
                      $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
                    },
                    onMouseout(evnt) {
                      $xeTable.ctxMenuMouseoutEvent(evnt, item);
                    }
                  }, [
                    vue.h("div", {
                      class: ["vxe-context-menu--link-prefix", childPrefixOpts.className || ""]
                    }, [
                      child.loading ? vue.h("span", {
                        class: getIcon("TABLE_MENU_OPTION_LOADING")
                      }) : childPrefixIcon && XEUtils.isFunction(childPrefixIcon) ? vue.h("span", {}, vn.getSlotVNs(childPrefixIcon({}))) : vue.h("span", {}, [
                        vue.h("i", {
                          class: childPrefixIcon
                        })
                      ]),
                      childPrefixOpts.content ? vue.h("span", `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
                    ]),
                    vue.h("div", {
                      class: "vxe-context-menu--link-content",
                      title: childMenuContent
                    }, childLoading ? getI18n("vxe.table.menuLoading") : childMenuContent),
                    vue.h("div", {
                      class: ["vxe-context-menu--link-suffix", childSuffixOpts.className || ""]
                    }, [
                      childSuffixIcon && XEUtils.isFunction(childSuffixIcon) ? vue.h("span", {}, vn.getSlotVNs(childSuffixIcon({}))) : vue.h("i", {
                        class: childSuffixIcon
                      }),
                      childSuffixOpts.content ? vue.h("span", `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
                    ])
                  ])
                ]);
              })) : null
            ]);
          }));
        }) : [])
      ]);
    };
    $xeMenuPanel.renderVN = renderVN;
    return $xeMenuPanel;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = TableMenuPanelComponent;
