<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="PriceTo" name="PriceTo" v-model="selectedPrice">
    <option value="" selected="selected">{{ $t('front_externMP.select_alle') }}</option>
    <option v-for="(price, key) in prices" v-bind:key="key" :value="key">{{price}}</option>
  </select>
</template>
<script>
  export default {
    data() {
      return {
        'prices': {
          1000: "CHF 1'000",
          2000: "CHF 2'000",
          3000: "CHF 3'000",
          4000: "CHF 4'000",
          5000: "CHF 5'000",
          7500: "CHF 7'500",
          10000: "CHF 10'000",
          12500: "CHF 12'500",
          15000: "CHF 15'000",
          17500: "CHF 17'500",
          20000: "CHF 20'000",
          22500: "CHF 22'500",
          30000: "CHF 30'000",
          35000: "CHF 35'000",
          40000: "CHF 40'000",
          45000: "CHF 45'000",
          50000: "CHF 50'000",
          60000: "CHF 60'000",
          70000: "CHF 70'000",
          80000: "CHF 80'000",
          90000: "CHF 90'000",
          100000: "CHF 100'000",
          150000: "CHF 150'000",
          200000: "CHF 200'000",
          300000: "CHF 300'000",
        }
      }
    },
    computed: {
      selectedPrice: {
        get: function () {
          return this.$store.state.selected['price'];
        },
        set: function (state) {
          this.$store.commit('setSelected', {item: 'price', state: state});
          this.$emit('reloadData')
        }
      },
      getLabel() {
        if(this.$store.state.selected.price == 0) {
          return this.$t('front_externMP.select_alle');
        }
        return this.prices[this.$store.state.selected.price];
      },
    },
  }
</script>
