<script>
import Multiselect from "vue-multiselect";

export default {
  components: {Multiselect},
  props: {
    id: {type: String},
    value: {default: {}},
    placeholder: {default: "Pilih Data"},
    options: {type: Array},
    search_by: {default: "text"},
    is_searchable: {default: false},
    is_disabled: {default: false},
  },
  computed: {
    local_value: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
  },
  methods: {
    changeValue(value) {
      this.$emit("input", value)
    }
  }
}
</script>
<template>
  <multiselect v-model="local_value" :options="options" :disabled="is_disabled" :ref="id" :track-by="search_by"
               :searchable="is_searchable" @input="changeValue" :select-label="'Pilih data'" :placeholder="placeholder"
               :allow-empty="false" :label="search_by" deselect-label="" selectedLabel=""/>
</template>
<style>
.multiselect__select::before {
  z-index: 9999 !important;
  top: 55% !important;
}
</style>