<template>
  <section class="">
    <h2 v-if="hits.length">Søkeresultater</h2>
    <ul>
      <li v-for="(result, index) in extended_results" :key="index">
        <router-link :to="result.id"  @click.native="article_link_click(result.article)">
          {{result.label}};
        </router-link>
        ({{result.classification}})
      </li>
    </ul>
  </section>
</template>

<script>
import helpers from '../utils/helpers.js'
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(item) {
      this.$emit('search-hit-click', item)
    }
  }
}

</script>