<template>
  <div class="tabbar">
    <div class="tabbar-left">
      <menu-unfold-outlined
        class="trigger"
        @click="changeIcon"
        v-if="useSetting.collapsed"
      />
      <menu-fold-outlined class="trigger" v-else @click="changeIcon" />
      <!-- 左侧面包屑 -->
      <a-breadcrumb>
        <template #separator><span>></span></template>
        <a-breadcrumb-item
          v-for="(item, index) in breadcrumbList"
          :key="item.path"
          v-show="item.name"
        >
          {{ item.name }}</a-breadcrumb-item
        >
      </a-breadcrumb>
    </div>
    <div class="tabbar-right">
      <a-button style="margin-right: 8px" shape="circle" @click="refreshButton"
        ><sync-outlined
      /></a-button>
      <a-button style="margin-right: 8px" shape="circle" @click="fullScreen"
        ><ExpandOutlined
      /></a-button>
      <a-button style="margin-right: 8px" shape="circle"
        ><SettingOutlined
      /></a-button>
      <a-avatar src="https://www.antdv.com/assets/logo.1ef800a8.svg" />
      <a-dropdown v-model:open="visible">
        <a class="ant-dropdown-link" @click.prevent>
          admin
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="1">退出</a-menu-item>
            <a-menu-item key="2">个人中心</a-menu-item>
            <a-menu-item key="3">修改密码</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SyncOutlined,
  ExpandOutlined,
  SettingOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import type { MenuProps } from "ant-design-vue";
import { useUserSetting } from "@/stores/modules/setting";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/userStore";
import router from "@/router";
const userStore = useUserStore();
const useSetting = useUserSetting();
const $Route = useRoute();
const $Router = useRouter();

const visible = ref(false);
const handleMenuClick: MenuProps["onClick"] = (e) => {
  if (e.key === "1") {
    // 退出登录
    userStore.deleteToken();
    $Router.push({ path: "/login", query: { redirect: $Route.path } });
  } else if (e.key === "3") {
    visible.value = false;
  }
};
const changeIcon = () => {
  // 保存在pinia
  useSetting.toggleCollapsed();
};

// 全局刷新
const refreshButton = () => {
  useSetting.refreshPage();
};

// 全屏;
const fullScreen = () => {
  let full = document.fullscreenElement; //获取状态
  if (!full) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};

const breadcrumbList: any = computed(() => {
  return $Route.matched.map((item) => ({
    path: item.path,
    name: item.name,
    children: item.children || [],
  }));
});
</script>
<style lang="scss" scoped>
.tabbar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;

  .tabbar-left {
    height: 100%;
    display: flex;
    align-items: center;
    .trigger {
      font-size: 18px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
      border-left: 1px solid #ccc;
    }
    .breadcrumbItem {
      color: rgba(0, 0, 0, 0.45);
      transition: color 0.2s;
      padding: 0 4px;
      border-radius: 4px;
      height: 22px;
      display: inline-block;
      margin-inline: -4px;
    }
  }
  .tabbar-right {
    padding: 0 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    .ant-dropdown-link {
      color: rgba(0, 0, 0, 0.45);
      margin-left: 8px;
    }
  }
}
</style>
