<template>
  <Multiselect
		v-model="selection"
		:options="options"
		:allow-empty="true"
		track-by="label"
		label="label"
		:reset-after="false"
		select-label=""
		selected-label=""
		deselect-label=""
		:searchable="false"
		:placeholder="placeholder"
		:clear-on-select="false"
		:preserve-search="true"
		@select="select"
		@close="close"
	>
		<template slot="clear">
			<div
				v-if="selection"
				class="multiselect__clear"
				@click.prevent.stop="selection = null"
			>
				<i class="close icon"></i>
			</div>
		</template>
	</Multiselect>
</template>

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

export default {
  name: 'DropdownMenuItem',

	components: {
		Multiselect
	},

	props: {
		placeholder: {
			type: String,
			default: 'Sélectionnez une valeur'
		},
		options: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},

  data() {
    return {
      selection: null,
    }
  },

  methods: {
    select(e) {
      this.$emit('select', e);
    },
    close() {
      this.$emit('close', this.selection);
    }
  }
}
</script>

<style lang="less" scoped>

</style>