<template>
  <!-- Debug visual (somente DEV): expõe estados internos úteis para testes e diagnóstico -->
  <div
    v-if="isDev"
    style="position: fixed; left: 8px; bottom: 8px; z-index: 999999; background: rgba(185,28,28,0.9); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; max-width: 500px;"
  >
    <div><b>EliTabela debug</b></div>
    <div>menuAberto: {{ menuAberto }}</div>
    <div>menuPos: top={{ menuPopupPos.top }}, left={{ menuPopupPos.left }}</div>
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "EliTabelaDebug",
  props: {
    isDev: {
      type: Boolean,
      required: true,
    },
    menuAberto: {
      type: Number as PropType<number | null>,
      required: true,
    },
    menuPopupPos: {
      type: Object as PropType<{ top: number; left: number }>,
      required: true,
    },
  },
});
</script>
