'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');

const _hoisted_1 = ["aria-hidden"];
const _hoisted_2 = { class: "el-dropdown-menu" };
const _hoisted_3 = ["onClick"];
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "contextmenu",
  props: {
    dropdown: {
      type: Object,
      default: () => {
        return {
          x: 0,
          y: 0
        };
      }
    }
  },
  emits: ["currentContextmenuClick"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const state = vue.reactive({
      isShow: false,
      dropdownList: [
        { contextMenuClickId: 0, txt: "message.tagsView.refresh", affix: false, icon: "ele-RefreshRight" },
        { contextMenuClickId: 1, txt: "message.tagsView.close", affix: false, icon: "ele-Close" },
        { contextMenuClickId: 2, txt: "message.tagsView.closeOther", affix: false, icon: "ele-CircleClose" },
        { contextMenuClickId: 3, txt: "message.tagsView.closeAll", affix: false, icon: "ele-FolderDelete" },
        {
          contextMenuClickId: 4,
          txt: "message.tagsView.fullscreen",
          affix: false,
          icon: "iconfont icon-fullscreen"
        }
      ],
      item: {},
      arrowLeft: 10
    });
    const dropdowns = vue.computed(() => {
      if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
        return {
          x: document.documentElement.clientWidth - 117 - 5,
          y: props.dropdown.y
        };
      } else {
        return props.dropdown;
      }
    });
    const onCurrentContextmenuClick = (contextMenuClickId) => {
      emit("currentContextmenuClick", Object.assign({}, { contextMenuClickId }, state.item));
    };
    const openContextmenu = (item) => {
      var _a;
      state.item = item;
      ((_a = item.meta) == null ? void 0 : _a.isAffix) ? state.dropdownList[1].affix = true : state.dropdownList[1].affix = false;
      closeContextmenu();
      setTimeout(() => {
        state.isShow = true;
      }, 10);
    };
    const closeContextmenu = () => {
      state.isShow = false;
    };
    vue.onMounted(() => {
      document.body.addEventListener("click", closeContextmenu);
    });
    vue.onUnmounted(() => {
      document.body.removeEventListener("click", closeContextmenu);
    });
    vue.watch(
      () => props.dropdown,
      ({ x }) => {
        if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
        else state.arrowLeft = 10;
      },
      {
        deep: true
      }
    );
    __expose({
      openContextmenu
    });
    return (_ctx, _cache) => {
      const _component_SvgIcon = vue.resolveComponent("SvgIcon");
      return vue.openBlock(), vue.createBlock(vue.Transition, {
        name: "el-collapse-transition",
        persisted: ""
      }, {
        default: vue.withCtx(() => [
          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
            "aria-hidden": state.isShow ? false : true,
            class: "el-dropdown__popper el-popper is-light is-pure custom-contextmenu",
            role: "tooltip",
            "data-popper-placement": "bottom",
            style: vue.normalizeStyle(`top: ${dropdowns.value.y + 5}px;left: ${dropdowns.value.x}px;`),
            key: Math.random()
          }, [
            vue.createElementVNode("ul", _hoisted_2, [
              (vue.openBlock(true), vue.createElementBlock(
                vue.Fragment,
                null,
                vue.renderList(state.dropdownList, (v, k) => {
                  return vue.openBlock(), vue.createElementBlock(
                    vue.Fragment,
                    null,
                    [
                      !v.affix ? (vue.openBlock(), vue.createElementBlock("li", {
                        class: "el-dropdown-menu__item",
                        "aria-disabled": "false",
                        tabindex: "-1",
                        key: k,
                        onClick: ($event) => onCurrentContextmenuClick(v.contextMenuClickId)
                      }, [
                        vue.createVNode(_component_SvgIcon, {
                          name: v.icon
                        }, null, 8, ["name"]),
                        vue.createElementVNode(
                          "span",
                          null,
                          vue.toDisplayString(_ctx.$t(v.txt)),
                          1
                          /* TEXT */
                        )
                      ], 8, _hoisted_3)) : vue.createCommentVNode("v-if", true)
                    ],
                    64
                    /* STABLE_FRAGMENT */
                  );
                }),
                256
                /* UNKEYED_FRAGMENT */
              ))
            ]),
            vue.createElementVNode(
              "div",
              {
                class: "el-popper__arrow",
                style: vue.normalizeStyle({ left: `${state.arrowLeft}px` })
              },
              null,
              4
              /* STYLE */
            )
          ], 12, _hoisted_1)), [
            [vue.vShow, state.isShow]
          ])
        ]),
        _: 1
        /* STABLE */
      });
    };
  }
});

exports.default = _sfc_main;
