<template>
  <!-- 顶部导航栏 -->
  <header class="header-container">
    <div class="header-left">
      <div class="logo">
        <span class="logo-icon">
          <img class="logo-img" alt="格莱默打印系统" src="@/assets/imgs/portal/logo_b.png" />
        </span>
        <span class="logo-text">格莱默打印系统</span>
      </div>
    </div>
    <div class="header-right">
      <!-- 头部按钮区域 -->
      <div class="header-buttons">
        <div class="header-button todo-button" @click="handleTodoClick">
          <img class="db_img" alt="待办" src="@/assets/imgs/portal/db_b.png" />
          <span class="db_text">待办</span>
          <span v-if="todoCountHeader > 0" class="badge-count">{{
            todoCountHeader > 99 ? '99+' : todoCountHeader
          }}</span>
        </div>
        <div class="header-button unread-button" @click="handleUnreadClick">
          <img class="dy_img" alt="待阅" src="@/assets/imgs/portal/dy_b.png" />
          <span class="db_text">待阅</span>
          <span v-if="unreadCountHeader > 0" class="badge-count">{{
            unreadCountHeader > 99 ? '99+' : unreadCountHeader
          }}</span>
        </div>
      </div>

      <div class="user-info">
        <span>欢迎你，{{ userInfo.nickname }}！</span>
        <el-dropdown @command="handleUserMenuCommand" placement="bottom-end">
          <div class="avatar-wrapper" style="cursor: pointer">
            <el-avatar :src="avatar" class="user-avatar">
              <span v-if="!userInfo.avatar">{{
                userInfo.nickname ? userInfo.nickname.charAt(0) : '?'
              }}</span>
            </el-avatar>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile"> 修改个人信息 </el-dropdown-item>
              <el-dropdown-item command="password"> 修改密码 </el-dropdown-item>
              <el-dropdown-item command="logout" divided style="color: #f56c6c">
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <span>
          <img class="arrow_down_img" alt="待办" src="@/assets/imgs/portal/arrow-down.png" />
        </span>
      </div>
    </div>
  </header>
</template>
<script setup>
import * as UserApi from '@/api/system/user'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {}
  }
})
// 用户信息相关数据
const username = ref('未登录')
const avatar = ref('')
const employeeId = ref('')
const email = ref('未登录')
const phone = ref('未登录')
const loginIp = ref('未登录')
// 头部按钮相关数据
const todoCountHeader = ref(15) // 待办数量
const unreadCountHeader = ref(102) // 待阅数量
// 头部按钮点击事件处理函数
const handleTodoClick = () => {
  ElMessage({ message: '查看待办事项', type: 'info' })
  // 这里可以添加导航到待办页面的代码
}

const handleUnreadClick = () => {
  ElMessage({ message: '查看待阅消息', type: 'info' })
  // 这里可以添加导航到待阅页面的代码
}

const handleCompanyWebsiteClick = () => {
  ElMessage({ message: '访问公司官网', type: 'info' })
  // 这里可以添加打开公司官网的代码，例如 window.open('https://company.com', '_blank')
}

const handleHelpCenterClick = () => {
  ElMessage({ message: '打开帮助中心', type: 'info' })
  // 这里可以添加导航到帮助中心的代码
}

// 用户头像下拉菜单点击事件处理函数
const handleUserMenuCommand = (command) => {
  switch (command) {
    case 'profile':
      ElMessage({ message: '打开修改个人信息页面', type: 'info' })
      // 这里可以添加导航到个人信息页面的代码
      break
    case 'password':
      ElMessage({ message: '打开修改密码页面', type: 'info' })
      // 这里可以添加导航到修改密码页面的代码
      break
    case 'logout':
      ElMessageBox.confirm('确定要退出登录吗？', '退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          ElMessage({ message: '已退出登录', type: 'success' })
          // 这里可以添加退出登录的逻辑
        })
        .catch(() => {
          ElMessage({ message: '已取消退出', type: 'info' })
        })
      break
    default:
      break
  }
}

// 获取用户信息
const getUserInfo = async () => {
  try {
    const userStore = useUserStore()
    const userId = userStore.getUser.id || 1 // 默认使用id=1作为备选

    // 使用UserApi获取用户信息
    const result = await UserApi.getUser(userId)

    if (!result) {
      ElMessage.error('获得个人信息失败，返回数据为空')
      return
    }

    // 更新用户名
    if (result.nickname) {
      username.value = result.nickname
    }

    // 更新头像
    if (result.avatar) {
      avatar.value = result.avatar
    }

    // 从返回值中获取email和mobile字段
    if (result.email) {
      email.value = result.email
    }

    if (result.mobile) {
      phone.value = result.mobile
    }

    // 从loginIp字段获取登录IP
    if (result.loginIp) {
      loginIp.value = result.loginIp
    }

    //缓存用户信息
    localStorage.setItem('user', JSON.stringify(result))
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 可以根据需要添加错误提示
  }
}
// 页面加载时获取用户信息
onMounted(() => {
  //getUserInfo()
  // setCurrentDate()
  // setTimeout(() => {
  //   startNewsScroll()
  // }, 1000)
})
</script>
<style scoped>
/* 页面内头部样式覆盖 */

/* .header-container {
  background-color: #c7dbf4 !important;
  height: 40px !important; 
  min-height: 40px !important;
  padding: 0 20px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
} */
.header-container {
  position: fixed;
  z-index: 10;
  display: flex;
  width: 100%;
  height: 65px; /* 从70px缩小到56px，缩小了20% */
  padding: 0 60px;
  color: white;
  background: #0118a3;
  border-bottom: 4px solid #fa9905;
  box-shadow: 0 2px 12px rgb(102 126 234 / 30%);
  justify-content: space-between;
  align-items: center;
}

.header-left,
.header-right {
  height: 40px !important;
  line-height: 40px !important;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-right {
  gap: 12px;
}

.logo {
  display: flex !important;
  height: 40px !important;
  margin-right: 20px !important;
  align-items: center !important;
}

.logo-icon {
  display: flex;
  margin-right: 6px !important;
  font-size: 18px !important;
  align-items: center;
}

.logo-img {
  width: 29px;
  height: 34px;
}

.logo-text {
  margin-left: 6px;
  font-family: 'Microsoft YaHei UI';
  font-size: 24px;
  font-style: bold;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
}

.username {
  font-size: 12px !important;
  color: #303133 !important;
}

/* 头部按钮容器样式 */
.arrow_down_img {
  width: 16px;
  height: 16px;
}

.db_img {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.dy_img {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.db_text {
  font-family: 'Microsoft YaHei UI';
  font-size: 14px;
  font-style: regular;
  font-weight: 400;
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 60px;
}

/* 头部按钮样式 */
.header-button {
  position: relative;
  display: flex;
  padding: 6px 12px;
  font-size: 14px;
  color: white; /* 改为白色 */
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  align-items: center;
}

.header-button:hover {
  color: white;
  background-color: rgb(255 255 255 / 20%); /* 改为半透明白色背景 */
}

/* 角标数量样式 - 长方形样式 */
.badge-count {
  display: inline-block;

  /* width: 22px; */
  height: 22px;
  min-width: 20px;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: #fff;
  text-align: center;
  background-color: #ff383c;
  border-radius: 11px;
}

/* 待办按钮特定样式 */
.todo-button .badge-count {
  background-color: #ff383c;
}

/* 待阅按钮特定样式 */
.unread-button .badge-count {
  background-color: #ff383c;
}

.search-input {
  width: 240px;
  border-radius: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  height: 40px;
  gap: 4px;
}

.user-avatar {
  width: 40px; /* 从32px缩小到28px */
  height: 40px;
}

.username {
  font-size: 14px;
  color: white;
}
</style>
