<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <el-tabs v-model="activeName" @tab-click="handleClick" class='tabs-wrap'>
      <!-- 微信素材库 -->
      <el-tab-pane label="微信素材库" name="media">
        <weixin-medialist ref="media" tab-name="media"></weixin-medialist>
      </el-tab-pane>
      <!-- 微信菜单 -->
      <el-tab-pane label="微信菜单" name="menu">
        <weixin-menu ref="menu" tab-name="menu"></weixin-menu>
      </el-tab-pane>
      <!-- 微信自动回复 -->
      <el-tab-pane label="微信自动回复" name="autoReply">
        <weixin-autoreply ref="autoReply" tab-name="autoReply"></weixin-autoreply>
      </el-tab-pane>
      <!-- 微信用户绑定 -->
      <el-tab-pane label="微信用户绑定" name="bindUser">
        <weixin-binduserlist ref="bindUser" tab-name="bindUser"></weixin-binduserlist>
      </el-tab-pane>
      <!--微信消息-->
      <el-tab-pane label="微信消息" name="messageList">
        <weixin-messagelist ref="messageList" tab-name="messageList"></weixin-messagelist>
      </el-tab-pane>
      <!--模板消息-->
      <el-tab-pane label="模板消息" name="templateMessageList">
        <weixin-templatemessagelist ref="templateMessageList" tab-name="templateMessageList"></weixin-templatemessagelist>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import menu from './menu.vue'
import mediaList from './mediaList.vue'
import autoReply from './autoReply.vue'
import bindUserList from './bindUserList.vue'
import messageList from './messageList.vue'
import templateMessageList from './templateMessageList.vue'
export default {
  props: {
    weiXinID: [String],
    tabName: [String]
  },
  data() {
    return {
      activeName: 'media', // 默认打开栏目
      tabs: ['menu', 'media', 'autoReply', 'bindUser', 'messageList', 'templateMessageList']
    }
  },
  mounted() {
    if (this.tabName && this.tabs.includes(this.tabName)) {
      this.activeName = this.tabName
    } else {
      this.activeName = 'media'
      this.$router.replace(`/socialmedia/weixinList/${this.weiXinID}/media`)
    }
    this.getData()
  },
  methods: {
    handleClick(tab) {
      this.$router.replace(`/socialmedia/weixinList/${this.weiXinID}/${tab.name}`)
      this.getData()
    },
    getData() {
      if (this.activeName === 'media') {
        this.$refs.media.getMaterialsList()
        return
      }
      if (this.activeName === 'menu') {
        this.$refs.menu.getMentData()
        return
      }
      if (this.activeName === 'autoReply') {
        this.$refs.autoReply.getAutoReplyData()
        return
      }
      if (this.activeName === 'bindUser') {
        this.$refs.bindUser.getUserData()
      }
    }
  },
  components: {
    'weixin-menu': menu,
    'weixin-medialist': mediaList,
    'weixin-autoreply': autoReply,
    'weixin-binduserlist': bindUserList,
    'weixin-messagelist': messageList,
    'weixin-templatemessagelist': templateMessageList
  }
}
</script>

<style scoped>

</style>
