<script setup lang="ts">
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { useRouter } from 'vue-router';
import useI18n from '@/hooks/useI18n';
import useUserStore from '@/store/modules/user';
const { t, changeLocale } = useI18n();
const userStore = useUserStore();
const router = useRouter();

/**头像展开项点击 */
function fnClick({ key }: MenuInfo) {
  switch (key) {
    case 'settings':
      router.push({ name: 'Settings' });
      break;
    case 'profile':
      router.push({ name: 'Profile' });
      break;
    case 'logout':
      userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
      break;
  }
}

/**改变多语言 */
function fnChangeLocale(e: any) {
  changeLocale(e.key);
}
</script>

<template>
  <a-space :size="12" align="center">
    <a-popover
      overlayClassName="head-notice"
      placement="bottomRight"
      :trigger="['click']"
    >
      <a-button type="text">
        <template #icon>
          <a-badge :count="123" :overflow-count="99">
            <BellOutlined :style="{ fontSize: '20px' }" />
          </a-badge>
        </template>
      </a-button>
      <template #content :style="{ padding: 0 }">
        <a-tabs centered :tabBarStyle="{ width: '336px' }">
          <a-tab-pane key="1" tab="通知（41）">
            Content of Tab 通知
            <a-button type="link" block>查看更多</a-button>
          </a-tab-pane>
          <a-tab-pane key="2" tab="消息（231）">
            Content of Tab 消息
            <a-button type="link" block>查看更多</a-button>
          </a-tab-pane>
          <a-tab-pane key="3" tab="待办（1）">
            Content of Tab 待办
            <a-button type="link" block>查看更多</a-button>
          </a-tab-pane>
        </a-tabs>
      </template>
    </a-popover>

    <!-- <a-tooltip>
      <template #title>开源仓库</template>
      <a-button type="text" href="https://gitee.com/TsMask" target="_blank">
        <template #icon>
          <GithubOutlined :style="{ fontSize: '20px' }" />
        </template>
      </a-button>
    </a-tooltip> -->

    <!-- <a-tooltip>
      <template #title>文档手册</template>
      <a-button
        type="text"
        href="https://juejin.cn/column/7188761626017792056"
        target="_blank"
      >
        <template #icon>
          <QuestionCircleOutlined :style="{ fontSize: '20px' }" />
        </template>
      </a-button>
    </a-tooltip> -->

    <a-dropdown :trigger="['click', 'hover']">
      <a-button size="small" type="default">
        {{ t('i18n') }}
        <DownOutlined />
      </a-button>
      <template #overlay>
        <a-menu @click="fnChangeLocale">
          <a-menu-item key="zh_CN">中文</a-menu-item>
          <a-menu-item key="en_US">English</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

    <a-dropdown placement="bottomRight" :trigger="['click', 'hover']">
      <div class="user">
        <a-avatar
          shape="circle"
          size="default"
          :src="userStore.getAvatar"
          :alt="userStore.userName"
        ></a-avatar>
        <span class="nick">
          {{ userStore.nickName }}
        </span>
      </div>
      <template #overlay>
        <a-menu @click="fnClick">
          <!-- <a-menu-item key="profile">
            <template #icon>
              <UserOutlined />
            </template>
            <span>个人中心</span>
          </a-menu-item> -->
          <a-menu-item key="settings">
            <template #icon>
              <SettingOutlined />
            </template>
            <span>个人设置</span>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="logout">
            <template #icon>
              <LogoutOutlined />
            </template>
            <span>退出登录</span>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-space>
</template>

<style lang="less" scoped>
.user {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  .nick {
    padding-left: 8px;
    padding-right: 16px;
    font-size: 16px;
    max-width: 164px;
    white-space: nowrap;
    text-align: start;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
