<template>
  <div class="topnavbar">
    <div class='topnavbarBox'>
      <div class="logo-container">
        <div class="logo-wrapper" @click="toHome">科袖科技条件平台_后台管理系统</div>
      </div>
      <div class="name-box">
        <span>您好，{{ name }}</span>
        <span class="exit-btn" @click="logout">退出登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { MessageBox } from 'element-ui'
import '@/styles/variables.scss'

export default {
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    toHome() {
      this.$router.replace({ path: '/' })
    },
    logout() {
      MessageBox.confirm('您确认要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }).catch(() => {
        console.log('已取消退出')
      })
    }
  }
}
</script>
