<template>
  <div class="app-container">

    <template>
      <el-tabs v-model="tabsType" @tab-click="handleTagToggle">
        <el-tab-pane label="进货奖励" name="0">
          <reward-out ref="rewardOut" />
        </el-tab-pane>
        <el-tab-pane label="业绩奖励" name="1">
          <reward-price ref="rewardPrice" />
        </el-tab-pane>
        <el-tab-pane label="店铺奖励" name="2">
          <reward-shop ref="rewardShop" />
        </el-tab-pane>
      </el-tabs>
    </template>

  </div>
</template>

<script>
// 组件
import RewardOut from './components/RewardOut'
import RewardPrice from './components/RewardPrice'
import RewardShop from './components/RewardShop'

export default {
  components: {
    RewardOut,
    RewardPrice,
    RewardShop
  },
  data() {
    return {
      tabsType: '2'
    }
  },
  watch: {
    tabsType(newVal, oldVal) {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 选项卡切换
    handleTagToggle(tab) {
      this.tabsType = tab.name
    },
    // 初始化
    init() {
      this.$nextTick(() => {
        const tabsType = this.tabsType
        switch (tabsType) {
          case '0':
            this.$refs.rewardOut.rewardSpending()
            break
          case '1':
            this.$refs.rewardPrice.performanceReward()
            break
          case '2':
            this.$refs.rewardShop.storeReward()
            break
          default:
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
