<template>
  <div
    v-if="visible"
    :style="{ position: 'fixed', top: y + 'px', left: x + 'px', zIndex: 9999 }"
    class="custom-context-menu"
    @click.stop
  >
    <div class="menu-item">• Output Real-time Data</div>
    <div class="menu-item">• Input Sampling Data</div>
    <div class="menu-item">• 설비가동시간</div>
  </div>
</template>
<script setup lang="ts">
defineProps<{ visible: boolean; x: number; y: number }>();
</script>
<style scoped>
.custom-context-menu {
  background: #fff;
  border: 2px solid #bbb;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  min-width: 180px;
}
.menu-item {
  padding: 8px 16px;
  margin: 4px 0;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.menu-item:hover {
  background: #e0e0e0;
}
</style>
