<template>
  <section class="admin-login">
    <!--Importar componente de header para login -->
    <Header />
    <div>
      <h1>Hackaton UNAM-AWS</h1>
    </div>
    <div class="container">
      <div class="row">
        <table class="table">
          <thead class="thead-dark">
            <tr class="titulo">
              <th scope="col">#</th>
              <th scope="col">Nombre del Equipo</th>
              <th scope="col">Numero de Integrantes</th>
              <th scope="col">Nombre del Lider</th>
              <th scope="col">Correo</th>
              <th scope="col">Carrera</th>
              <th scope="col">Campus</th>
              <th scope="col">Fecha de Registro</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in registros" :key="item.idEquipo">
              <th scope="row">{{ item.idEquipo }}</th>
              <td>{{ item.nombreEquipo }}</td>
              <td>{{ item.numeroIntegrantes }}</td>
              <td>{{ item.nombre }}</td>
              <td>{{ item.correo }}</td>
              <td>{{ item.carrera }}</td>
              <td>{{ item.campus }}</td>
              <td>{{ item.fecha }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";

import Header from "./../view/headerAdmin.vue";

export default {
  components: {
    //HelloWorld
    Header
  },
  data() {
    return {
      registros: []
    };
  },

  async created() {
    let equipos = await axios.get(`${config.api}/getRegistro`);
    equipos = equipos.data.data;
    for (let i = 0; i < equipos.length; i++) {
      console.log(`   Fecha ${equipos[i].fechaRegistro}`);
      if (equipos[i].fechaRegistro !== null) {
        equipos[i].fechaRegistro = new Date(equipos[i].fechaRegistro)
          .toISOString()
          .slice(0, 19)
          .replace("T", " / ");
        //console.log(  `   Nueva Fecha de registro Fecha ${equipos[i].fechaRegistro}`);
      }
      this.registros.push({
        idEquipo: i+1,
        nombreEquipo: equipos[i].nombreEquipo,
        numeroIntegrantes: equipos[i].numeroIntegrantes,
        nombre: equipos[i].nombre,
        correo: equipos[i].correo,
        carrera: equipos[i].carrera,
        campus: equipos[i].campus,
        fecha: equipos[i].fechaRegistro
      });
    }
  },
  beforeCreate() {
    if (!window.localStorage.getItem("id_usuario")) this.$router.push("/");
    else this.id = window.localStorage.getItem("id_usuario");
  }
};
</script>

<style scoped>
h1 {
  margin-top: 2.5rem;
  margin-bottom: 3.5rem;
  font-size: 1.5rem;
}

.titulo{
  font-size: .8rem;
}
td{
  font-size: .8rem;
}


@media screen and (min-width: 1024px) {
  h1 {
    margin-top: 3rem;
    margin-bottom: 4rem;
    font-size: 2.5rem;
  }
}
</style>
