<script setup lang="ts">
import svgLight from '@/assets/svg/light.svg';
import svgDark from '@/assets/svg/dark.svg';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { viewTransitionTheme } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useFullscreen } from '@vueuse/core';
import { hasPermissions } from '@/plugins/auth-user';
import useI18n from '@/hooks/useI18n';
import useLayoutStore from '@/store/modules/layout';
import useAppStore from '@/store/modules/app';
import useUserStore from '@/store/modules/user';
import useAlarmStore from '@/store/modules/alarm';
import useMaskStore from '@/store/modules/mask';
const { isFullscreen, toggle } = useFullscreen();
const { t, changeLocale, optionsLocale } = useI18n();
const layoutStore = useLayoutStore();
const maskStore = useMaskStore();
const userStore = useUserStore();
const appStore = useAppStore();
const route = useRoute();
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;
  }
}

/**锁屏确认 */
const lockConfirm = ref<boolean>(false);
/**锁屏密码 */
const lockPasswd = ref<string>('');

/**锁屏按钮提示 */
function fnClickLock() {
  lockConfirm.value = true;
  lockPasswd.value = '';
  maskStore.lockPasswd = '';
}

/**锁屏确认跳转锁屏页面 */
function fnClickLockToPage() {
  lockConfirm.value = false;
  maskStore.lockPasswd = lockPasswd.value;
  maskStore.handleMaskType('lock');
  router.push({ name: 'LockScreen', query: { redirect: route.path } });
}

/**告警数按钮提示跳转 */
function fnClickAlarm() {
  router.push({ name: 'ActiveAlarm_2088' });
}

/**改变主题色 */
function fnClickTheme(e: any) {
  viewTransitionTheme(isDarkMode => {
    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
  }, e);
}

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

<template>
  <a-space :size="12" align="center">
    <a-tooltip placement="bottomRight">
      <template #title>{{ t('loayouts.rightContent.alarm') }}</template>
      <a-button type="text" style="color: inherit" @click="fnClickAlarm">
        <template #icon>
          <a-badge
            :count="useAlarmStore().activeAlarmTotal"
            :overflow-count="99"
            status="warning"
            style="color: inherit"
          >
            <BellOutlined />
          </a-badge>
        </template>
      </a-button>
    </a-tooltip>

    <!-- 锁屏操作 -->
    <span v-perms:has="['system:setting:lock']">
      <a-tooltip placement="bottomRight">
        <template #title>{{ t('loayouts.rightContent.lock') }}</template>
        <a-button type="text" style="color: inherit" @click="fnClickLock()">
          <template #icon>
            <LockOutlined />
          </template>
        </a-button>
        <ProModal
          :drag="true"
          :center-y="true"
          :width="400"
          :minHeight="200"
          :mask-closable="false"
          v-model:open="lockConfirm"
          :title="t('loayouts.rightContent.lockTip')"
          @ok="fnClickLockToPage()"
        >
          <a-space>
            {{ t('loayouts.rightContent.lockPasswd') }}：
            <a-input-password
              v-model:value="lockPasswd"
              :placeholder="t('common.inputPlease')"
            >
              <template #prefix>
                <a-tooltip
                  :title="t('loayouts.rightContent.lockPasswdTip')"
                  placement="topLeft"
                >
                  <UnlockOutlined />
                </a-tooltip>
              </template>
            </a-input-password>
          </a-space>
        </ProModal>
      </a-tooltip>
    </span>

    <a-tooltip placement="bottomRight">
      <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
      <a-button type="text" style="color: inherit" @click="toggle">
        <template #icon>
          <FullscreenExitOutlined v-if="isFullscreen" />
          <FullscreenOutlined v-else />
        </template>
      </a-button>
    </a-tooltip>

    <a-tooltip placement="bottomRight">
      <template #title>{{ t('loayouts.rightContent.theme') }}</template>
      <a-button type="text" @click="fnClickTheme">
        <template #icon>
          <img
            v-if="layoutStore.proConfig.theme === 'dark'"
            :src="svgDark"
            class="theme-icon"
          />
          <img v-else :src="svgLight" class="theme-icon" />
        </template>
      </a-button>
    </a-tooltip>

    <a-dropdown
      placement="bottomRight"
      trigger="click"
      v-if="appStore.i18nOpen && hasPermissions(['system:setting:i18n'])"
    >
      <a-button type="text" style="color: inherit">
        <template #icon> <TranslationOutlined /> </template>
      </a-button>
      <template #overlay>
        <a-menu @click="fnChangeLocale">
          <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
            {{ opt.label }}
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>

    <a-dropdown placement="bottomRight" trigger="click">
      <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>{{ t('loayouts.rightContent.profile') }}</span>
          </a-menu-item> -->
          <a-menu-item key="settings">
            <template #icon>
              <SettingOutlined />
            </template>
            <span>{{ t('loayouts.rightContent.settings') }}</span>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="logout">
            <template #icon>
              <LogoutOutlined />
            </template>
            <span>{{ t('loayouts.rightContent.logout') }}</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;
  }
}

.theme-icon {
  width: 18px;
  height: 18px;
  margin-bottom: 4px;
  color: inherit;
}
</style>
