<template>
    <div class="row form-group">
        <label for="ssel1" class="col-sm-2">Typ</label>
        <div class="col-sm-4">
          <select v-model="type" class="form-control" id="ssel1">
          <option value="0">Užívateľ</option>
          <option value="1">Meno PC</option>
          <option value="2">Ip adresa</option>
          </select>
        </div>
      <div class="col-sm-6">
        <div class='input-group'>
          <vue-suggestion :items="items" 
                          v-model="item" 
                          :setLabel="setLabel"
                          :itemTemplate="itemTemplate"
                          @changed="inputChange" 
                          @selected="itemSelected">
          </vue-suggestion>
          <span class="input-group-append">
              <button v-on:click="displayResults()" type="button" class="btn btn-secondary">Zobraz</button>
          </span>       
        </div>
      </div>
    </div>
</template>

<script>
import itemTemplate from './item-multi-template.vue';
export default {
  data () {
    return {
      item: {},
      type: null,
      items: [
       
      ],
      itemTemplate,
    }
  },
  methods: {
    itemSelected (item) {
      this.item = item;
    },
    setLabel (item) {
      return item.name;
    },
    inputChange (text) {
        axios.get("search/multicomplete", {
                        params: {
                        type: this.type,
                        term: text,
                        }
            })
            .then((response)  => {
                this.items = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
    },
  },
};
</script>
