<script lang="ts" setup>
import { useRouter } from "vue-router"
import { useUserStore } from "@/store/modules/user"

const router = useRouter()
const userStore = useUserStore()

function logout() {
  userStore.logout()
}
</script>

<template>
  <div class="navigation-bar flex items-center justify-between pr-[16px]">
    <div class="left flex items-center h-[100%]">
      <img class="ml-[16px] w-[130px] h-[42px] cursor-pointer" src="@/assets/logo.png" alt="logo" @click="router.push('/')">
    </div>
    <div class="right-menu">
      <el-dropdown class="right-menu-item">
        <div class="right-menu-avatar">
          <span>{{ userStore.userInfo?.name || "用户" }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">
              <span style="display: block">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navigation-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: var(--v3-global-header-height);
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  .left {
    width: var(--v3-sidebar-width);
    box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.1);
  }
  .right-menu {
    color: #606266;
    .right-menu-item {
      cursor: pointer;
      .right-menu-avatar {
        display: flex;
        align-items: center;
        span {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
