<template>
  <div>
    <div>
      <v-tabs v-model="tab">
        <v-tab v-for="item in items" :key="item.path" @click="handleTo(item.path)">{{ item.title }}</v-tab>
      </v-tabs>
    </div>
    <div class="white" style="font-size: 16px;">
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item.path">
          <component :is="item.path"></component>
        </v-tab-item>
      </v-tabs-items>
    </div>
  </div>
</template>

<script>
import { loadDynamicComponents } from '@/utils'
const vueComponent = require.context('./dynamic', true, /\.vue$/)
const autoComponent = loadDynamicComponents(vueComponent)
export default {
  name: 'auto-collection',
  components: { ...autoComponent },
  data () {
    return {
      tab: 0,
      items: []
    }
  },
  created () {
    this.items = this.$route.meta.roles.filter(item => +item.active)
      .sort((a, b) => a.sort - b.sort)
      .map(e => ({ title: e.label, path: e.name }))

    const savedTab = this.$route.query.tab
    if (!savedTab) {
      this.tab = 0
      return
    }
    this.tab = this.items.findIndex(e => e.path === savedTab)
  },
  methods: {
    handleTo (path) {
      this.$router.push(`${this.$route.path}?tab=${path}`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
