<template>
  <div class="content">
    <div>
      <v-tabs v-model="tab" @change="handleChange">
        <v-tab v-for="item in items" :key="item.path + item.title">{{ 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.title + 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: 'data-resource-details',
  components: {
    ...autoComponent
  },
  data () {
    return {
      tab: 0,
      items: [
        { title: '基本信息', path: 'info' },
        { title: '关系图谱', path: 'graph' },
        {
          title: '数据生产线',
          path: 'lineGraph'
        },
        {
          title: '元数据成员',
          path: 'metadata'
        }
        // {
        //   title: '数据预览',
        //   path: ''
        // }
        // {
        //   title: '接入数据',
        //   path: ''
        // }
        // {
        //   title: '映射关系',
        //   path: ''
        // },
        // {
        //   title: '数据依赖',
        //   path: ''
        // },
        // {
        //   title: '主数据信息',
        //   path: ''
        // }
        // { title: 'ddl', path: 'ddl' }
      ]
    }
  },
  created () {
    this.$route.meta.title = this.$route.params.name
    // 非结构化文档没有ddl
    if (this.$route.params.type === 'resource') {
      this.items.push({ title: 'ddl', path: 'ddl' })
    }
    const query = this.$route.query
    if (!query.tab) {
      this.tab = 0
      return
    }
    this.tab = this.items.findIndex(item => item.path === query.tab)
  },
  methods: {
    handleChange (index) {
      this.$router.push(this.$route.path + '?tab=' + this.items[index].path)
    }
  }
}
</script>

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