<script setup lang="ts">
import { useRoute } from "vue-router";
import { HomeOutlined, FullscreenOutlined } from "@ant-design/icons-vue";
import { useUserInfoStore } from "@/stores/useUserInfoStore";
import avatar from "@/assets/avatar.png";
import { YCODE_BASEURL } from "@/utils/request";
import { logout } from "@/api/common";

const emits = defineEmits(["requestFullscreen"]);

const route = useRoute();
const userInfoStore = useUserInfoStore();

const handleLogout = () => {
  logout().then(() => {
    window.location.href = `${YCODE_BASEURL}/login?redirect=${encodeURIComponent(
      window.location.href
    )}`;
  });
};
</script>

<template>
  <div class="root">
    <a-breadcrumb>
      <a-breadcrumb-item v-for="item in route.matched" :key="item.path">
        <home-outlined v-if="item.path === '/' && item.name === 'layout'" />
        <span v-else>{{ item.meta.title || item.path }}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>

    <div class="user-area">
      <div class="fullscreen-icon-area" @click="emits('requestFullscreen')">
        <FullscreenOutlined class="fullscreen-icon" />
      </div>
      <a-dropdown placement="bottom">
        <div style="display: flex; align-items: center; cursor: pointer">
          <img :src="userInfoStore.userInfo?.avatar || avatar" class="avatar" />
          <div>{{ userInfoStore.userInfo?.alias || "-" }}</div>
        </div>

        <template #overlay>
          <a-menu>
            <a-menu-item @click="handleLogout">
              <span>退出登录</span>
            </a-menu-item>
            <a-menu-item>
              <a class="back-oa" :href="`${OA_BASEURL}/front/`"> 返回OA </a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<style lang="less" scoped>
.root {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background-color: #fff;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
  .user-area {
    display: flex;
    align-items: center;
    color: rgb(51, 51, 51);
    .fullscreen-icon-area {
      width: 35px;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ecf4fe;
      border-radius: 50%;
      cursor: pointer;
      .fullscreen-icon {
        font-size: 20px;
        color: #1890ff;
      }
    }
    .avatar {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-left: 16px;
      margin-right: 8px;
    }
  }
}
</style>
