<template>
  <div class="hello">
    <h1>{{ article_header }}</h1>
    <div class="">
      <h3>Etymologi</h3>
        <ul>
          <DefElement v-for="(item, index) in article.etymology" :key="index" :element='item' v-if="item.content" />
        </ul>

    </div>
    <div class="">
      <h3>Definisjoner</h3>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import DefElement from './DefElement.vue'

export default {
  name: 'Article',
  props: {
    article_id: Number
  },
  data: function(){
    return {
      article: {lemmas: []}
    };
  },
  mounted: function(){
    var self = this;
    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id)
      .then(response => self.article = response.data._source)
  },
  computed: {
    article_header: function() {
      var lemmas = []

      this.article.lemmas.forEach(
        function(item, index){
          lemmas.push(item.word);
        }
      )
      return lemmas.join(', ')
    }
  },
  components: {
    DefElement
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
a {
  color: #42b983;
}
</style>