<template>
  <div>
    <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="todoCount > 0" class="badge-count">{{
          todoCount > 99 ? '99+' : todoCount
        }}</span>
      </div>
      <div class="header-button unread-button">
        <!-- <img class="dy_img" alt="待阅" src="@/assets/imgs/portal/dy_b.png" /> -->
        <Message class="custom-hover" color="var(--top-header-text-color)" />
        <!-- <span class="db_text">待阅</span>
        <span v-if="copyMyCount > 0" class="badge-count">{{
          copyMyCount > 99 ? '99+' : copyMyCount
        }}</span> -->
      </div>
      <div class="header-button unread-button">
        <img class="dy_img" alt="告警" src="@/assets/imgs/portal/dy_b.png" />
        <span class="db_text">告警</span>
        <span v-if="gjCount > 0" class="badge-count">{{ gjCount > 99 ? '99+' : gjCount }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as PortalApi from '@/api/portal'
import Message from '@/layout/components/Message/src/Message.vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter() // 路由
// 头部按钮相关数据
const todoCountHeader = ref(15) // 待办数量
const unreadCountHeader = ref(102) // 待阅数量
const todoCount = ref(0)
const copyMyCount = ref(0)
const gjCount = ref(0)
// 头部按钮点击事件处理函数
const handleTodoClick = () => {
  router.push({ path: '/bpm/task/todo' })
  // ElMessage({ message: '查看待办事项', type: 'info' })
  // 这里可以添加导航到待办页面的代码
}

const handleUnreadClick = () => {
  router.push({ path: '/messages/notice' })
  // ElMessage({ message: '查看待阅消息', type: 'info' })
  // 这里可以添加导航到待阅页面的代码
}
// 获取我的待办数量
const getTodoCount = async () => {
  try {
    const data = await PortalApi.getTodoCount()
    todoCount.value = data.total
  } finally {
  }
}
// 我的待阅数量
const getCopyMyCount = async () => {
  try {
    const data = await PortalApi.getSystemNoticeTotal()
    // copyMyCount.value = data.total
  } finally {
  }
}
onMounted(() => {
  getTodoCount()
  getCopyMyCount()
})
</script>
<style scoped>
.db_img {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 4px;
}
.dy_img {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 4px;
}
.db_text {
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
}
.header-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 60px;
}

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

.header-button:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.2); /* 改为半透明白色背景 */
}
/* 角标数量样式 - 长方形样式 */
.badge-count {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: #ff383c;
  border-radius: 11px;
  text-align: center;
  line-height: 16px;
  min-width: 20px;
  /* width: 22px; */
  height: 22px;
}

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

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