pcpuma_unam_operador/components/admin/InfoInstitucion.vue

<template>
  <div class="column is-8">
    <h3 class="is-size-4 mb-4">Datos de la Institución</h3>

    <div class="columns">
      <div class="column">
        <b-field label="Nombre de la Institución">
          <p class="input">{{ institucion.institucion }}</p>
        </b-field>

        <b-field label="Responsable">
          <p class="input">{{ institucion.responsable || '' }}</p>
        </b-field>

        <b-field label="Telefono">
          <p class="input">{{ institucion.telefono || '' }}</p>
        </b-field>

        <b-field label="Correo">
          <p class="input">{{ institucion.correo || '' }}</p>
        </b-field>

        <b-field label="Ubicación">
          <p class="input">{{ institucion.ubicacion || '' }}</p>
        </b-field>
      </div>

      <div class="column">
        <b-field label="Dominio">
          <p class="input">{{ institucion.dominio || '' }}</p>
        </b-field>

        <b-field label="Días de multa por retraso">
          <p class="input">{{ institucion.dias_multa_retraso }}</p>
        </b-field>

        <b-field label="Tiempo para recoger equipo">
          <p class="input">{{ institucion.tiempo_recoger }}</p>
        </b-field>

        <b-field label="Tiempo para entregar equipo">
          <p class="input">{{ institucion.tiempo_entrega }}</p>
        </b-field>

        <b-field label="Activo/Inactivo">
          <p
            class="input"
            v-for="(sA, i) in statusActivo"
            :key="i"
            :class="sA.tagType"
            v-show="institucion.activo === sA.activo"
          >
            {{ sA.texto }}
          </p>
        </b-field>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    institucion: { type: Object, required: true },
  },
  data() {
    return {
      statusActivo: [
        {
          texto: 'Activo',
          tagType: 'is-success',
          activo: true,
        },
        { texto: 'Inactivo', tagType: 'is-danger', activo: false },
      ],
    }
  },
}
</script>

<style></style>