<template>
  <div class="header">
    <a :href="`${origin}/operation-platform/#/index`" class="logo">
      <img src="../images/logo.png" alt="" />
      <span>好办运维平台</span>
    </a>
    <el-dropdown trigger="hover" placement="bottom">
      <span>{{ userInfo.realName }}<i class="el-icon-arrow-down" style="margin-left: 10px"></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="showUserInfo = true">账号信息</el-dropdown-item>
        <el-dropdown-item @click.native="onLoginOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="账户信息" :visible.sync="showUserInfo" width="430px" append-to-body>
      <el-form ref="userForm" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="userInfo.realName" disabled/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="userInfo.sex" disabled>
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="userInfo.employeeNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="userInfo.userMobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="userInfo.position" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { origin } from '@/config'
import fetch from '@/api';
const { getUserInfo, getLoginOut } = fetch;
export default {
  name: 'ywHeader',
  data() {
    return {
      origin,
      userInfo: {},
      showUserInfo: false
    }
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      getUserInfo().then(res => {
        const result = res.result || {};
        this.userInfo = Object.assign({}, result);
        this.$emit('updateAsideMenu', result.menuTree || []);
      })
    },
    // 退出登录
    onLoginOut() {
      this.$confirm('确认退出吗?', '提示', { type: 'warning' }).then(() => {
        getLoginOut().then(res => {
          this.$message.success('退出成功');
          window.location.href = '/operation-platform/#/';
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 45px;
  width: 100%;
  min-width: 1400px;
  height: 64px;
  background: #fff;
  box-shadow: 0px 3px 4px 0px rgba(214, 224, 240, 0.3);
  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    img {
      margin-right: 10px;
      width: 30px;
      height: 30px;
    }
    span {
      padding-top: 2px;
      font-size: 16px;
      color: #303133;
    }
  }
}
</style>
