<template>
  <a-layout-header class="header">
    <div class="left">
      <ul class="navs">
        <li
          v-for="nav in navs"
          :key="nav.path"
        >
          <RouterLink :to="nav.path">
            {{ nav.title }}
          </RouterLink>
        </li>
      </ul>
    </div>
    <div class="right">
      <a-dropdown placement="bottomCenter">
        <a @click.prevent>
          <a-avatar size="small">
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <span class="username">小小了墨</span>
        </a>
        <template #overlay>
          <a-menu @click="menuClickHandle">
            <a-menu-item :key="EnumUserDropdown.center">
              <span>个人中心</span>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item :key="EnumUserDropdown.logout">
              <span>退出登录</span>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { AppStore } from '@/store/modules/app'
import { EnumPage } from '@/router/base';

const store = AppStore()
const router = useRouter()
const navs = ref([
  {
    path: '/',
    title: '首页',
  },
  {
    path: '/login',
    title: '登录页'
  },
  {
    path: '/error',
    title: '错误页'
  }
])
enum EnumUserDropdown {
  center = 1,
  logout = 2
}
interface menuClickParams {
  key: number
}

const menuClickHandle = ({ key }: menuClickParams) => {
  switch (key) {
    case EnumUserDropdown.center:
      message.info('个人中心')
      break
    case EnumUserDropdown.logout:
      message.success('退出登录')
      router.push(EnumPage.Login).then(() => store.updateIsLogin(false))
      break
    default:
      break;
  }
}
</script>
<style lang="less" scoped>
@color: rgba(255, 255, 255, 0.65);
@color-hover: var(--color-primary);
.header {
  display: flex;
  justify-content: space-between;
  .right {
    a {
      padding: 5px 0;
      color: @color;
      &:hover {
        color: @color-hover;
      }
    }
    .username {
      margin-left: 10px;
    }
  }
}

.navs {
  display: flex;
  list-style: none;
  margin: 0;
  a {
    padding: 0 10px;
    text-decoration: none;
    color: var(--color-primary);
  }
  a:hover {
    text-decoration: underline;
    color: var(--color-a-active);
  }
}

</style>
