<template>
  <div class="filter filter-group wrapper">
    <div class="inner">
      <div class="btn-group" aria-label="Basic example" role="group">
        <button type="button" class="btn" :class="getClass('my')"
                @click="changeData('my')">{{$t('my')}}
        </button>
        <button type="button" class="btn " :class="getClass('my_agency')"
                @click="changeData('my_agency')">{{$t('my_agency')}}
        </button>
        <button type="button" class="btn" :class="getClass('no_my')"
                @click="changeData('no_my')">{{$t('no_my')}}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      name: 'FilterGroup',
      data() {
          return {
              provide: {
                  my: false,
                  no_my: false,
                  my_agency: false,
              },
              classes: {
                  my: 'btn-success',
                  no_my: 'btn-danger',
                  my_agency: 'btn-warning',
              },
          }
      },
      methods: {
          changeData(key) {

              this.provide[key] = !this.provide[key]
          },
          getClass(key){
              let object = {}

              object[this.classes[key]] = this.provide[key]

              if(!this.provide[key]){
                  object['btn-default-white'] = true
              }
              return object
          },
      },
      watch: {
          provide: {
              handler(newVal){

                  this.$emit('update', newVal, 'provide')
              },
              deep: true,
          },
      },
  }
</script>