<template>
  <transition name="el-zoom-in-center">
    <div class="el-popper is-pure is-light el-dropdown__popper ba-contextmenu" :style="`top: ${state.axis.y > 650 ? state.axis.y - 200 : state.axis.y + 18}px;left: ${state.axis.x - 14
      }px;width:187px`" :key="Math.random()" v-show="state.show" aria-hidden="false" data-popper-placement="top">
      <ul class="el-dropdown-menu">
        <template v-for="(item, idx) in props.items" :key="idx">
          <li class="el-dropdown-menu__item" :class="item.disabled ? 'is-disabled' : ''" tabindex="-1"
            @click="onContextmenuItem(item)">
            <el-icon size="18px" v-if="item.icon == 'Plus'">
              <Plus />
            </el-icon>
            <el-icon size="18px" v-if="item.icon == 'CirclePlus'">
              <CirclePlus />
            </el-icon>
            <el-icon size="18px" v-if="item.icon == 'Edit'">
              <Edit />
            </el-icon>
            <el-icon size="18px" v-if="item.icon == 'Download'">
              <Download />
            </el-icon>

            <el-icon size="18px" v-if="item.icon == 'Upload'">
              <Upload />
            </el-icon>

            <el-icon size="18px" v-if="item.icon == 'Delete'">
              <Delete />
            </el-icon>
            <el-icon size="18px" v-if="item.icon == 'CaretTop'">
              <CaretTop />
            </el-icon>
            <el-icon size="18px" v-if="item.icon == 'CaretBottom'">
              <CaretBottom />
            </el-icon>
            <el-icon size="18px" v-if="item.icon == 'Downloads'">
              <Download />
            </el-icon>
            <el-icon size="18px" v-if="item.icon == 'Location'">
              <Location />
            </el-icon>
            <span>{{ item.label }}</span>

          </li>
        </template>
      </ul>
      <span class="el-popper__arrow" :style="{ left: `${state.arrowAxis}px` }"></span>
    </div>
  </transition>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, toRaw, defineProps, defineEmits, watch } from "vue";
const props = defineProps({
  items: {
    type: Array,
    default: []
  },
  showmenu: Object
});
const emits = defineEmits(["contextmenuItemClick"]);
const state = reactive({
  show: false,
  axis: {
    x: 0,
    y: 0
  },
  menu: {},
  arrowAxis: 10,
  parentData: {}
});
watch(
  () => props.showmenu,
  (newVal) => {
    if (newVal) {
      state.show = false
    }
  },
  { deep: true, immediate: true }
);
const onShowContextmenu = (menu, axis, parentdatas) => {
  state.menu = menu;
  state.axis = axis;
  state.show = true;
  state.parentData = parentdatas
};

const onContextmenuItem = (item) => {
  if (item.disabled) return;
  item.menu = toRaw(state.menu);
  emits("contextmenuItemClick", item, state.parentData);
};

const onHideContextmenu = () => {
  state.show = false;
};

defineExpose({
  onShowContextmenu,
  onHideContextmenu
});

onMounted(() => {
  document.body.addEventListener("click", onHideContextmenu);
});
onUnmounted(() => {
  document.body.removeEventListener("click", onHideContextmenu);
});
</script>

<style scoped lang="scss">
.ba-contextmenu {
  z-index: 9999;
  position: fixed;
}

.el-popper,
.el-popper.is-light .el-popper__arrow::before {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

.el-dropdown-menu__item {
  padding: 8px 20px;
  user-select: none;
}

.el-dropdown-menu__item .icon {
  margin-right: 5px;
}

.el-dropdown-menu__item:not(.is-disabled) {
  &:hover {
    background-color: var(--el-dropdown-menuItem-hover-fill);
    color: var(--el-dropdown-menuItem-hover-color);

    .fa {
      color: var(--el-dropdown-menuItem-hover-color) !important;
    }
  }
}
</style>
