<template>
  <div class="right-detail-tabs">
       <el-tabs v-model="activeHotWordName" @tab-click="hotWordClick">
        <!--热词列表开始-->
        <el-tab-pane label="热词列表" name="HotList">
          <hot-word ref="hotWord" :show.sync="showPage"></hot-word>
        </el-tab-pane>
        <!--热词列表结束-->

        <!--热词配置开始-->
        <el-tab-pane label="热词配置" name="HotSet">
          <hot-word-config :kind-id="kindId" ref="hotWordConfig"></hot-word-config>
        </el-tab-pane>
    <!--热词配置结束-->
    </el-tabs>
  </div>
</template>

<script>
import hotWord from './hotWord.vue'
import hotWordsCatalogConfig from './hotWordsCatalogConfig.vue'

export default {
  components: {
    'hot-word': hotWord,
    'hot-word-config': hotWordsCatalogConfig
  },

  props: {
    // 热词分类ID
    kindId: {
      type: Number,
      default: 0
    },
    kindName: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      // 热词  tabs标签初始选中
      activeHotWordName: 'HotList',
      showPage: false
    }
  },

  methods: {
    hotWordClick(val) {
      if (val.name === 'HotList') {
        this.$refs['hotWord'].init()
      }
      if (val.name === 'HotSet') {
        this.$refs['hotWordConfig'].hotWordKindsData()
        this.$refs['hotWordConfig'].kindClear()
        this.$refs['hotWordConfig'].hotWordCatalogTreeData()
      }
    },

    init() {
      this.showPage = true
      this.$refs['hotWord'].init()
    }
  }
}
</script>

<style scoped>
</style>
