<template>
  <b-form-group class="d-flexakkurat-regular" label-cols-md="12" label="Categorias">
  <div v-show="sending" class="text-center">
    carregando...
  </div>
    <b-form-checkbox-group
     
      v-model="selectedCategories"
    :options="categoriesOption"
      stacked
      size="sm"
      
      @input="updateValue"
      class="text-left radius-text"
    >
     
    </b-form-checkbox-group>
  </b-form-group>
</template>

<script>
import ProductService from "@/services/resources/ProductCategoryService";

const service = ProductService.build();

export default {
  props: {
    value: {
      type: Array,
      default: () => {
          return [];
      }
    }
  },
  data() {
    return {
      sending: false,
      selectedCategories: this.value,
      categories: []
    };
  },
computed:{
    categoriesOption(){

        let options = [];

            this.categories.forEach( (category) => {
                options.push({text: category.name, value: category.id});
            });

        return options;
    }
},
  methods: {

    updateValue(){
    
        this.$emit('input',this.$data.selectedCategories);
        this.$emit('change');
    } , 
    
    seachCategories() {
      var vm = this;
      vm.sending = true;
      service
        .get("")
        .then(resp => {
          vm.categories = resp;
          vm.sending = false;
        })
        .catch(err => {
          vm.$store.commit("pushNotification", {
            type: "danger",
            timeout: 5,
            message: err.msg | "Falha ao listar categorias"
          });
          vm.sending = false;
        });
    },
    clearValue(){
       this.selectedCategories = [];
    
    }
  },
  mounted() {
    this.seachCategories();
  }
};
</script>

<style lang="scss">
.custom-control-input:checked ~ .custom-control-label::before{
    border-color: #343a40;
    background-color: #343a40;
    
}
.custom-control-label{
    span{

        font-family: 'Akkurat Light Regular';
            text-align: left !important;
            font-size: 1em !important;
           
    }
    
}
</style>