<template>
  <div class="layout-no-flex right-list-tabs">
      <!--tabs-->
      <el-tabs v-model="activeTab" @tab-click="changeTab">
        <el-tab-pane label="留言列表" name="messageList">
          <all-message-list ref="messageList"></all-message-list>
        </el-tab-pane>
        <el-tab-pane label="留言板列表" name="messageBoardList">
          <message-board-list ref="messageBoardList"></message-board-list>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import allMessageList from './allMessageList.vue'
import messageBoardList from './messageBoardList.vue'
export default {
  components: {
    'all-message-list': allMessageList,
    'message-board-list': messageBoardList
  },
  data() {
    return {
      activeTab: 'messageList'
    }
  },

  created() {
    if (this.$route.query.tab) {
      this.activeTab = this.$route.query.tab
    }
  },

  methods: {
    changeTab(tab) {
      this.$router.push({query: {tab: tab.name}})
      if (tab.name === 'messageList') {
        this.$refs.messageList.loadBoardTypes()
        this.$refs.messageList.searchMessage()
      } else {
        this.$refs.messageBoardList.searchMessageBoard()
      }
    }
  }
}
</script>

<style scoped>

</style>
