<template>
  <div style="height: 100%" class="d-flex flex-column">
    <div>
      <v-tabs v-model="activeIndex">
        <v-tab v-for="item in list" :key="item.title" @click="handleClick(item)">{{ item.title }}</v-tab>
      </v-tabs>
    </div>
    <v-tabs-items v-model="activeIndex" style="flex: 1">
      <v-tab-item v-for="item in list" :key="item.path" class="pa-3">
          <component :is="item.path" :query="query"></component>
      </v-tab-item>
    </v-tabs-items>
  </div>
</template>

<script>
import { loadDynamicComponents } from '@/utils'
const vueComponent = require.context('./components', true, /\.vue$/)
const autoComponent = loadDynamicComponents(vueComponent)
export default {
  name: 'meta-data-details',
  components: { ...autoComponent },
  data () {
    return {
      query: {
        metaDataId: ''
      },
      activeIndex: 0,
      list: [
        { title: '基本信息', path: 'metaDataInfo' },
        { title: '关系图谱', path: 'graph' }
        // { title: '数据任务', path: 'metaDataTask' }
        // { title: '数据域', path: 'metaDomain' }
      ]
    }
  },
  created () {
    this.query.metaDataId = this.$route.params.id
    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__container, .v-window-item {
  height: 100%;
}
</style>
