<template>
  <div class="layout-no-cols right-list-tabs">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs-wrap">
      <el-tab-pane label="Tag词" name="tagWord">
        <tag-word ref="tagWord"></tag-word>
      </el-tab-pane>
      <el-tab-pane label="敏感词" name="badWord">
        <bad-word ref="badWord"></bad-word>
      </el-tab-pane>
      <el-tab-pane label="热词" name="hotWordTabs">
        <hot-word-tabs ref="hotWordTabs"></hot-word-tabs> <!-- @callback="onSelectionHotWordKindsChange" -->
      </el-tab-pane>
      <el-tab-pane label="易错词" name="wrongWord">
        <wrong-word ref="wrongWord"></wrong-word>
      </el-tab-pane>
      <el-tab-pane label="来源管理" name="sourceWord">
        <source-word ref="sourceWord"></source-word>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import './css/wordTabs.css'
import tagWord from './tagWord.vue'
import badWord from './badWord.vue'
import wrongWord from './wrongWord.vue'
import sourceWord from './sourceWord.vue'
import hotWord from './hotWord.vue'
import hotWordTabs from './hotWordTabs.vue'

export default {
  components: {
    'tag-word': tagWord,
    'bad-word': badWord,
    'wrong-word': wrongWord,
    'source-word': sourceWord,
    'hot-word': hotWord,
    'hot-word-tabs': hotWordTabs
  },
  data() {
    return {
      // 热词分类id
      kindId: 0,
      // 内容词汇管理  tabs标签初始选中
      activeName: 'tagWord'
    }
  },
  methods: {
    // 热词分类数据选中事件
    /* onSelectionHotWordKindsChange(kinID) {
      this.kindId = kinID
    }, */
    handleClick(tabs) {
      this.$refs[tabs.name].init()
    }
  }
}
</script>

<style scoped>

</style>
