<template>
  <div class="content">
    <div>
      <v-tabs v-model="tab">
        <v-tab v-for="item in items" :key="item.path" @click="handleClick(item)">{{ item.title }}</v-tab>
      </v-tabs>
    </div>
    <div style="flex: 1">
      <v-tabs-items v-model="tab">
        <v-tab-item
          v-for="item in items"
          :key="item.path"
        >
          <component :is="item.path" />
        </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: 'indicator-details',
  components: {
    ...autoComponent
  },
  data () {
    return {
      tab: 0,
      items: [
        {
          title: '关系图谱',
          path: 'graph'
        }
      ]
    }
  },
  created () {
    this.$route.meta.title = this.$route.params.name
    const savedTab = new URLSearchParams(window.location.search).get('tab')
    if (!savedTab) {
      this.activeIndex = 0
      return
    }
    this.activeIndex = this.list.findIndex(e => e.path === savedTab)
  },
  methods: {
    handleClick (item) {
      this.$router.push(`${this.$route.path}?tab=${item.path}`)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .v-window,.v-window-item {
  height: 100%;
}
</style>
