<template>
  <section>
    <h2 v-if="hits.length">Søkeresultater</h2>
    <ul class="hits">
      <Preview v-for="(result, index) in hits" :key="index" :searchHit="result" @click.native="article_link_click(result)">
      </Preview>
    </ul>
  </section>
</template>

<script>
import helpers from '../utils/helpers.js'
import Preview from './Preview.vue'

export default {
  name: 'SearchResults',
  props: {
    hits: Array,
    lang: String
  },
  computed: {
    extended_results: function(){
      return this.hits.map(
        function(hit){
          return {
              id: hit._id,
              label: hit._source.lemmas.map(x => x.lemma).join(', '),
              classification: helpers.group_list(hit._source.lemmas),
              article: hit._source
          }
      })
    }
  },
  methods: {
    article_link_click: function(result) {
      this.$router.push('/' + result._index + '/' + result._id)
      this.$emit('search-hit-click', result._source)
    }
  },
  components: {
    Preview
  }
}

</script>
<style>
  .hits  .preview {
    margin: 10px;
    padding: 5px;
    cursor: pointer;
  }

  .hits  .preview h4 {
    color: rgb(0, 0, 238);
    text-decoration: underline;
  }

  .hits {
    margin-top: 20px;
  }
</style>