<template>
  <div class="main-header">
    <div class="main-logo">
      <img src="@/assets/logo.png" alt="" />
      <span>维修检测平台</span>
    </div>
    <div class="main-user" ref="buttonRef" @click="onClickOutside">
      <span class="user-name">李明华</span>
      <svg-icon icon-class="user" size="22" />
    </div>
    <el-popover
      :teleported="false"
      ref="popoverRef"
      :virtual-ref="buttonRef"
      trigger="click"
      title=""
      virtual-triggering
    >
      <div class="loginOut" @click="deviceResourceFun">仪器资源</div>
      <div class="loginOut" @click="goToManange">部门管理</div>
      <div class="loginOut" @click="gotoDictPage">字典管理</div>
      <div class="loginOut" @click="userCenter">修改密码</div>
      <div class="loginOut" @click="loginOutFun">退出登录</div>
    </el-popover>

    <UserCenter ref="userCenterRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, unref } from "vue";
import UserCenter from "@/views/modules/person-manager/com/userCenter.vue";
import { ClickOutside as vClickOutside } from "element-plus";

const router = useRouter();
const buttonRef = ref();
const popoverRef = ref();
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.();
};
const loginOutFun = () => {
  localStorage.setItem("token", "");
  router.replace("/login");
};

const deviceResourceFun = () => {
  router.push("/deviceResources");
};
const goToManange = () => {
  router.push("/detp-management");
};

const userCenterRef = ref();
const userCenter = () => {
  userCenterRef.value && userCenterRef.value?.show();
};

const gotoDictPage = () => {
  router.push("/dictionary");
};
</script>

<style scoped lang="scss">
.main-header {
  width: 100%;
  height: $main-header-height;
  background-color: $hj-white-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;

  :deep(.el-popper) {
    background-color: $hj-white-4;
    padding: 2px;
    .loginOut {
      cursor: pointer;
      height: 30px;
      margin-bottom: 2px;
      line-height: 30px;
      text-align: center;
      border-radius: 4px;
      background-color: $hj-white-1;
    }
  }

  .main-logo {
    display: flex;
    align-items: center;
    justify-content: start;
    img {
      vertical-align: middle;
      width: 36px;
      height: 36px;
    }

    span {
      margin-left: 6px;
      font-size: var(--hj-fs-16);
      color: var(--fc-color-3);
    }
  }

  .main-user {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: start;

    //img {
    //  vertical-align: middle;
    //  width: 18px;
    //  height: 20px;
    //}

    .user-name {
      margin-right: 10px;
      font-size: var(--hj-fs-14);
      color: var(--fc-color-4);
    }
  }
}
</style>
