<template>
  <div class="app-container">
    <el-tabs
      v-model="tabStatus"
      @tab-click="handleTagToggle"
    >
      <el-tab-pane label="战区销售额排行" name="0">
        <rank-war ref="war" />
      </el-tab-pane>
      <el-tab-pane label="代理公司团队业绩排行" name="1">
        <rank-crown-sale ref="crownSale" />
      </el-tab-pane>
      <el-tab-pane label="代理公司团队新增代理排行" name="2">
        <rank-crown-add ref="crownAdd" />
      </el-tab-pane>
      <el-tab-pane label="店铺业绩排行" name="3">
        <rank-shop ref="shop" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 组件
import RankWar from './components/RankWar'
import RankShop from './components/RankShop'
import RankCrownSale from './components/RankCrownSale'
import RankCrownAdd from './components/RankCrownAdd'
export default {
  components: {
    RankWar,
    RankShop,
    RankCrownSale,
    RankCrownAdd
  },
  data() {
    return {
      tabStatus: '0'
    }
  },
  watch: {
    tabStatus(newVal, oldVal) {
      this.init()
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    // 选项卡切换
    handleTagToggle(tab) {
      this.tabStatus = tab.name
    },
    // 初始化
    init() {
      const tab = this.tabStatus
      switch (tab) {
        case '0':
          this.$refs.war.getWar()
          break
        case '1':
          this.$refs.crownSale.getCrown()
          break
        case '2':
          this.$refs.crownAdd.getCrownNext()
          break
        case '3':
          this.$refs.shop.getShop()
          break
        default:
      }
    }
  }
}
</script>
