<template>
  <div class="layout-no-cols right-list-tabs">
    <el-tabs class="tabs-wrap" @tab-click="changeTabClickHandler" v-model="activeTabs">
      <el-tab-pane v-for="tab in tabs" :label="tab.label" :key="tab.value" :name="tab.value">
        <component :is="tab.key" :tab-name="activeTabs"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import generalDictionary from './generalDictionary.vue'
import userInputWordManager from './userInputWordManager.vue'
import articleInputWordManager from './articleInputWordManager.vue'
import stopWordManager from './stopWordManager.vue'
import attachDicManager from './attachDicManager.vue'
import wordList from './wordList.vue'
export default {
  data() {
    return {
      activeTabs: 'dic', //  分页条变量
      tabs: [
        {label: '通用词库', value: 'dic', key: 'generalDictionary'},
        {label: '用户输入的新词管理', value: 'userinput', key: 'userInputWordManager'},
        {label: '文章中提取的新词管理', value: 'articleinput', key: 'articleInputWordManager'},
        {label: '停用词管理', value: 'stopword', key: 'stopWordManager'},
        {label: '附加词典管理', value: 'attachmentdic', key: 'attachDicManager'},
        {label: '搜索词统计', value: 'wordstat', key: 'wordList'}
      ]
    }
  },
  props: {
    tabName: {
      type: [String],
      default: 'dic'
    }
  },
  mounted() {
    this.activeTabs = this.tabName || this.activeTabs
    this.changeTabClickHandler({ name: this.activeTabs }, null)
  },
  methods: {
    // tab分页条点击事件
    changeTabClickHandler(tab, event) {
      this.activeTabs = tab.name
      this.$router.push(`/settings/dicManager/${tab.name}`)
    }
  },
  components: {
    generalDictionary,
    userInputWordManager,
    articleInputWordManager,
    stopWordManager,
    attachDicManager,
    wordList
  }
}
</script>

<style scoped>

</style>
