<template>
  <div class="user-bar">
    <div class="container">
      <el-popover trigger="click" :width="260">
        <template #reference>
          <div class="user-info">
            <el-badge is-dot :offset="[-7, 29]" class="user-badge">
              <el-avatar shape="circle" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
            </el-badge>
            <div class="user-name">
              <div class="user-title">MarchGlow</div>
              <div class="user-state">在线</div>
            </div>
          </div>
        </template>
        <span>I wish they all could be California girls</span>
      </el-popover>

      <div class="feature">
        <el-icon color="#fff" :size="26"><Setting /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Setting } from '@element-plus/icons-vue'
</script>

<style scoped lang="scss">
.user-bar {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 8px;
  align-items: center;
}

.user-badge :deep(.el-badge__content) {
  width: 12px;
  height: 12px;
}

.user-badge :deep(.el-badge__content.is-dot) {
  background-color: #008000;
}

.container {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 8px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.user-name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 34px;
  width: 120px;
}

.user-title {
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}

.user-state {
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  text-align: left;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
