<template>
  <a-layout-header class="header-layout">
    <div class="route-paths">
      <span
        v-for="meta in metas"
        :key="meta.name"
        :class="{ active: router.currentRoute.value.name === meta.name }"
        @click="routeChange(meta.name)"
      >
        {{ meta.title }}
      </span>
    </div>

    <div style="display: flex">
      <a-dropdown placement="bottomRight">
        <template #overlay>
          <a-menu style="width: 100px" @click="handlerLangClick">
            <a-menu-item
              v-for="(langDesc, lange) in langNameDescs"
              :key="lange"
              :disabled="lange === lang"
            >
              {{ langDesc }}
            </a-menu-item>
          </a-menu>
        </template>
        <div class="avatar" style="margin-right: 20px">
          <span>
            {{ langNameDescs[lang] }}
            <DownOutlined />
          </span>
        </div>
      </a-dropdown>

      <a-dropdown placement="bottomRight">
        <template #overlay>
          <a-menu style="width: 100px" @click="handlerMenuClick">
            <a-menu-item v-for="menu in menus" :key="menu.key">
              {{ menu.label }}
            </a-menu-item>
          </a-menu>
        </template>
        <div class="avatar">
          <a-avatar :size="32">
            <template #icon>
              <img :src="userStore.current.avatar" />
            </template>
          </a-avatar>
          <span>
            {{ userStore.current.nickname }}
            <DownOutlined />
          </span>
        </div>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<script lang="ts" setup>
import { MenuProps } from 'ant-design-vue'
import { useUserStore } from '@/store'
import { gotoLogin } from '@/api'
import { router, getRouteTreePaths, routesMetas, RoutesName } from '@/router'
import { computed } from 'vue'
import { ui18n, lang, langNameDescs, changeLang, langNameEum } from '@/lang'

defineOptions({ name: 'LayoutHeader' })

const userStore = useUserStore()
const metas = computed(() => {
  const ignores = [RoutesName.project]
  const paths = getRouteTreePaths()
  return paths
    .filter(name => !ignores.includes(name))
    .map(name => ({ name, title: routesMetas[name].title }))
})

const routeChange = (routeName: RoutesName) => {
  router.push({
    name: routeName
    // params: router.currentRoute.value.params
  })
}

const menus = [{ label: ui18n.t('sys.logout'), key: 'logout' }]
const handlerMenuClick: MenuProps['onClick'] = async e => {
  if (e.key === 'logout') {
    await userStore.logout()
    gotoLogin()
  }
}

const handlerLangClick: MenuProps['onClick'] = async e => {
  changeLang(e.key as langNameEum)
}

userStore.fetch()
</script>

<style lang="scss" scoped>
.header-layout {
  background-color: #fff;
  display: flex;
  padding: 21px 24px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
  > span {
    margin-left: 8px;
  }
}

.route-paths {
  margin-right: 20px;

  span {
    color: #8c8c8c;
    font-size: 14px;
    padding: 0 11px;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;

    &:hover,
    &.active {
      color: #646566;
    }

    &:not(.active) {
      cursor: pointer;
    }

    &:not(:last-child)::after {
      content: '/';
      position: absolute;
      right: 0;
      top: 0;
    }

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }
}
</style>
