<template>
  <div class="switch-theme">
      <div class="white-theme" @click="handleCommand('white')" v-if="currentTheme === 'black' "><i class="el-icon-datau-yanse"></i></div>
      <div class="black-theme" @click="handleCommand('black')" v-if="currentTheme === 'white' || currentTheme===undefined "><i class="el-icon-datau-yanse"></i></div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'switch-theme',

  data () {
    return {
      currentTheme: 'white'
    }
  },
  computed: {
    ...mapGetters('user', {
      userInfo: 'userInfo'
    })
  },
  created () {
    this.currentTheme = this.userInfo.theme || 'white'
    document.getElementById('body').className = 'theme-'+this.currentTheme
  },
  methods: {
    handleCommand (command) {
      // 更新主题提示
      this.$confirm('是否更换主题?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.currentTheme = command
        let className = 'theme'
        className = className + '-' + command
        document.getElementById('body').className = className

        this.$store.commit('user/setUserTheme', command)
        // 调用更新主题接口
        let checkParams = {'id': this.userInfo.id, 'theme': command}
        this.$api.account.changeTheme(checkParams).then(
          res => {
            if (res.code === '1') {
              this.$forceUpdate()
              this.$message({
                type: 'info',
                message: '更换主题成功'
              })
            }
          }
        )
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .switch-theme {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    line-height:0;
    padding-right:5px;
    margin-left:-5px;
    [class^="el-icon-datau"], [class*=" el-icon-datau"]{
      font-size:0.26rem;
      line-height:0.26rem;
    }
    .white-theme{
      color:#fff;
    }
    .black-theme{
      color:#000;
    }
  }
</style>
