<script setup lang="ts">
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { useRouter } from 'vue-router';
import { toggle, isFullscreen } from '@/utils/fullscreen-utils';
import useI18n from '@/hooks/useI18n';
import useUserStore from '@/store/modules/user';
import useAlarmStore from '@/store/modules/alarm';
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-button type="text">
      <template #icon>
        <a-badge :count="useAlarmStore().activeAlarmTotal" :overflow-count="99" status="warning">
          <BellOutlined />
        </a-badge>
      </template>
    </a-button>
 
    <a-tooltip>
      <template #title>全屏显示</template>
      <a-button type="text" @click="toggle">
        <template #icon>
          <FullscreenExitOutlined v-if="isFullscreen()" />
          <FullscreenOutlined v-else />
        </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>
