<template>
  <div class="eli-tabela__detalhes">
    <div v-for="(coluna, idx) in colunasInvisiveis" :key="`det-${idx}-${coluna.rotulo}`" class="eli-tabela__detalhe">
      <div class="eli-tabela__detalhe-rotulo">{{ coluna.rotulo }}</div>
      <div class="eli-tabela__detalhe-valor">
        <EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
import type { EliColuna } from "./types-eli-tabela";

export default defineComponent({
  name: "EliTabelaDetalhesLinha",
  components: { EliTabelaCelula },
  props: {
    linha: {
      type: null as unknown as PropType<unknown>,
      required: true,
    },
    colunasInvisiveis: {
      type: Array as PropType<Array<EliColuna<any>>>,
      required: true,
    },
  },
});
</script>

<style scoped>
/* estilos base ficam no EliTabela.css (global do componente) */
</style>