<script>
import {mapGetters, mapMutations, mapActions} from "vuex"
import VueMultiselect from 'vue-multiselect'

export default {
  name: 'FiltersComponent',
  components: {
    VueMultiselect
  },
  setup() {
    // const store = useStore()
    // store.dispatch('main/updateSelects')
  },
  data() {
    return {
      isOpenOptions: false,
    }
  },
  computed: {
    ...mapGetters('layout_machines', ['selectedSelects', 'selectsData', 'toggleFilter', 'selectedData']),
  },
  mounted () {
    
  },
  methods: {
    ...mapMutations('layout_machines', ['setSelectedSelect', 'setToggleFilter']),
    ...mapActions('layout_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"
      id="SelectFilters"
      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}"
      phx-hook="SelectFilters"
    >
      <div
        v-for="(selectData, idx) in selectsData"
        :key="idx"
        class="col-span-12 sm:col-span-6 lg:col-span-3"
      >
        <VueMultiselect
          v-model="selectedSelects[selectData.key]"
          :multiple="true"
          label="name"
          track-by="name"
          :options="selectData.data"
          :placeholder="selectData.title"
          :showLabels="false"
          @update:model-value="updateSelectedSelects"
          @remove="removedOption"
        />
      </div>
    </div>
  </div>
</template>

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