<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 in template_name_added">{{element_wrapper.element}}</li>
    </ul>
  </li>
</template>

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

var Definition = {
  name: 'Definition',
  props: {
    body: Object
  },
  components: {
    DefElement,
    Definition,
    Example,
    SubArticle
  },
  computed: {
    template_name_added: function(){
      return this.body.elements.map(
        function(element){
          return {
              'template': {
                'explanation': 'DefElement',
                'definition': 'Definition',
                'example': 'Example',
                'sub_article': 'SubArticle'
              }[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')
    }
  }
}

export default Definition
</script>
<style>
li.quote {
  font-style: italic;
}

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