yf-portal-vue/src/components/home/header.vue

<template>
  <header
    class="fixed w-full top-0 z-100 border-b shadow-sm"
    :style="{
      backgroundColor: 'var(--header-bg)',
      borderColor: 'var(--header-border)',
    }"
  >
    <div class="flex items-center justify-between px-5 md:px-20 h-15">
      <div class="flex items-center gap-2 cursor-pointer" @click="goHome">
        <img :src="logo" alt="logo" class="w-9 h-9 rounded-md" />
        <img :src="logo2" alt="logo" class="h-10 hidden lg:flex" />
        <span
          class="text-[#828182] text-[14px]"
          style="text-wrap-mode: nowrap"
          >{{ $t("nav.title") }}</span
        >
      </div>

      <nav class="hidden lg:flex flex-1 mx-4 ml-60 text-sm">
        <ul class="flex items-center gap-6 text-[#303133] text-md">
          <!-- 首页 -->
          <li>
            <a
              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
              :class="
                router.currentRoute.value.path === '/'
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
              style="text-wrap-mode: nowrap"
              @click="router.push('/')"
            >
              {{ $t("nav.home") }}
            </a>
          </li>

          <!-- 流程门户 -->
          <li>
            <a
              style="text-wrap-mode: nowrap"
              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
              :class="
                router.currentRoute.value.path.startsWith('/flow')
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
              @click="goFlow"
            >
              {{ $t("nav.flow") }}
            </a>
          </li>

          <!-- 驾驶舱门户 -->
          <li v-hasPermi="['portal:dashboard:view']">
            <a
              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
              :class="
                router.currentRoute.value.path.startsWith('/drive')
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
              @click="goDrive"
              style="text-wrap-mode: nowrap"
            >
              {{ $t("nav.drive") }}
            </a>
          </li>

          <!-- 报表门户 (假设路径为 /report，请根据实际路由调整) -->
          <li>
            <a
              class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
              :class="
                router.currentRoute.value.path.startsWith('/report')
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
              style="text-wrap-mode: nowrap"
            >
              {{ $t("nav.report") }}
            </a>
          </li>
        </ul>
      </nav>

      <div
        style="border-left: 1px solid #a5bbdb"
        class="hidden lg:flex items-center gap-3 h-[40%] pl-4"
      >
        <el-dropdown trigger="click" @command="handleLanguageCommand">
          <button
            class="flex items-center gap-1 px-2 py-1 rounded-md hover:bg-gray-500/20 transition-colors cursor-pointer"
          >
            <Icon
              icon="mdi:translate"
              class="text-[18px]! mt-1"
              style="color: var(--text-secondary)"
            />
          </button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in languageOptions"
                :key="item.value"
                :command="item.value"
                :disabled="currentLocale === item.value"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <button
          @click="themeStore.toggleTheme()"
          class="p-2 rounded-full mt-1 hover:bg-gray-500/60 transition-colors cursor-pointer"
        >
          <Icon v-if="themeStore.theme === 'light'" icon="ri:moon-fill" />
          <Icon v-else icon="ri:sun-fill" />
        </button>
        <!-- 消息中心 -->
        <el-dropdown trigger="click" placement="bottom-end">
          <div class="flex items-center gap-2 cursor-pointer pr-6 pt-1">
            <el-badge
              :value="
                unreadMessageCount + oaUnreadCount + Number(unreadSRMCount)
              "
              class="item"
              v-if="hasUnreadMessages || oaHasUnreadCount"
            >
              <Icon
                icon="mdi:bell"
                class="w-5 h-5 text-[#a7aab0] hover:text-[#409EFF]"
              />
            </el-badge>
            <Icon
              v-else
              icon="mdi:bell"
              class="w-5 h-5 text-[#507698] hover:text-[#409EFF]"
            />
          </div>
          <template #dropdown>
            <el-dropdown-menu class="notification-dropdown">
              <div class="notification-tabs pl-2">
                <el-tabs v-model="activeTab" class="demo-tabs">
                  <el-tab-pane label="OA" name="tasks">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>OA</span>
                        <el-badge
                          :value="oaUnreadCount"
                          class="item ml-1"
                          v-if="oaHasUnreadCount"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <div>
                        <span
                          v-if="oaHasUnreadCount"
                          class="cursor-pointer text-blue-500"
                          @click="oaMarkAllAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <!-- OA消息 -->
                      <div
                        class="task-item"
                        v-for="(task, index) in oaMessagesList"
                        :key="index"
                      >
                        <div class="task-info">
                          <p class="task-title">
                            <span
                              v-if="task.status === '0'"
                              class="inline-block h-2 w-2 bg-[#f56c6c] rounded-full"
                            ></span>
                            <span class="pl-2 text-var(--tab-text)!">{{
                              task.title
                            }}</span>
                          </p>
                          <p class="message-desc">
                            <span>{{ task.oaCreateTime }}</span>
                          </p>
                        </div>
                      </div>
                      <div v-if="!oaMessagesList.length" class="no-tasks">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="CRM" name="messages">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>CRM</span>
                        <el-badge
                          :value="unreadMessageCount"
                          class="item ml-1"
                          v-if="hasUnreadMessages"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <!-- 消息中心内容 -->
                      <div>
                        <span
                          v-if="hasUnreadMessages"
                          class="cursor-pointer text-blue-500"
                          @click="markAllAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <div
                        class="message-item"
                        v-for="(item, index) in messages"
                        :key="index"
                      >
                        <div class="message-icon"></div>
                        <div class="message-text">
                          <!-- 未读就显示小红点 -->

                          <p class="message-title flex items-center gap-5">
                            <span
                              v-if="item.status === '0'"
                              class="w-2 h-2 bg-[#f56c6c] rounded-full text-var(--tab-text)!"
                            ></span
                            >{{ item.contentMajor }}
                          </p>
                          <p class="message-desc">
                            {{ timestampToDateTime(item.createTime) }}
                          </p>
                        </div>
                      </div>
                      <div v-if="!messages.length" class="no-messages">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>

                  <!-- SRM消息 -->
                  <el-tab-pane label="SRM" name="srm">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>SRM</span>
                        <el-badge
                          :value="unreadSRMCount"
                          class="item ml-1"
                          v-if="hasUnreadSRMCount"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <!-- 消息中心内容 -->
                      <div>
                        <span
                          v-if="hasUnreadSRMCount"
                          class="cursor-pointer text-blue-500"
                          @click="markSRMAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <div
                        class="message-item"
                        v-for="(item, index) in srmMessageList"
                        :key="index"
                      >
                        <div class="message-icon"></div>
                        <div class="message-text">
                          <!-- 未读就显示小红点 -->

                          <p class="message-title flex items-center gap-5">
                            <span
                              v-if="item.status === '0'"
                              class="w-2 h-2 bg-[#f56c6c] rounded-full text-var(--tab-text)!"
                            ></span
                            >{{ item.title }}
                          </p>
                          <p class="message-desc">
                            {{ timestampToDateTime(item.createTime) }}
                          </p>
                        </div>
                      </div>
                      <div v-if="!srmMessageList.length" class="no-messages">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>

                  <!-- EHR消息 -->
                  <el-tab-pane label="EHR" name="ehr">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>EHR</span>
                        <el-badge
                          :value="unreadEHRCount"
                          class="item ml-1"
                          v-if="hasUnreadEHRCount"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <!-- 消息中心内容 -->
                      <div>
                        <span
                          v-if="hasUnreadEHRCount"
                          class="cursor-pointer text-blue-500"
                          @click="markEHRAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <div
                        class="message-item"
                        v-for="(item, index) in ehrMessageList"
                        :key="index"
                      >
                        <div class="message-icon"></div>
                        <div class="message-text">
                          <!-- 未读就显示小红点 -->

                          <p class="message-title flex items-center gap-5">
                            <span
                              v-if="item.status === '0'"
                              class="w-2 h-2 bg-[#f56c6c] rounded-full text-var(--tab-text)!"
                            ></span
                            >{{ item.title }}
                          </p>
                          <p class="message-desc">
                            {{ timestampToDateTime(item.createTime) }}
                          </p>
                        </div>
                      </div>
                      <div v-if="!ehrMessageList.length" class="no-messages">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <template v-if="isLoggedIn">
          <el-dropdown @command="onUserCommand" trigger="click">
            <span class="flex items-center gap-2 cursor-pointer pr-2">
              <div class="avatar-wrapper">
                <img
                  :src="userAvatar || person"
                  alt="avatar"
                  class="w-8 h-8 rounded-full avatar-image"
                />
              </div>
              <span class="text-sm user-name" style="text-wrap-mode: nowrap">{{
                userName
              }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <span>{{ $t("common.person") }}</span>
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  <span>{{ $t("common.logout") }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
          <div
            style="text-wrap: nowrap"
            class="text-md flex items-center justify-center cursor-pointer h-full py-4"
            @click="login"
          >
            {{ $t("common.login") }}
          </div>
        </template>
      </div>

      <div class="lg:hidden">
        <el-dropdown trigger="click" @command="handleLanguageCommand">
          <button
            class="rounded-md relative top-1 right-5 px-2 py-1 hover:bg-gray-500/20 transition-colors cursor-pointer"
          >
            <Icon
              icon="mdi:translate"
              class="text-[16px]"
              style="color: var(--text-secondary)"
            />
          </button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in languageOptions"
                :key="item.value"
                :command="item.value"
                :disabled="currentLocale === item.value"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <button
          @click="themeStore.toggleTheme()"
          class="rounded-full relative top-1 right-4 hover:bg-gray-500/60 transition-colors cursor-pointer"
        >
          <Icon v-if="themeStore.theme === 'light'" icon="ri:moon-fill" />
          <Icon v-else icon="ri:sun-fill" />
        </button>
        <el-dropdown trigger="click" placement="bottom-end">
          <div class="flex items-center gap-2 cursor-pointer pr-6 pt-1">
            <el-badge
              :value="
                unreadMessageCount + oaUnreadCount + Number(unreadSRMCount)
              "
              class="item"
              v-if="hasUnreadMessages || oaHasUnreadCount"
            >
              <Icon
                icon="mdi:bell"
                class="w-5 h-5 text-gray-600 hover:text-[#409EFF]"
              />
            </el-badge>
            <Icon
              v-else
              icon="mdi:bell"
              class="w-5 h-5 text-gray-600 hover:text-[#409EFF]"
            />
          </div>
          <template #dropdown>
            <el-dropdown-menu class="notification-dropdown">
              <div class="notification-tabs pl-2">
                <el-tabs v-model="activeTab" class="demo-tabs">
                  <el-tab-pane label="OA" name="tasks">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>OA</span>
                        <el-badge
                          :value="oaUnreadCount"
                          class="item ml-1"
                          v-if="oaHasUnreadCount"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <div>
                        <span
                          v-if="oaHasUnreadCount"
                          class="cursor-pointer text-blue-500"
                          @click="oaMarkAllAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <!-- OA消息 -->
                      <div
                        class="task-item"
                        v-for="(task, index) in oaMessagesList"
                        :key="index"
                      >
                        <div class="task-info">
                          <p class="task-title">
                            <span
                              v-if="task.status === '0'"
                              class="inline-block h-2 w-2 bg-[#f56c6c] rounded-full text-var(--tab-text)!"
                            ></span>
                            {{ task.title }}
                          </p>
                          <p class="message-desc">
                            <span>{{ task.oaCreateTime }}</span>
                          </p>
                        </div>
                      </div>
                      <div v-if="!oaMessagesList.length" class="no-tasks">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="CRM" name="messages">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>CRM</span>
                        <el-badge
                          :value="unreadMessageCount"
                          class="item ml-1"
                          v-if="hasUnreadMessages"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <!-- 消息中心内容 -->
                      <div>
                        <span
                          v-if="hasUnreadMessages"
                          class="cursor-pointer text-blue-500"
                          @click="markAllAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <div
                        class="message-item"
                        v-for="(item, index) in messages"
                        :key="index"
                      >
                        <div class="message-icon"></div>
                        <div class="message-text">
                          <!-- 未读就显示小红点 -->

                          <p class="message-title flex items-center gap-5">
                            <span
                              v-if="item.status === '0'"
                              class="w-2 h-2 bg-[#f56c6c] rounded-full text-var(--tab-text)!"
                            ></span
                            >{{ item.contentMajor }}
                          </p>
                          <p class="message-desc">
                            {{ timestampToDateTime(item.createTime) }}
                          </p>
                        </div>
                      </div>
                      <div v-if="!messages.length" class="no-messages">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>

                  <el-tab-pane label="SRM" name="srm">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>SRM</span>
                        <el-badge
                          :value="unreadSRMCount"
                          class="item ml-1"
                          v-if="hasUnreadSRMCount"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <!-- 消息中心内容 -->
                      <div>
                        <span
                          v-if="hasUnreadSRMCount"
                          class="cursor-pointer text-blue-500"
                          @click="markSRMAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <div
                        class="message-item"
                        v-for="(item, index) in srmMessageList"
                        :key="index"
                      >
                        <div class="message-icon"></div>
                        <div class="message-text">
                          <!-- 未读就显示小红点 -->

                          <p class="message-title flex items-center gap-5">
                            <span
                              v-if="item.status === '0'"
                              class="w-2 h-2 bg-[#f56c6c] rounded-full text-var(--tab-text)!"
                            ></span
                            >{{ item.title }}
                          </p>
                          <p class="message-desc">
                            {{ timestampToDateTime(item.createTime) }}
                          </p>
                        </div>
                      </div>
                      <div v-if="!srmMessageList.length" class="no-messages">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>

                  <!-- EHR消息 -->
                  <el-tab-pane label="EHR" name="ehr">
                    <template #label>
                      <span class="custom-tabs-label">
                        <span>EHR</span>
                        <el-badge
                          :value="unreadEHRCount"
                          class="item ml-1"
                          v-if="hasUnreadEHRCount"
                        ></el-badge>
                      </span>
                    </template>
                    <div class="tab-content">
                      <!-- 消息中心内容 -->
                      <div>
                        <span
                          v-if="hasUnreadEHRCount"
                          class="cursor-pointer text-blue-500"
                          @click="markEHRAsRead"
                          >{{ $t("common.markAll") }}</span
                        >
                      </div>
                      <div
                        class="message-item"
                        v-for="(item, index) in ehrMessageList"
                        :key="index"
                      >
                        <div class="message-icon"></div>
                        <div class="message-text">
                          <!-- 未读就显示小红点 -->

                          <p class="message-title flex items-center gap-5">
                            <span
                              v-if="item.status === '0'"
                              class="w-2 h-2 bg-[#f56c6c] rounded-full text-var(--tab-text)!"
                            ></span
                            >{{ item.title }}
                          </p>
                          <p class="message-desc">
                            {{ timestampToDateTime(item.createTime) }}
                          </p>
                        </div>
                      </div>
                      <div v-if="!ehrMessageList.length" class="no-messages">
                        {{ $t("common.noMsg") }}
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button link @click="drawer = true">
          <i class="el-icon" />
          <Icon icon="fa:bars" class="icon" />
        </el-button>
      </div>
    </div>

    <el-drawer
      v-model="drawer"
      placement="right"
      size="80%"
      :with-header="false"
    >
      <div class="p-4 space-y-3">
        <ul class="flex flex-col gap-3 !text-[#303133]">
          <li>
            <a
              class="block px-3 py-2 rounded-md transition-all duration-300 !text-black"
              :class="
                router.currentRoute.value.path === '/'
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
              @click="
                router.push('/');
                drawer = false;
              "
            >
              {{ $t("nav.home") }}
            </a>
          </li>
          <li>
            <a
              class="block px-3 py-2 rounded-md transition-all duration-300 !text-black"
              :class="
                router.currentRoute.value.path.startsWith('/flow')
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
              @click="goFlow"
            >
              {{ $t("nav.flow") }}
            </a>
          </li>
          <li v-hasPermi="['portal:dashboard:view']">
            <a
              class="block px-3 py-2 rounded-md transition-all duration-300 !text-black"
              :class="
                router.currentRoute.value.path.startsWith('/drive')
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
              @click="goDrive"
            >
              {{ $t("nav.drive") }}
            </a>
          </li>
          <li>
            <a
              class="block px-3 py-2 rounded-md transition-all duration-300 !text-black"
              :class="
                router.currentRoute.value.path.startsWith('/report')
                  ? 'nav-item-active'
                  : 'nav-item-default'
              "
            >
              {{ $t("nav.report") }}
            </a>
          </li>
        </ul>
        <div class="flex items-center gap-3 mt-3">
          <template v-if="isLoggedIn">
            <el-dropdown @command="onUserCommand" trigger="click">
              <span class="flex items-center gap-2 cursor-pointer pr-2">
                <div class="avatar-wrapper">
                  <img
                    :src="userAvatar || person"
                    alt="avatar"
                    class="w-8 h-8 rounded-full avatar-image"
                  />
                </div>
                <span class="text-sm text-[#303133]">{{ userName }}</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <span class="pl-2">{{ $t("common.person") }}</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="logout">
                    <span class="pl-2">{{ $t("common.logout") }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <el-button
            v-else
            type="primary"
            class="flex-1 bg-[#0050b3]!"
            @click="login"
            >{{ $t("common.login") }}</el-button
          >
        </div>
      </div>
    </el-drawer>
  </header>
</template>

<script setup lang="ts">
import { Icon } from "@iconify/vue";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import logo from "@/assets/images/logo.png";
import logo2 from "@/assets/images/logo2.png";
import person from "@/assets/images/person.png";
import { useUserStoreWithOut } from "@/stores/useUserStore";
import { useThemeStore } from "@/stores/useThemeStore";
import {
  LOCALE_STORAGE_KEY,
  SUPPORTED_LOCALES,
  type AppLocale,
  useI18n,
} from "@/i18n";
const userStore = useUserStoreWithOut();
const themeStore = useThemeStore();
import {
  getNotifyMessages,
  getNotifyMessageList,
  markMessageAsRead,
  getUnreadNotifyMessageCount,
  getOANotifyMessages,
  getOANotifyMessageList,
  markOAMessageAsRead,
  getSRMNotifyMessages,
  getSRMNotifyMessageList,
  markSRMNotifyMessageRead,
  getEHRNotifyMessages,
  getEHRNotifyMessageList,
  markEHRNotifyMessageRead,
} from "@api/user";

import {
  getAccessToken,
  getRefreshToken,
  removeToken,
  setToken,
} from "@utils/auth";

import { deleteUserCache } from "@hooks/useCache";
import { manualLogoutKey, reloginCancelKey } from "@/config/axios/service";

// 新增消息中心状态
const activeTab = ref("tasks");
const messages = ref([]);

const isLoggedIn = computed(
  () => !!userStore.isSetUser || !!userStore.user?.id,
);
const { locale } = useI18n();
const userAvatar = computed(() => userStore.user?.avatar || "");
const userName = computed(() => userStore.user?.nickname || "");
const languageOptions: Array<{ label: string; value: AppLocale }> = [
  { label: "中文", value: "zh" },
  { label: "English", value: "en" },
  // 俄语
  { label: "Russian", value: "ru" },
];
const currentLocale = computed(() =>
  SUPPORTED_LOCALES.includes(locale.value as AppLocale)
    ? (locale.value as AppLocale)
    : "zh",
);

// 是否有未读消息
const hasUnreadMessages = computed(() => {
  return messages.value.some((msg) => msg.status === "0");
});
// oa是否有未读
const oaHasUnreadCount = computed(() => {
  return oaMessagesList.value.some((msg) => msg.status === "0");
});

// 未读消息数量
const unreadMessageCount = computed(() => {
  return messages.value.filter((msg) => msg.status === "0").length;
});
// oa未读消息数量
const oaUnreadCount = computed(() => {
  return oaMessagesList.value.filter((msg) => msg.status === "0").length;
});

// oa未读
const oaMessagesList = ref([]);
let srmMessageList = ref([]);
let ehrMessageList = ref([]);

// srm未读
const unreadSRMCount = computed(() => {
  return srmMessageList.value.filter((msg) => msg.status === "0").length;
});

// srm是否有未读消息
const hasUnreadSRMCount = computed(() => {
  return srmMessageList.value.some((msg) => msg.status === "0");
});

// ehr未读
const unreadEHRCount = computed(() => {
  return ehrMessageList.value.filter((msg) => msg.status === "0").length;
});
// ehr是否有未读消息
const hasUnreadEHRCount = computed(() => {
  return ehrMessageList.value.some((msg) => msg.status === "0");
});
const unreadCount = ref(0); // 未读消息数量
const getUnreadCount = async () => {
  if (!getAccessToken()) {
    unreadCount.value = 0;
    return;
  }

  const data = await getUnreadNotifyMessageCount();
  unreadCount.value = data;
};
let messageTimer: ReturnType<typeof setInterval> | undefined;
let unreadTimer: ReturnType<typeof setInterval> | undefined;
onMounted(async () => {
  if (isLoggedIn.value) {
    getUnreadCount();
    try {
      await getNotifyMessages(userStore.getUser.username);
      const messageList = await getNotifyMessageList(
        userStore.getUser.username,
      );
      messages.value = messageList.filter((msg) => msg.status === "0");
    } catch (error) {
      messages.value = [];
    }

    // oa消息
    try {
      await getOANotifyMessages(userStore.getUser.username);
      const oaMessageList = await getOANotifyMessageList(
        userStore.getUser.username,
      );
      oaMessagesList.value = oaMessageList.filter((msg) => msg.status === "0");
    } catch (error) {
      oaMessagesList.value = [];
    }

    try {
      // srm消息
      await getSRMNotifyMessages(userStore.getUser.username);
      const srmMessageLists = await getSRMNotifyMessageList(
        userStore.getUser.username,
      );
      srmMessageList.value = srmMessageLists.filter(
        (msg) => msg.status === "0",
      );
    } catch (error) {
      srmMessageList.value = [];
    }

    // EHR消息
    try {
      await getEHRNotifyMessages(userStore.getUser.username);
      const ehrMessageLists = await getEHRNotifyMessageList(
        userStore.getUser.username,
      );
      ehrMessageList.value = ehrMessageLists.filter(
        (msg) => msg.status === "0",
      );
    } catch (error) {
      ehrMessageList.value = [];
    }
  }

  messageTimer = setInterval(
    async () => {
      if (isLoggedIn.value) {
        try {
          await getNotifyMessages(userStore.getUser.username);
          const messageList = await getNotifyMessageList(
            userStore.getUser.username,
          );
          messages.value = messageList.filter((msg: any) => msg.status === "0");
        } catch (error) {
          messages.value = [];
        }

        // oa消息
        try {
          await getOANotifyMessages(userStore.getUser.username);
          const oaMessageList = await getOANotifyMessageList(
            userStore.getUser.username,
          );
          oaMessagesList.value = oaMessageList.filter(
            (msg: any) => msg.status === "0",
          );
        } catch (error) {
          oaMessagesList.value = [];
        }

        // srm消息
        try {
          await getSRMNotifyMessages(userStore.getUser.username);
          const srmMessageLists = await getSRMNotifyMessageList(
            userStore.getUser.username,
          );
          srmMessageList.value = srmMessageLists.filter(
            (msg: any) => msg.status === "0",
          );
        } catch (error) {
          srmMessageList.value = [];
        }

        // EHR消息
        try {
          await getEHRNotifyMessages(userStore.getUser.username);
          const ehrMessageLists = await getEHRNotifyMessageList(
            userStore.getUser.username,
          );
          ehrMessageList.value = ehrMessageLists.filter(
            (msg) => msg.status === "0",
          );
        } catch (error) {
          ehrMessageList.value = [];
        }
      }
    },
    1000 * 60 * 5,
  );

  unreadTimer = setInterval(
    () => {
      if (userStore.getIsSetUser && getAccessToken()) {
        console.log("轮询刷新小红点");
        getUnreadCount();
      } else {
        unreadCount.value = 0;
      }
    },
    1000 * 60 * 1,
  );
});

onBeforeUnmount(() => {
  if (messageTimer) {
    clearInterval(messageTimer);
  }
  if (unreadTimer) {
    clearInterval(unreadTimer);
  }
});

function timestampToDateTime(timestamp) {
  // 兼容 10位(秒) / 13位(毫秒)
  const len = String(timestamp).length;
  const date = new Date(Number(timestamp) * (len === 10 ? 1000 : 1));

  // 年
  const year = date.getFullYear();
  // 月（0~11 → +1）
  const month = String(date.getMonth() + 1).padStart(2, "0");
  // 日
  const day = String(date.getDate()).padStart(2, "0");
  // 时
  const hours = String(date.getHours()).padStart(2, "0");
  // 分
  const minutes = String(date.getMinutes()).padStart(2, "0");
  // 秒
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const router = useRouter();
const drawer = ref(false);

const setLanguage = (lang: AppLocale) => {
  locale.value = lang;
  localStorage.setItem(LOCALE_STORAGE_KEY, lang);
  document.documentElement.lang = lang;
};

const handleLanguageCommand = (command: string | number | object) => {
  if (
    typeof command === "string" &&
    SUPPORTED_LOCALES.includes(command as AppLocale)
  ) {
    setLanguage(command as AppLocale);
  }
};

// CRM标为已读
const markAllAsRead = async () => {
  await markMessageAsRead(userStore.getUser.username);
  // 刷新消息列表
  const messageList = await getNotifyMessageList(userStore.getUser.username);
  messages.value = messageList.filter((msg: any) => msg.status === "0");
};

// oa全部标为已读
const oaMarkAllAsRead = async () => {
  await markOAMessageAsRead(userStore.getUser.username);
  // 刷新消息列表
  const messageList = await getOANotifyMessageList(userStore.getUser.username);
  oaMessagesList.value = messageList.filter((msg: any) => msg.status === "0");
};

// srm全部标为已读
const markSRMAsRead = async () => {
  await markSRMNotifyMessageRead(userStore.getUser.username);
  const messageList = await getSRMNotifyMessageList(userStore.getUser.username);
  srmMessageList.value = messageList.filter((msg: any) => msg.status === "0");
};

// EHR全部标为已读
const markEHRAsRead = async () => {
  await markEHRNotifyMessageRead(userStore.getUser.username);
  const messageList = await getEHRNotifyMessageList(userStore.getUser.username);
  ehrMessageList.value = messageList.filter((msg: any) => msg.status === "0");
};

const goHome = () => {
  router.push({ path: "/" });
};

const login = () => {
  router.push({
    path: "/login",
  });
};

const goFlow = () => {
  router.push({ path: "/flow" });
};

const goDrive = () => {
  router.push({ path: "/drive" });
};

const onUserCommand = async (command: string) => {
  if (command === "logout") {
    // await userStore.loginOut();

    deleteUserCache(); // 删除用户缓存
    sessionStorage.setItem(manualLogoutKey, "true");
    sessionStorage.removeItem(reloginCancelKey);
    removeToken();
    const ua = window.navigator.userAgent.toLowerCase();
    const logoutRedirect =
      ua.includes("dingtalk") || ua.includes("dingtalkwork") ? "/" : "/login";
    window.location.href = logoutRedirect;
  }
};
</script>

<style scoped>
:deep(.el-scrollbar) {
  background: #a14e4e !important;
}
.avatar-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.avatar-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
  z-index: 1;
  opacity: 0;
}

.avatar-wrapper:hover::before {
  animation: shine 0.5s ease-out;
}

@keyframes shine {
  0% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.msg-title {
  color: var(--text-primary-down) !important;
}

.notification-dropdown {
  width: 400px !important;
  max-height: 500px;
  overflow: hidden;
}

.notification-tabs .el-tabs__header {
  margin-bottom: 0;
  padding: 10px;
  background-color: #f8f9fa;
}

.tab-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}

.message-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 8px;
  border-bottom: 1px solid #eee;
}

.message-item:last-child {
  border-bottom: none;
}

.message-icon {
  margin-right: 12px;
  display: flex;
  align-items: center;
}

.message-text {
  flex: 1;
}

.message-title {
  font-weight: 500;
  /* color: #303133; */
  margin-bottom: 4px;
}

.message-desc {
  font-size: 13px;
  color: #909399;
  line-height: 1.4;
  margin-bottom: 4px;
}

.message-time {
  font-size: 12px;
  color: #c0c4cc;
}

.no-messages,
.no-tasks {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-style: italic;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  border-bottom: 1px solid #9ca3ba;
}

.task-item:last-child {
  border-bottom: none;
}

.task-info {
  flex: 1;
}

.task-title {
  font-weight: 500;
  /* color: #303133; */
  margin-bottom: 4px;
}

.task-desc {
  font-size: 13px;
  color: #909399;
  line-height: 1.4;
  margin-bottom: 4px;
}

.task-time {
  font-size: 12px;
  color: #c0c4cc;
}

.nav-item-default {
  background-color: #eeeeef; /* 浅灰色背景 */
  color: var(--text-secondary);
  border-radius: 100px;
}

.nav-item-default:hover {
  /* background-color: #e2e8f0; */
  color: #02409b !important; /* 品牌蓝文字 */
}

/* 激活状态：深蓝色背景，白色文字 */
.nav-item-active {
  background-color: #063e8d !important; /* 指定的深蓝色背景 */
  color: var(--text-primary);
  font-weight: 500; /* 稍微加粗 */
  box-shadow: 0 2px 4px rgba(6, 62, 141, 0.2); /* 可选：轻微阴影 */
  border-radius: 100px;
}
.user-name {
  color: var(--text-secondary);
}
/* 确保移动端也生效，因为上面用了 block，可能需要调整一下内边距或显示方式 */
@media (max-width: 1024px) {
  .nav-item-active,
  .nav-item-default {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.nav-item-default {
  /* color: rgba(230, 237, 255, 0.8); */
  border-radius: 0;
  position: relative;
  background-color: transparent;
}

.nav-item-default:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.nav-item-active {
  /* color: #fff !important; */
  background: linear-gradient(
    180deg,
    rgba(92, 103, 238, 0.32),
    rgba(36, 53, 118, 0.18)
  ) !important;
  /* box-shadow: inset 0 -2px 0 #6f8bff; */
  padding-bottom: 22px;
  padding-top: 22px;
  border-radius: 0;

  position: relative;
}

.nav-item-active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100%;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #5887f8 0%,
    #69b5f8 30%,
    #fff 50%,
    #69b5f8 70%,
    #5887f8 100%
  );
  box-shadow: 0 0 12px rgba(112, 120, 255, 0.95);
}

/* .nav-item-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 46px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #cc82ff, #5f89ff);
  box-shadow: 0 0 12px rgba(112, 120, 255, 0.95);
} */

.notification-dropdown {
  width: 400px !important;
  max-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(109, 137, 213, 0.18);
  background: var(--bg-card);
}

/* 修改 Tab 标签文字颜色 */
:deep(.el-tabs__item) {
  color: var(--text-primary) !important; /* 强制设置为白色 */
}

/* 选中状态的标签文字颜色（保持白色或根据需要调整） */
:deep(.el-tabs__item.is-active) {
  color: #0088ff !important;
}

/* 如果需要修改底部激活条的颜色，可以保留或调整这个 */
:deep(.el-tabs__active-bar) {
  background-color: #409eff !important; /* 例如改为品牌蓝，或者保持默认 */
}

/* 确保 hover 状态也是白色或高亮色 */
:deep(.el-tabs__item:hover) {
  color: #008dff !important;
}
</style>