<template>
  <div>
    <div class="user-icon-container flex-col flex-alignC">
      <img src="@/assets/img/admin-tx.png" onerror="" />
      <el-dropdown class="pointer" @command="logout" trigger="click">
        <span class="el-dropdown-link color-title">
          <span class="" style="margin-right: 8px;">{{ username }}</span>
          <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- <el-dropdown-item command="person">个人中心</el-dropdown-item> -->
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'person',
  props: {
    username: String
  },
  data() {
    return {
    }
  },
  created() {},
  mounted() {},
  methods: {
    logout() {
      this.$emit('logout', '退出登录')
    },
  }
}
</script>

<style lang="scss" scoped>
.user-icon-container {
  white-space: nowrap;
  img {
    width: 32px;
    height: 32px;
  }
  span {
    margin: 0 5px;
    margin-right: 24px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
  }
}
</style>
