<template>
  <div class="container">
    <div class="columns">
      <div class="column is-2">
        <b-field>
          <b-input placeholder="No.Cuenta" icon="school" rounded></b-input>
        </b-field>
      </div>
      <div class="column is-2">
        <b-field>
          <b-input placeholder="Nombre" icon="account" rounded></b-input>
        </b-field>
      </div>
      <div class="column is-2">
        <b-field>
          <b-select placeholder="Status" icon="information" rounded>
            <optgroup label="Status">
              <option value="Pre-registro">Pre-registro</option>
              <option value="Pre-validado">Pre-validado</option>
              <option value="Registro">Registro</option>
              <option value="Pre-término">Pre-término</option>
              <option value="Término">Término</option>
              <option value="Liberado">Liberado</option>
              <option value="Rechazado">Rechazado</option>
            </optgroup>
          </b-select>
        </b-field>
      </div>
    </div>

    <div class="columns">
      <section class="column is-12 is-hoverable has-text-centered">
        <b-table :data="datos" :columns="columns"></b-table>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      datos: [
        {
          nombre: 'Andres Hernan Saavedra Trejo',
          carrera: 'Matematicas Aplicadas y computacion',
          noCuenta: 419085500,
          inicio: '1/11/2020',
          final: '1/5/2020',
          status: 'Pre-registro'
        },
        {
          nombre: 'Andres Hernan Saavedra Trejo',
          carrera: 'Matematicas Aplicadas y computacion',
          noCuenta: 419085500,
          inicio: '1/11/2020',
          final: '1/5/2020',
          status: 'Pre-registro'
        }
      ],
      columns: [
        {
          field: 'nombre',
          label: 'Nombre'
        },
        {
          field: 'carrera',
          label: 'Carrera'
        },
        {
          field: 'noCuenta',
          label: 'Número de Cuenta'
        },
        {
          field: 'inicio',
          label: 'Inicio'
        },
        {
          field: 'final',
          label: 'Final'
        },
        {
          field: 'status',
          label: 'Status'
        }
      ]
    }
  }
}
</script>

<style></style>
