<template>
  <form class="w-100" @submit.prevent>
    <input type="text" v-model="searchInput" @input="onSearch" class="form-control search-input" placeholder="Zoeken in...">
  </form>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import _debounce from 'lodash/debounce';

@Component
export default class Search extends Vue {
  @Prop({ type: String, required: true }) value!: string;

  searchInput = '';

  mounted() {
    const { search } = this.$route.query;

    this.searchInput = search as string || '';
    this.model = this.searchInput;
  }

  onSearch = _debounce(this.onSearchDebounced, 500);
  onSearchDebounced() {
    this.model = this.searchInput
  }

  clear() {
    this.searchInput = '';
    this.model = this.searchInput;
  }

  get model() {
    return this.value;
  }

  set model(value: string) {
    this.$emit('input', value);
  }
}
</script>
