<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_extern.select_alle') }}</option>
    <option v-for="(model, key) in $store.state.models" v-bind:key="key" :value="key">{{model}}</option>
  </select>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    computed: {
      selectedModel: {
        get: function () {
          return this.$store.state.selected['model'];
        },
        set: function (state) {
          this.$store.commit('setSelected', {item: 'model', state: state});
          this.$emit('reloadData')
        }
      },
      getLabel() {
        if(this.$store.state.selected.model == 0) {
          return this.$t('front_extern.select_alle');
        }
        return this.$store.state.models[this.$store.state.selected.model];
      },
    },
  }
</script>
