<template>
  <li class="definition" :ref="'def' + body.id" :id="'def' + body.id">
    <ul>
      <li :is="element_wrapper.template" :body="element_wrapper.element" v-for="(element_wrapper, index) in template_name_added" :key="index" @article-click="article_link_click">{{element_wrapper.element}}</li>
    </ul>
  </li>
</template>

<script>
import DefElement from './DefElement.vue'
import Example from './Example.vue'
import SubArticle from './SubArticle.vue'
import CompoundList from './CompoundList.vue'

var Definition = {
  name: 'Definition',
  props: {
    body: Object
  },
  components: {
    DefElement,
    Definition,
    Example,
    SubArticle,
    CompoundList
  },
  computed: {
    template_name_added: function(){
      return this.body.elements.map(
        function(element){
          return {
              'template': {
                'explanation': 'DefElement',
                'definition': 'Definition',
                'example': 'Example',
                'sub_article': 'SubArticle',
                'compound_list': 'CompoundList'
              }[element.type_] || 'li',
              'element': element
          }
      })
    }
  },
  mounted: function() {
    let ref = 'def' + this.body.id
    if(location.hash.substring(1) == ref){
      this.$refs[ref].scrollIntoView()
      this.$refs[ref].classList.add('highlighted')
    }
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    }
  },
  watch:{
    $route(to, from) {
      let ref = 'def' + this.body.id
      if(location.hash.substring(1) == ref){
        this.$refs[ref].classList.add('highlighted')
      }else{
        this.$refs[ref].classList.remove('highlighted')
      }
    }
  }
}

export default Definition
</script>
<style>
q {
  font-style: italic;
}

.highlighted {
  background-color: #ddddff;
  border-radius: 5px;
}
</style>