<template>
  <ul aria-expanded="false">
    <li v-for="(m, index) in menu.filter(item => item[field.pid] == topLevel)" :key="index">
      <a :class="{ 'has-arrow': menu.filter(item => item[field.pid] == m[field.id]).length !== 0 }" @click="routerLink($event, m[field.url])">{{m[field.name]}}</a>
      <submenu :menu="menu" :topLevel="m[field.id]" :field="field" v-if="menu.filter(item => item[field.pid] == m[field.id]).length !== 0" />
    </li>
  </ul>
</template>
<script>
export default {
  name: 'submenu',
  props: {
    menu: {
      required: true,
      type: Array
    },
    topLevel: {
      required: true,
      type: Number
    },
    field: {
      required: true,
      type: Object
    }
  },
  methods: {
    routerLink(e, url) {
      if (e.target.className === 'has-arrow') return
      this.$router.push(url)
    }
  }
}
</script>