<template>
    <transition name="el-zoom-in-center">
      <div aria-hidden="true" class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu" role="tooltip"
        data-popper-placement="bottom" :style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`" :key="Math.random()"
        v-show="state.isShow">
        <ul class="el-dropdown-menu">
          <li v-for="(v, k) in state.menuitems" class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1"
            :key="k" @click="onCurrentClick(v['command'])">
            <SvgIcon :name="v['icon']" />
            <span>{{ v['txt'] }}</span>
          </li>
        </ul>
        <div class="el-popper__arrow" style="left: 10px"></div>
      </div>
    </transition>
  </template>
    
  <script lang="ts" setup>
  import { computed, reactive, onMounted, onUnmounted } from "vue";
  
  const props = defineProps({
    dropdown: {
      type: Object,
    },
  });
  const emit = defineEmits(["click", "contextmenu", "onedgeopencommand"]);
  
  const state = reactive({
    isShow: false,
    menuitems: [
  
    ],
    sender: {}
  
  });
  // 父级传过来的坐标 x,y 值
  const dropdowns = computed(() => {
    return <any>props.dropdown;
  });
  // 当前项菜单点击
  const onCurrentClick = (command: string) => {
    emit(
      "onedgeopencommand",
      { command, sender:state.sender }
  
    );
  };
  // 打开右键菜单：判断是否固定，固定则不显示关闭按钮
  const openContextmenu = (sender: any) => {

    //此处为edge对象
    state.sender = sender;
    state.menuitems = sender.store?.data?.bizdata?.command?.contextmenu
    closeContextmenu();
    setTimeout(() => {
      state.isShow = true;
    }, 10);
  };
  // 关闭右键菜单
  const closeContextmenu = () => {
    state.isShow = false;
  };
  // 监听页面监听进行右键菜单的关闭
  onMounted(() => {
    document.body.addEventListener("click", closeContextmenu);
    document.body.addEventListener("contextmenu", closeContextmenu);
  });
  // 页面卸载时，移除右键菜单监听事件
  onUnmounted(() => {
    document.body.removeEventListener("click", closeContextmenu);
    document.body.removeEventListener("contextmenu", closeContextmenu);
  });
  
  defineExpose({
    openContextmenu,
  });
  </script>
    
  <style scoped lang="scss">
  .custom-contextmenu {
    transform-origin: center top;
    z-index: 2190;
    position: fixed;
  
    .el-dropdown-menu__item {
      font-size: 12px !important;
      white-space: nowrap;
  
      i {
        font-size: 12px !important;
      }
    }
  }
  </style>
    