<template>
  <span class="label">{{ getLabel }}</span>
  <div class="button" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
    <span class="icon" :style="[{'border-top-color': '#' + $store.state.settings.buttonTextColor + '!important'}]"></span>
  </div>
  <select class="ghost" id="KmTo" name="KmTo" v-model="selectedKm">
    <option value="" selected="selected">{{ $t('front_extern.select_alle') }}</option>
    <option v-for="(km, key) in kms" v-bind:key="key" :value="key">{{km}}</option>
  </select>
</template>
<script>
  export default {
    props: ['data', 'lang', 'settings'],
    data() {
      return {
        'kms': {
          1000: "1'000 Km",
          5000: "5'000 Km",
          7500: "7'500 Km",
          10000: "10'000 Km",
          25000: "25'000 Km",
          50000: "50'000 Km",
          60000: "60'000 Km",
          70000: "70'000 Km",
          80000: "80'000 Km",
          90000: "90'000 Km",
          100000: "100'000 Km",
          125000: "125'000 Km",
          150000: "150'000 Km",
          175000: "175'000 Km",
          200000: "200'000 Km",
        }
      }
    },
    computed: {
      selectedKm: {
        get: function () {
          return this.$store.state.selected['km'];
        },
        set: function (state) {
          this.$store.commit('setSelected', {item: 'km', state: state});
          this.$emit('reloadData')
        }
      },
      getLabel() {
        if(this.$store.state.selected.km == 0) {
          return this.$t('front_extern.select_alle');
        }
        return this.kms[this.$store.state.selected.km];
      },
    },
  }
</script>
