<script setup lang="ts">
import extraIcon from "./extraIcon.vue";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import { useRouter } from "vue-router";
import FullScreen from "./fullScreen.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { ref, toRaw, watch, onMounted, nextTick, computed } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getParentPaths, findRouteByPath } from "@/router/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { useAppStoreHook } from "@/store/modules/app";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
const router = useRouter();
const menuRef = ref();
// 过滤父级菜单
const menuActiveRef = ref([]);
const menuNew = computed(() => usePermissionStoreHook().wholeMenus);
watch(
  menuNew,
  newVal => {
    usePermissionStoreHookList(newVal);
  },
  { deep: true }
);
const usePermissionStoreHookList = (arr = []) => {
  const list = arr && arr.length ? arr : usePermissionStoreHook().wholeMenus;
  list.forEach(item => {
    if (item.meta.filterMenu) {
    } else {
      menuActiveRef.value.push(item);
    }
  });
};

// -
const defaultActive = ref(null);

const {
  route,
  device,
  logout,
  onPanel,
  resolvePath,
  username,
  userAvatar,
  getDivStyle,
  avatarsStyle
} = useNav();

function getDefaultActive(routePath) {
  const wholeMenus = usePermissionStoreHook().wholeMenus;
  /** 当前路由的父级路径 */
  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
  defaultActive.value = !isAllEmpty(route.meta?.activePath)
    ? route.meta.activePath
    : findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
}
const nameData = ref();

onMounted(() => {
  getDefaultActive(route.path);
  nameData.value = localStorage.getItem("userName");
  usePermissionStoreHookList();
  // console.log("route.path", usePermissionStoreHook().wholeMenus);
});

nextTick(() => {
  menuRef.value?.handleResize();
});

watch(
  () => [route.path, usePermissionStoreHook().wholeMenus],
  () => {
    getDefaultActive(route.path);
  }
);
const changePassword = () => {
  router.push("/password/change");
};
const open = () => {
  useAppStoreHook().toggleSideBar(true, "打开");
};
</script>

<template>
  <div
    v-if="device !== 'mobile'"
    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
    class="horizontal-header"
  >
    <el-menu
      ref="menuRef"
      router
      mode="horizontal"
      popper-class="pure-scrollbar"
      class="horizontal-header-menu"
      active-text-color="#d5e8fb00"
      :default-active="defaultActive"
    >
      <el-menu-item
        v-for="route in menuActiveRef"
        :key="route.path"
        :index="resolvePath(route) || route.redirect"
      >
        <template #title>
          <div
            v-if="toRaw(route.meta.icon)"
            :class="['sub-menu-icon', route.meta.icon]"
          >
            <component
              :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
            />
          </div>
          <div :style="getDivStyle" @click="open">
            <span class="select-none">
              {{ route.meta.title }}
            </span>
            <extraIcon :extraIcon="route.meta.extraIcon" />
          </div>
        </template>
      </el-menu-item>
    </el-menu>
    <div class="horizontal-header-right">
      <!-- 菜单搜索 -->
      <!-- <Search id="header-search" /> -->
      <!-- 全屏 -->
      <!-- <FullScreen id="full-screen" /> -->
      <!-- 消息通知 -->
      <!-- <Notice id="header-notice" /> -->
      <!-- 退出登录 -->
      <el-dropdown trigger="click">
        <!-- <span class="el-dropdown-link navbar-bg-hover select-none user_text"> -->
        <span class="el-dropdown-link user_text">
          <!-- <img :src="userAvatar" :style="avatarsStyle" /> -->
          <!-- <p v-if="username" class="dark:text-white">{{ username }}</p> -->
          <p v-if="nameData" class="icon-img">
            <el-icon>
              <Avatar />
            </el-icon>
          </p>
          <p class="ml-0.5">{{ nameData }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
            <el-dropdown-item @click="changePassword">
              修改密码
            </el-dropdown-item>
            <el-dropdown-item @click="logout">
              <!-- <IconifyIconOffline
                :icon="LogoutCircleRLine"
                style="margin: 5px"
              /> -->
              退出系统
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span style="margin-left: 20px">
        <!-- <IconifyIconOffline :icon="Setting" /> -->
      </span>
      <!-- <span
        class="set-icon navbar-bg-hover"
        title="打开项目配置"
        @click="onPanel"
      >
        <IconifyIconOffline :icon="Setting" />
      </span> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .icon-img {
//   width: 30px;
//   height: 30px;
//   border-radius: 100%;
//   color: blue;
//   font-size: 20px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   background: #fff;
// }
.user_text {
  line-height: 100%;
  color: #fff;
}

.user_text:hover {
  color: black;
}

:deep(.el-loading-mask) {
  opacity: 0.45;
}

.logout {
  max-width: 120px;

  ::v-deep(.el-dropdown-menu__item) {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 100%;
  }
}

.el-menu-item {
  // border: 1px solid red;
  // height: 30px;
  margin-right: 10px;
  font-size: 12px !important;

  /* 修改菜单项的字体大小 */
  text-align: center;
}

.el-menu-item.is-active {
  z-index: 999;
  // border-bottom-color: none !important;
}

.el-menu-item.is-active::before {
  position: absolute;
  z-index: -1;
  width: 80%;
  height: 30px;
  content: "";
  background: #fff;
  opacity: 0.08;
}
</style>
