<template>
  <form>
    <div class="row form-group">
        <label for="ssel1" class="col-sm-2">Typ</label>
        <div class="col-sm-4">
          <select v-model="type" name="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="submit()" type="button" class="btn btn-secondary">Zobraz</button>
          </span>       
        </div>
        <input type="hidden" name="_token" :value="csrf">
      </div>
    </div>
  </form>
</template>

<script>
import itemTemplate from './item-multi-template.vue';
export default {
  data () {
    return {
      item: {},
      type: null,
      errors: {},
      success: false,
      loaded: true,
      items: [
       
      ],
      itemTemplate,
      csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    }
  },
  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);
            });
    },
    submit() {
            axios.get('search/multiple', {
                  params: {
                  type: this.type,
                  search: this.item.name
                  }
              })
              .then((response) => {
                
                let data = [];
                data.push(['IP Adresa','Meno PC','Uzivatel','Od','Do']);
                for (var index = 0; index < response.data.length; ++index) {
                  let row = response.data[index];
                  data.push([row.ip, row.comp, row.name, moment(row.f).format('DD.MM.YYYY HH:mm'), moment(row.t).format('D.MM.YYYY HH:mm')]);
                }
                console.log(data);
                this.$parent.$refs.table.params.data = data;

              })
              .catch(function (error) {
                  console.log(error);
              });

    }
  },
};
</script>
