<template>
  <div class="ezj-container">
    <ezj-aside>
      <ezj-menu :menus="menus" @select="onSelect"></ezj-menu>
    </ezj-aside>
    <ezj-main :title="currentPage.title" v-if="currentPage" :key="activeId">
      <slot>
        <template v-if="currentPage.form">
          <ezj-form-pane v-bind="currentPage" v-on="$listeners"></ezj-form-pane>
        </template>
      </slot>
    </ezj-main>
  </div>
</template>

<script>
import EzjAside from '@/components/layout/Aside'
import EzjMenu from '@/components/layout/Menu'
import EzjMain from '@/components/layout/Main'
import EzjFormPane from '@/components/layout/FormPane'

export default {
  name: 'VueForm',
  props: {
    menus: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    defaultActive: { type: String }
  },
  components: { EzjAside, EzjMenu, EzjMain, EzjFormPane },
  data() {
    return {
      activeId: this.defaultActive
    }
  },
  computed: {
    currentPage() {
      return this.getDeepItem(this.menus, this.activeId)
    }
  },
  methods: {
    getDeepItem(arr, id) {
      for (const item of arr) {
        if (item.id === id || id === undefined) {
          return item
        }
        if (item.children) {
          let found = this.getDeepItem(item.children, id)
          if (found) {
            return found
          }
        }
      }
    },
    onSelect(id) {
      this.activeId = id
      this.$emit('change', id)
    }
  }
}
</script>

<style lang="scss">
.ezj-container {
  display: flex;
}
</style>
