<template>
    <div v-if="config && config.style === 'box' && institution">
        <h3>{{ institution.name }}</h3>
        <span v-if="displayOptions.includes('street')">Straße: {{ institution.street }}<br></span>
        <span v-if="displayOptions.includes('zipcode')">Postleitzahl: {{ institution.zipcode }}<br></span>
        <span v-if="displayOptions.includes('city')">Stadt: {{ institution.city }}<br></span>
        <span v-if="displayOptions.includes('email')">E-Mail: {{ institution.email }}<br></span>
        <span v-if="displayOptions.includes('phone')">Telefon: {{ institution.phone }}<br></span>
    </div>
    <span v-else-if="config.style === 'float' && institution">
        {{ institution.name }}
        <span v-if="displayOptions.includes('street')">, Straße: {{ institution.street }}</span>
        <span v-if="displayOptions.includes('zipcode')">, Postleitzahl: {{ institution.zipcode }}</span>
        <span v-if="displayOptions.includes('city')">, Stadt: {{ institution.city }}</span>
        <span v-if="displayOptions.includes('email')">, E-Mail: {{ institution.email }}</span>
        <span v-if="displayOptions.includes('phone')">, Telefon: {{ institution.phone }}</span>
    </span>
    <span v-else>
        {{ config }}<br/>
        ---
        {{ institution }}
    </span>
  </template>
  
  <script>
  import axios from '@/axios';
  
  export default {
    name: 'InstitutionRender',
    props: {
      config: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        institution: null,
        loading: true,
        error: null,
        displayOptions: [],
      };
    },
    async created() {
      try {
        this.displayOptions = this.config.display || [];
        const response = await axios.get('/institutions/' + this.config.id, {
          config: JSON.stringify(this.config),
        });
        this.institution = response.data;
        this.loading = false;
      } catch (error) {
        console.error('Error loading institutions:', error);
        this.error = 'Fehler beim Laden der Institutionen';
        this.loading = false;
      }
    },
  };
  </script>
  
  <style scoped>
  /* Add styles if needed */
  </style>
  