<!--
    头部区域
    @Author: tangDM
    @Date: 2019-03-12
-->
<template>
  <div class="l-main-header" style="position: relative">
    <div class="l-main-header__left">
      <div class="l-main-header__box">
        <img style="width: 40px; height: 40px" class="l-main-header__logo" src="@/assets/images/layout/logo.png" />
      </div>
      <p class="l-main-header__title">警务云统一授权管理中心</p>
    </div>
    <div class="l-main-header__center"></div>
    <div class="l-main-header__right">
      <div style="display: inline-block; vertical-align: top">
        <!-- 用户操作区域 -->
        <div class="l-avatar-box">
          <i class="icon icon-user2"></i>
          <span class="l-avatar-box__user">{{ name }}</span>
          <i class="icon icon-close" title="退出登录" @click="logout"></i>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      searchValue: '',
      activeShow: false,
      activeHide: false
    };
  },
  components: {},
  computed: {
    ...mapGetters(['sidebar', 'name', 'avatar', 'device'])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('toggleSideBar');
    },
    logout() {
      this.$confirm('是否确定退出系统').then(() => {
        if (process.env.NEED_LOGIN == true) {
          window.loginUtil.logout(this);
        } else {
          window.location.href = `https://login.iam.com/apphub/logout`;
        }
      });
    },
    handleClickSearch() {
      this.activeShow = true;
      this.activeHide = false;
    }
  },
  mounted() {
    this.bodyListener = () => {
      this.activeShow = false;
      this.activeHide = true;
    };
    document.body.addEventListener('click', this.bodyListener, false);
  },
  beforeDestroy() {
    document.body.removeEventListener('click', this.bodyListener);
  }
};
</script>
