<template>
  <div>

    <a-dropdown>
      <div class="header-avatar" style="cursor: pointer">
        <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar" />
        <span class="name">{{ user.nickname }}</span>
      </div>
      <a-menu :class="['avatar-menu']" slot="overlay">
        <a-menu-item @click="adminUser"  v-if="!isMiddleAdmin()">
          <a-icon type="user" />
          <span>用户管理</span>
        </a-menu-item>
        <a-menu-item @click="adminMiddle"  v-else>
          <a-icon type="user" />
          <span>用户管理</span>
        </a-menu-item>
        <a-menu-item @click="adminRole"  v-if="!isMiddleAdmin()">
          <a-icon type="appstore" />
          <span>角色管理</span>
        </a-menu-item>
        <a-menu-item @click="showCompany" v-if="!isMiddleAdmin()">
          <a-icon type="compass" />
          <span>切换公司</span>
        </a-menu-item> 
        <a-menu-divider />
        <a-menu-item @click="logout">
          <a-icon style="margin-right: 8px;" type="poweroff" />
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>

    <switch-company v-model="companyShow" :data="companyData" @confirm="companyconfirm"
      ref="switchCompany"></switch-company>

    <login-actions ref="loginActions"></login-actions>
  </div>

</template>

<script>
import { mapGetters } from 'vuex' // 加载vuex的mapGetters辅助函数
import { logout } from '@/services/base/user' // 加载退出登录的接口

import LoginActions from '@/components/login/loginActions.vue'
import { switchCompany, companyList } from '@/services/base/user'
import { USER_MODEL } from '@/services/base/api.js'; 

export default {
  name: 'HeaderAvatar', // 组件名称 头部头像
  components: { LoginActions },
  computed: {
    ...mapGetters('account', ['user']), // 获取用户信息
  },

  data() {
    return {
      companyShow: false,
      companyData: []
    };
  },
  methods: {
    adminMiddle() {
      this.$router.push('/AdminUser/AdminUserList');
    },
    adminUser() {
      this.$router.push('/BaseAdmin/BaseAdminList');
    },
    adminRole() {
      this.$router.push('/BasePermission/RoleList');
    },
    logout() { // 退出登录
      logout() // 调用退出登录接口
      this.$router.push('/login') // 跳转到登录页
    },
    showCompany() {
      this.companyShow = true;

      companyList().then(result => {
        result = result.data;
        this.companyData = result.data.company_switch;
      });
    },
    isMiddleAdmin() { 
      return USER_MODEL == "AdminUser";
    },
    companyconfirm({ row }) {
      if (!row) {
        return;
      }
      this.companyShow = false;
      switchCompany(row.id).then(result => {
        result = result.data;
        this.$refs.loginActions.afterLoginSuccess({
          token: result.data.access_token,
          access_expire: result.data.access_expire,
          uid: result.data.uid,
          closeOthers : true,
          msg: "切换成功"
        });
      });
    }
  }
}
</script>

<style lang="less">
.header-avatar {
  display: inline-flex;

  .avatar,
  .name {
    align-self: center;
  }

  .avatar {
    margin-right: 8px;
  }

  .name {
    font-weight: 500;
  }
}

.avatar-menu {
  width: 150px;
}
</style>
