<template>
  <div class="layout-no-cols right-list-toolbar right-list-tabs right-list-panel-card">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane name='fromDB'>
        <span slot="label"> 数据库采集</span>
        <router-view></router-view>
      </el-tab-pane>
      <el-tab-pane name='outDataSet'>
        <span slot="label"> 外部数据集</span>
        <dataset-list ref="dataSetList"></dataset-list>
      </el-tab-pane>
      <el-tab-pane name='outDatabase'>
        <span slot="label"> 外部数据库</span>
        <router-view></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DataSetList from './components/DataSetList.vue'
export default {
  components: {
    'dataset-list': DataSetList
  },
  data() {
    return {
      activeName: 'fromDB'
    }
  },
  mounted() {
    let arr = this.$router.currentRoute.path.split('/')
    if (!arr || arr.length < 4) {
      this.activeName = 'fromDB'
    } else {
      this.activeName = arr[3]
    }
  },
  methods: {
    tabClick(tab) {
      if (tab.name === 'fromDB') {
        this.activeName = tab.name
        this.$router.push({path: `/datachannel/fromDB`})
      } else {
        this.activeName = tab.name
        this.$router.push({path: `/datachannel/outerData/${tab.name}`})
      }
    }
  }
}
</script>
