<template>
  <span class="label">{{ getLabel }}</span>
  <div class="button" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
    <span class="icon" style="border-top-color: #FFFFFF!important;"></span>
  </div>
  <select class="ghost" id="stadortID" name="standort" v-model="selectedStandort">
    <option value="0">{{ $t('front_externMP.select_alle') }}</option>
    <option v-for="(location, key) in $store.state.locations" v-bind:key="key" :value="location.id">{{location.name}}</option>
  </select>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    computed: {
      selectedStandort: {
        get: function () {
          return this.$store.state.selected['location'];
        },
        set: function (state) {
          this.$store.commit('setSelected', {item: 'location', state: state});
          this.$emit('reloadData')
        }
      },
      getLabel() {
        if(this.$store.state.selected.location == 0) {
          return this.$t('front_externMP.select_alle');
        }
        var ndx = this.$store.state.locations.findIndex(i => i.id === this.$store.state.selected.location);
        return this.$store.state.locations[ndx].name;
      },
    },
    methods: {
    },
  }
</script>
