<template>
  <div>
    <div class="logo-title">数据中心</div>
    <div class="header-userinfo">
      <el-dropdown class="username"  @command="handleCommand">
        <span class="el-dropdown-link username-text">
      <div class="avatar"></div>{{userInfo.nickname || userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item  command="logout">&nbsp;&nbsp;退出&nbsp;&nbsp;</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <switchTheme></switchTheme>
    </div>
  </div>
</template>
<script>
import switchTheme from '../switch-theme'
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'header-component',
  components: { switchTheme },
  data () {
    return {
      popVisible: false
    }
  },
  computed: {
    ...mapGetters('user', {
      userInfo: 'userInfo'
    })
  },
  methods: {
    handleCommand(command) {
      if(command==='logout'){
        this.logout()
      }
    },
    logout(){
      localStorage.removeItem('token')

      document.getElementById('body').className = "theme-white"
      this.$router.push(
        {
          name: 'Login'
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
</style>
