<script setup lang="ts">
import { useRightMenu } from '../flowDetail/useRightMenu'
const { visible, x, y, items } = useRightMenu()
</script>
<template>
  <div
    v-if="visible"
    class="rightMenu absolute w-32 bg-white border border-gray-200 leading-8 border-solid"
    :style="{ top: y + 'px', left: x + 'px' }"
  >
    <p
      v-for="item in items"
      @click="item.click"
      class="rightMenuitem flex justify-between px-2 text-[13px]"
      :key="item.text"
    >
      <span>{{ item.text }}</span>
      <span v-if="item.keyCode">{{ item.keyCode }}</span>
    </p>
  </div>
</template>
<style lang="postcss" scoped>
.rightMenuitem:hover {
  background-color: #eee;
}
</style>