<template>
  <el-container>
    <el-header>
      <el-row :gutter="0">
        <el-col :xs="16" :sm="18" :md="20" :lg="21" :xl="22">
          <div class="grid-content bg-purple logo_icon">
            <img :src="require('../../assets/images/haitai-logo.png')" style="width:30px;height:26px;margin:10px 12px;" alt="logo" >
          </div>
          <div class="logo_name">智慧护理管理端</div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2">
          <el-dropdown trigger="hover" @command="handleCommand">
            <span class="el-dropdown-link">
              <div class="head_img"/>
              <span class="grid-content bg-purple user_info">{{ userCode }}</span>
            </span>
            <el-dropdown-menu slot="dropdown" class="header_dropdown">
              <el-dropdown-item command="personal_center" @click.native="goPersonCenter"><i class="dropdown_center_icon"/><span>个人中心</span></el-dropdown-item>
              <el-dropdown-item command="exit" @click.native="goExit"><i class="dropdown_exit_icon"/><span>退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-col>
      </el-row>
    </el-header>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userCode: ""
    }
  },
  methods: {
    goExit() {
      this.$router.push({ path: '/' })
    },
    handleCommand() {

    }
  }
}
</script>
<style lang="scss">
.el-header {
  background-color: #ffffff;
	box-shadow: 0PX 1PX 4PX 0PX
		rgba(0, 21, 41, 0.12);
  color: #333;
  line-height: 48PX;
  padding: 0 !important;
  height:48PX !important;/*no*/
  z-index:200;
}
.el-header .el-row{
  margin:0 !important;
}
.el-header .el-col{
  padding: 0 !important;
}
.logo_icon {
  text-align: left;
  height: 48PX;
  width:54PX;
  display:inline-block;
  float:left;
}
.logo_icon img {
    width:30px;
    height:26PX;
    margin:10PX 12px;
  }
.logo_name{
  font-size: 16PX;
	line-height: 48PX;
	color: #262626;
	opacity: 0.85;
  display:inline-block;
  float:left;
}
.user_info {
  text-align: right;
}
.head_info {
  text-align: right;
}
.head_img {
  width: 24PX;
  height: 48PX;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  background:url(../../assets/images/head-portrait.png) no-repeat center;
  background-size: 24PX 24PX;
}
.dropdown_center_icon{
  display:inline-block;
  width:14px;
  height:36px;
  background:url(../../assets/images/head-personal-center.png) no-repeat center;
  background-size:14px 14px;
}
.dropdown_exit_icon{
  display:inline-block;
  width:14px;
  height:36px;
  background:url(../../assets/images/exit.png) no-repeat center;
  background-size:14px 14px;
}
.header_dropdown{
  padding:0;
  margin-top:2px !important;
  margin-right:-36px;
}
.header_dropdown .el-dropdown-menu__item{
  width:140px;
  overflow:hidden;
  display:block;
  padding:0 0 0 12px;
}
.el-dropdown-menu__item span,.el-dropdown-menu__item i{
  display:inline-block;
  line-height:36px;
  float:left;
}
.el-dropdown-menu__item i {
    margin-right: 8px;
}
.el-dropdown-menu__item span{
  color:#595959;
}
.el-popper[x-placement^=bottom] .popper__arrow {
  display:none;
}
</style>

