<template>
  <div class="navbar">
    <div class="left-menu">
      <logo v-if="showLogo" :collapse="false" />
    </div>

    <div class="right-menu">
      <Language class="lanuguage" />

      <!-- <router-link to="/user/profile">
        <el-dropdown-item>个人中心</el-dropdown-item>
      </router-link> -->
      <span class="user" @click="goProfile">欢迎{{ userInfo.name }}</span>
      <el-icon class="logout">
        <SwitchButton @click="logout"/>
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
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 Language from '@/layout/components/language'
import Logo from './Logo'
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 router = useRouter();
const { locale } = useI18n()

const showLogo = computed(() => settingsStore.sidebarLogo);
const isCollapse = computed(() => !appStore.sidebar.opened);
const sidebar = computed(() => useAppStore().sidebar);
const userInfo = computed(() => useUserStore());

const definition = [
  { label: '中文', value: 'zh_CN'},
  { label: '英文', value: 'en_US'},
  { label: '俄文', value: 'ru_RU'},
]


function handleLanguageChange(lang) {
  locale.value = lang
  appStore.changeLanguage(lang)
  if (lang == 'en') {
    ElMessage.success('Switch Language Successfully!')
  } else {
    ElMessage.success('切换语言成功！')
  }
}

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

function goProfile() {
  router.push('/user/profile')
}

function changeChinese(en) {
  return definition.find(i => i.value == en)?.label || definition[0].label
}

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

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

// 默认打开第一个子页面
function selectMenu(routeInfo) {
  if (routeInfo && routeInfo.children.length > 0) {
    router.push(routeInfo.children[0])
    // router.push({name: routeInfo.children[0].name})
  } else {
    router.push(routeInfo.path)
  }
}

</script>

<style lang='scss' scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";
.navbar {
  display: flex;
  justify-content: space-between;
  height: $base-top-height;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to right, #c15353, #c15353);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .left-menu {
    display: flex;
    .sidebar-logo-container {
      width: 200px;
      background-color: transparent !important;
    }
  }

  .hamburger-container {
    @include flex-center;
    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 {
    @include flex-center;
    float: left;
    height: 100%;
    :deep(.el-breadcrumb__inner) {
      > a, span {
        color: #fff;
      }
    }
  }

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

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

  .right-menu {
    float: right;
    width: max-content;
    height: 100%;
    display: flex;
    align-items: center;
    > * {
      display: inline-block;
      width: max-content;
      margin-right: 24px;
      color: #fff;
    }
    .lanuguage {
      font-size: 16px;
      padding-top: 4px;
    }
    .user {
      cursor: pointer;
    }
    .logout {
      font-size: 24px;
      padding-left: 8px;
      cursor: pointer;
    }
  }
}
.language-icon {
  font-size: 18px;
  line-height: 50px;
  padding-right: 7px;
}
</style>