<template>
  <section class="mb-5">
    <h3 class="is-size-4 mb-3">Previsualización de los datos</h3>

    <b-table :data="data" class="mb-5" hoverable striped>
      <b-table-column
        field="usuario"
        label="Número de cuenta"
        v-slot="props"
        centered
      >
        <span>{{ props.row.usuario }}</span>
      </b-table-column>

      <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
        <span>{{ props.row.nombre }}</span>
      </b-table-column>

      <b-table-column
        field="posgrado"
        label="Carrera/Posgrado"
        v-slot="props"
        centered
      >
        <span v-if="props.row.Carrera">{{ props.row.Carrera.carrera }}</span>
      </b-table-column>

      <b-table-column
        field="tipoUsuario"
        label="Tipo Usuario"
        v-slot="props"
        centered
      >
        <span>{{ props.row.TipoUsuario.tipoUsuario }}</span>
      </b-table-column>
    </b-table>

    <div class="panel">
      <p class="panel-heading">Alumnos Actualizados</p>

      <p v-for="(uU, i) in usuariosUpdate" :key="i" class="panel-block">
        {{ uU }}
      </p>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    data: { type: Array, required: true },
    usuariosUpdate: { type: Array, required: true },
  },
}
</script>

<style></style>
