<template>
  <div class="navbar">
    <hamburger id="hamburger-container"
      :is-active="appStore.sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar" />
    <breadcrumb id="breadcrumb-container"
      class="breadcrumb-container"
      v-if="!settingsStore.topNav" />
    <top-nav id="topmenu-container"
      class="topmenu-container"
      v-if="settingsStore.topNav" />

    <div class="right-menu">
      <template v-if="appStore.device !== 'mobile'">
        <header-search id="header-search"
          class="right-menu-item" />

        <screenfull id="screenfull"
          class="right-menu-item hover-effect" />

        <el-tooltip content="主题模式"
          effect="dark"
          placement="bottom">
          <div class="right-menu-item hover-effect theme-switch-wrapper"
            @click="toggleTheme">
            <svg-icon v-if="settingsStore.isDark"
              icon-class="sunny" />
            <svg-icon v-if="!settingsStore.isDark"
              icon-class="moon" />
          </div>
        </el-tooltip>

        <el-tooltip content="布局大小"
          effect="dark"
          placement="bottom">
          <size-select id="size-select"
            class="right-menu-item hover-effect" />
        </el-tooltip>
      </template>
      <div class="avatar-container">
        <el-dropdown @command="handleCommand"
          class="right-menu-item hover-effect"
          trigger="click">
          <div class="avatar-wrapper">
            <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
            <span class="user-name">{{ name }}</span>
            <el-icon><caret-bottom /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/user/profile">
                <el-dropdown-item>个人中心</el-dropdown-item>
              </router-link>
              <el-dropdown-item command="setLayout"
                v-if="settingsStore.showSettings">
                <span>布局设置</span>
              </el-dropdown-item>
              <el-dropdown-item divided
                command="logout"
                v-if="showQuit">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'

const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()

const name = userStore.name;
const showQuit = !window.h5sdk; // 判断飞书客户端内，则不显示退出登录

function toggleSideBar() {
  appStore.toggleSideBar()
}

function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}

function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '#/login';
    })
  }).catch(() => { });
}

const emits = defineEmits(['setLayout'])
function setLayout() {
  emits('setLayout');
}

function toggleTheme() {
  settingsStore.toggleTheme()
}
</script>

<style lang='scss'
  scoped>
  .navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: var(--navbar-bg);
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .hamburger-container {
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background 0.3s;
      -webkit-tap-highlight-color: transparent;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }

    .breadcrumb-container {
      float: left;
    }

    .topmenu-container {
      position: absolute;
      left: 50px;
    }

    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }

    .right-menu {
      float: right;
      height: 100%;
      line-height: 50px;
      display: flex;

      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: var(--navbar-text);
        vertical-align: text-bottom;

        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }

        &.theme-switch-wrapper {
          display: flex;
          align-items: center;

          svg {
            transition: transform 0.3s;

            &:hover {
              transform: scale(1.15);
            }
          }
        }
      }

      .avatar-container {
        margin-right: 40px;

        .el-dropdown {
          display: flex;
          align-items: center;

          .user-name{
            font-size: 16px;
          }

          .avatar-wrapper {
            position: relative;

            .user-avatar {
              cursor: pointer;
              width: 40px;
              height: 40px;
              border-radius: 10px;
            }

            i {
              cursor: pointer;
              position: absolute;
              right: -20px;
              top: 50%;
              transform: translate(-50%, 0);
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>
