<template>
  <div class="aa-topmenu">
    <div class="aa-topmenu-item" v-for="(it, i) in items" :key="i"
         :class="isActive(it) ? 'is-active' : ''" @click="select(it)">
      <span>{{ it.label }}</span>
      <span v-if="it.badge" class="aa-topmenu-badge">{{ it.badge }}</span>
      <span v-if="it.children" class="aa-topmenu-caret">▾</span>
      <div v-if="it.children" class="aa-topmenu-dropdown">
        <a v-for="(s, si) in it.children" :key="si" class="aa-topmenu-sub"
           :class="s.key === activeKey ? 'is-active' : ''" @click.stop="select(s)">{{ s.label }}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AaTopMenu',
  props: {
    items: { type: Array, default: function () { return []; } },
    activeKey: { type: String, default: '' }
  },
  methods: {
    isActive: function (it) {
      if (it.key === this.activeKey) return true;
      return (it.children || []).some(function (s) { return s.key === this.activeKey; }, this);
    },
    select: function (it) {
      if (!it.children) this.$emit('update:activeKey', it.key);
      this.$emit('change', it.key);
    }
  }
};
</script>

<style src="./TopMenu.css"></style>
