<template>
  <div class="header-wrap">
    <div class="wrap">
      <span class="menu-btn" @click="switchAside">
        <svg-icon iconName="menuBtn" className="icon-menu-svg"></svg-icon>
      </span>
    </div>
    <div class="wrap">
      <div class="user-info">
        <div class="face-info">
          <img src="../../assets/images/logo-min.png" alt="409019683@qq.com">
          <span class="name">{{ username }}</span>
        </div>
        <span class="logout" @click="handlerLogout">
          <svg-icon iconName="logout" className="icon-logout"></svg-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "Header",
  components: {},
  props: {},
  setup(){
    // 获取实例上下文
    const { proxy } = getCurrentInstance();
    // Vuex
    const store = useStore();
    // 引入router
    const { replace } = useRouter();
    // 菜单按钮
    const switchAside = (() => { store.commit('app/SET_COLLAPSE'); })
    // 用户名
    const username = ref(store.state.app.username);
    // 登出
    const handlerLogout = (() => {  
      proxy.$confirm('确认退出管理后台', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        store.dispatch('app/logoutAction').then(response => {
          proxy.$message({
            message: response.message,
            type: "success"
          })
          // 刷新页面清除数据
          location.reload();
          replace({
            name: "Login"
          })
        })
      }).catch(error => {});
    }) 

    return { 
      switchAside,
      handlerLogout,
      username
    }

  }
};
</script>
<style lang="scss" scoped>
.header-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user-info {
  float: right;
  display: flex;
  align-items: center;
}
.face-info {
  span, img { 
    display: inline-block;
    vertical-align: middle;
  }
  span { margin-left: 15px;}
}
.logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  cursor: pointer;
}
.menu-btn { cursor: pointer; } // 手势
.icon-menu-svg { font-size: 24px; }
.icon-logout { font-size: 24px; }
</style>