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