<template>
  <div class="app-container">
    <template>
      <el-tabs v-model="tabType" @tab-click="handleTagToggle">
        <el-tab-pane label="商品设置" name="0">
          <goods-set ref="goods" />
        </el-tab-pane>
        <el-tab-pane label="奖励设置" name="1">
          <reward-set ref="reward" />
        </el-tab-pane>
        <el-tab-pane label="店铺设置" name="2">
          <next-set ref="next" />
        </el-tab-pane>
        <!-- <el-tab-pane label="社区设置" name="3">
          <tag-set />
        </el-tab-pane> -->
        <el-tab-pane label="消息设置" name="4">
          <message-set ref="message" />
        </el-tab-pane>
        <el-tab-pane label="战区设置" name="5">
          <station-set ref="station" />
        </el-tab-pane>
        <!-- <el-tab-pane label="升级活动" name="6">
          <activity-set ref="activity" />
        </el-tab-pane> -->
      </el-tabs>
    </template>
  </div>
</template>

<script>

import NextSet from './components/Next'
import RewardSet from './components/Reward'
// import TagSet from './components/Tag'
import MessageSet from './components/Message'
import GoodsSet from './components/Goods'
import StationSet from './components/Station'

export default {
  components: {
    NextSet,
    RewardSet,
    // TagSet,
    MessageSet,
    GoodsSet,
    StationSet
  },
  data() {
    return {
      tabType: '6'
    }
  },
  watch: {
    'tabType'(to, form) {
      this.init()
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    // 初始化
    init() {
      switch (this.tabType) {
        case '0':
          this.$refs.goods.getSetting()
          break
        case '1':
          this.$refs.reward.getSetting()
          break
        case '2':
          this.$refs.next.getStoreList()
          break
        case '3':
          break
        case '4':
          this.$refs.message.getSetting()
          break
        case '5':
          this.$refs.station.stationList()
          break
        case '6':
          this.$refs.activity.getActivityList()
          break
        default:
          this.updateSetting()
      }
    },
    // 选项卡切换
    handleTagToggle(tab) {
      this.tabType = tab.name
    },
    // 更新setting
    async updateSetting() {
      await this.$store.dispatch('system/get')
    }
  }
}
</script>
