<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="4">
          <message-set ref="message" />
        </el-tab-pane>
        <el-tab-pane label="荣誉殿堂" name="5">
          <hover-set ref="hover" />
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>
<script>

import RewardSet from './components/Reward'
import MessageSet from './components/Message'
import GoodsSet from './components/Goods'
import HoverSet from './components/hover'
export default {
  components: {
    RewardSet,
    MessageSet,
    GoodsSet,
    HoverSet
  },
  data() {
    return {
      tabType: '0'
    }
  },
  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 '4':
          this.$refs.message.getSetting()
          break
        default:
          this.updateSetting()
      }
    },
    // 选项卡切换
    handleTagToggle(tab) {
      this.tabType = tab.name
    },
    // 更新setting
    async updateSetting() {
      await this.$store.dispatch('system/get')
    }
  }
}
</script>
