<template>
  <div class="">
    <h2 v-if="hits.length">Søkeresultater</h2>
    <ul>
      <li v-for="(result, index) in extended_results" :key="index">
        <a :href="'/' + lang + '/' + result.id">{{result.label}}</a> ({{result.classification}})
      </li>
    </ul>
  </div>
</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.article_id,
              label: hit.lemmas.map(x => x.lemma).join(', '),
              classification: helpers.group_list(hit.lemmas)
          }
      })
    }
  }
}

</script>