

<script>
import {ref, toRaw, computed} from 'vue'
import {mapGetters, mapMutations, mapActions, useStore} from "vuex";
import Button from "@atoms/VButton.vue";
import VueMultiselect from 'vue-multiselect'

export default {
  name: 'Filters',
  components: {
    Button,
    VueMultiselect
  },
  setup() {
    // const store = useStore()
    // store.dispatch('main/updateSelects')
  },
  data() {
    return {
      isOpenOptions: false,
    }
  },
  computed: {
    ...mapGetters('machines', ['selectedSelects', 'selectsData', 'toggleFilter', 'selectedData']),
  },
  mounted () {
    
  },
  methods: {
    ...mapMutations('machines', ['setSelectedSelect', 'setToggleFilter']),
    ...mapActions('machines', ['updateSelects']),
    updateSelectedSelects: function(value) {
      if (value.length > 0) {
        this.updateSelects({key: 'set', value: value})
      }
    },
    removedOption: function(value) {
      this.updateSelects({key: 'removed', value: value})
    },
  }
}

</script>



<template>
  <div id="ignore:2Qxwqz" class="pb-1">
    {{ console.log('selectedData' ,selectedData)
     }}
    <div v-if="toggleFilter" wrapper_class="grid grid-cols-12 gap-2" selects_class="col-span-12 sm:col-span-6 lg:col-span-3" class="grid grid-cols-12 gap-2 mb-3 border-t border-slate-300 pt-3"  fields={@filters_fields} id="SelectFilters" phx-hook="SelectFilters">
      <div v-for="selectData in selectsData" class="col-span-12 sm:col-span-6 lg:col-span-3">
        <VueMultiselect
          :multiple="true"
          v-model="selectedSelects[selectData.key]"
          label="name"
          track-by="name"
          :options="selectData.data"
          :placeholder="selectData.title"
          @update:model-value="updateSelectedSelects"
          @remove="removedOption"
          :showLabels="false"
          >
        </VueMultiselect>
      </div>
    </div>
  </div>
</template>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>