<template>
  <div class="app-container">
    <el-tabs
      v-model="tabPaneType"
      tab-position="left"
      @tab-click="handleTagToggle"
    >
      <el-tab-pane label="系统消息" name="0">
        <div>
          <div class="set-item">
            <span class="label">新成员增加推送:</span>
            <el-switch
              v-model="system.newPeople"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_add_new_user')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">代理认证信息审核成功,系统发送消息</i>
          </div>
        </div>
        <div>
          <div class="set-item">
            <span class="label">新活动开启通知:</span>
            <el-switch
              v-model="system.newActivity"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_add_new_activity')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">新活动即将开启时,向用户发送消息</i>
          </div>
        </div>
        <div>
          <div class="set-item">
            <span class="label">版本更新通知:</span>
            <el-switch
              v-model="system.newEdition"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_add_new_version')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">app存在版本更新时,向用户发送更新消息</i>
          </div>
        </div>
        <div>
          <div class="set-item">
            <span class="label">团队成员身份级别升级提醒:</span>
            <el-switch
              v-model="system.levelUp"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_team_user_upgrade')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">用户等级提升时,系统发送消息</i>
          </div>
        </div>
        <div>
          <div class="set-item">
            <span class="label">不升级无提成的提醒和级别降级的提醒:</span>
            <el-switch
              v-model="system.levelWarning"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_noupgrade_noreward')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">在一定时间内,用户级别没有提升,系统发送不在拥有提成的级别可能要降级的消息</i>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单消息" name="1">
        <div>
          <div class="set-item">
            <span class="label">是否开启订单消息通知:</span>
            <el-switch
              v-model="order.openOrder"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_order')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">用户购物时是否开启订单通知</i>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="轮播消息" name="2">
        <div>
          <div class="set-item">
            <span class="label">邀请人员时通知:</span>
            <el-switch
              v-model="banner.share"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_invitation_user')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">用户邀请代理成功时,是否在APP内进行所有用户通知</i>
          </div>
        </div>
        <div>
          <div class="set-item">
            <span class="label">活动开启报名时报名成功通知:</span>
            <el-switch
              v-model="banner.openActivity"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_signup_success')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">用户报名活动成功时,是否在APP内进行所有用户通知</i>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="等级升降级弹窗消息" name="3">
        <div>
          <div class="set-item">
            <span class="label">是否代理升降级通知:</span>
            <el-switch
              v-model="level.change"
              active-text="是"
              inactive-text="否"
              @change="setSetting('info_change_grade')"
            />
          </div>
          <div class="set-item-info">
            <i class="el-icon-info">用户代理级别改变时,对其进行弹窗通知</i>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div v-if="loading" v-loading="loading" class="loadingShade" />
  </div>
</template>

<script>

import {
  filterSet
} from '@/filters/systemSet'

export default {
  data() {
    return {
      loading: false,
      loadingTime: 1,
      tabPaneType: '0',
      setting: [],
      system: {
        newPeople: false,
        newActivity: false,
        newEdition: false,
        levelUp: false,
        levelWarning: false
      },
      order: {
        openOrder: false
      },
      banner: {
        share: false,
        openActivity: false
      },
      level: {
        change: false
      }
    }
  },
  watch: {
    'tabPaneType'(to, from) {
      this.init()
    }
  },
  methods: {
    // 选项卡切换
    handleTagToggle(tab) {
      this.tabPaneType = tab.name
    },
    // 初始化
    init() {
      const type = this.tabPaneType
      switch (type) {
        case '0':
          this.getSystem()
          break
        case '1':
          this.getOrder()
          break
        case '2':
          this.getBanner()
          break
        case '3':
          this.getLevelDiaLog()
          break
        default:
      }
    },
    // 获取所有设置
    getSetting() {
      this.$store.dispatch('system/get').then(setting => {
        this.setting = setting
        this.init()
      }).catch(e => {
        this.$message.error(e)
      })
    },
    // 获取系统消息
    getSystem() {
      const data = this.setting
      // 新成员推送
      let newPeople = filterSet(data, 'info_add_new_user').values
      newPeople = newPeople === '1'
      this.system.newPeople = newPeople
      // 新活动开启
      let newActivity = filterSet(data, 'info_add_new_activity').values
      newActivity = newActivity === '1'
      this.system.newActivity = newActivity
      // 版本更新
      let newEdition = filterSet(data, 'info_add_new_version').values
      newEdition = newEdition === '1'
      this.system.newEdition = newEdition
      // 团队成员身份级别升级
      let levelUp = filterSet(data, 'info_team_user_upgrade').values
      levelUp = levelUp === '1'
      this.system.levelUp = levelUp
      // 不升级无提成的提醒和级别降级
      let levelWarning = filterSet(data, 'info_noupgrade_noreward').values
      levelWarning = levelWarning === '1'
      this.system.levelWarning = levelWarning
    },
    // 获取订单消息
    getOrder() {
      const data = this.setting
      // 开启订单消息
      let openOrder = filterSet(data, 'info_order').values
      openOrder = openOrder === '1'
      this.order.openOrder = openOrder
    },
    // 获取轮播消息
    getBanner() {
      const data = this.setting
      // 邀请人员
      let share = filterSet(data, 'info_invitation_user').values
      share = share === '1'
      this.banner.share = share
      // 报名成功
      let openActivity = filterSet(data, 'info_signup_success').values
      openActivity = openActivity === '1'
      this.banner.openActivity = openActivity
    },
    // 获取等级升降级弹窗
    getLevelDiaLog() {
      const data = this.setting
      // 代理升降级
      let change = filterSet(data, 'info_change_grade').values
      change = change === '1'
      this.level.change = change
    },
    // 修改设置
    setSetting(keys) {
      this.$store.dispatch('system/set', keys).then((msg) => {
        this.$message.success(msg)
      }).catch(e => {
        this.$message.error(e)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
