<!--  -->
<template>
<div class='header'>
  <div class="header-title">
    <img src="@/assets/img/4dage-logo.png" alt="">
    <!-- <span>大屏后台管理系统</span> -->
  </div>
  <div class="header-user">
    <div class="1">
      <!-- <img :src="head" alt=""> -->
      <span>{{ userName }}</span>
    </div>
    <div  @click="logout" class="logout"><img src="@/assets/img/logout.png" alt="">退出</div>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    return {
      head: '',
      userName: ''
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    logout () {
      window.localStorage.setItem('userInfo', '')
      window.localStorage.setItem('token', '')
      this.$router.push({name: 'login'})
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    let userInfo = window.localStorage.getItem('userInfo') || ''
    let tmp = ''
    if (userInfo) {
      tmp = JSON.parse(userInfo)
    }
    console.log(tmp, 'userInfo')
    if (tmp) {
      this.head = tmp.user.head
      this.userName = tmp.user.userName
    }
    // this.updateInfo()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
.header {
  height: 4.25rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 4.25rem;
  padding: 0 1.875rem;
  box-sizing: border-box;
  color: #fff;
  background-color: #0B4362;
  /* background: url('~@/assets/img/bar.png') no-repeat center center; */
}

.header-title {
  /* color: #b9b47f; */
  width: 147px;
  height: 41px;
  /* font-size: 1.25rem; */
  text-align: center;
  vertical-align: middle;
}
.header-title img{
  width: 100%;
  height: 100%;
  /* vertical-align: middle;
  height: 50px;
  margin-right: 30px; */
}
.header-title span{
  vertical-align: middle;
  display: inline-block;
}
.header-user {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.header-user .logout img {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 30px;
}

.header-user .logout {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.header-user .avatar{
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 3rem;
}

.header-user .avatar span{
  margin-left: 10px;
}

.header-user .avatar img{
  width:3rem;
  height:3rem;
  border-radius:50%;
}
</style>
