<template>
  <ul class="tree">
    <li class="treeItem" v-for="item in array" :key="item._id">
      <nuxt-link :to="{name: 'portal-category-details',params: {portal: $route.params.portal,details: item.title},query: categoryURLQuery(item)}">{{ item.title }}</nuxt-link>
      <i class="fas fa-chevron-left hasChild" v-if="item.childs.length"></i>
      <div class="children" v-if="item.childs.length">
        <div class="relativePos">
          <TreeItem :array="item.childs"/>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    array: {
      type: Array,
      required: true
    }
  },
  methods: {
    categoryURLQuery(item) {
      const query = {type: item.defaultPageType, id: item._id}
      if (item.defaultPageType === 'news') return {...query, page: 1}
      if (item.defaultPageType === 'gallery') return {...query, galleryType: 'image', page: 1}
      else return query
    }
  }
}
</script>
