<template>
  <span style="float: right; height: 25px; ">
    <a-tooltip placement="top">
      <template #title>
        <span>{{ $t('common.changeLuaguage') }}</span>
      </template>
      <a-dropdown :trigger="['click']">
        <a @click.prevent>
          <global-outlined :style="{ color: color }" />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item key="0" @click="changeLang('zh')">
              English
            </a-menu-item>
            <a-menu-item key="1" @click="changeLang('en')">
              中文
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </a-tooltip>
    <a-tooltip placement="top">
      <template #title>
        <span>{{
          state.fullscreenIcon == FullscreenExitOutlined ? $t('common.exitfullScreen') : $t('common.fullScreen')
        }}</span>
      </template>
      <component :is="state.fullscreenIcon" @click="toggleFullScreen"
        :style="{ 'font-size': '16px', 'margin-left': '5px', color: color }" />
    </a-tooltip>
    <a-tooltip placement="top">
      <template #title>
        <span>{{ $t('common.LockScreen') }}</span>
      </template><lock-outlined :style="{ 'font-size': '16px', 'margin-left': '5px', color: color }"
        @click="setLockScreen" />
    </a-tooltip>
    <a-tooltip placement="top">
      <template #title>
        <span>{{ $t('common.ExitSystem') }}</span>
      </template>
      <poweroff-outlined @click="confirm" :style="
        {
          'font-size': '16px',
          'margin-right': '10px',
          'margin-left': '5px',
          color: color
        }
      " />
    </a-tooltip>
  </span>
</template>

<script lang="ts"  >
import { useI18n } from "vue-i18n";
import { reactive, ref, defineComponent } from "vue"
import {
  FullscreenExitOutlined,
  FullscreenOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  name: 'ltBaseTool',
  components: {

  },
  emits: ["change-lang", "lock-screen", "login-out"],
  props: {
    color: {
      type: String,
      default: "white"
    }
  },

  setup(props,{emit}) {

    const state = reactive({
      selectedKeys: ref<string[]>(["1"]),
      collapsed: ref<boolean>(false),
      fullscreenIcon: FullscreenOutlined,
      currentLanguage: "zh",
    });
    const { locale } = useI18n();
    const changeLang = (type: string) => {
      //切换本地显示语言，并且通知微服务更改显示语言
      locale.value = type;
      state.currentLanguage = type;
      emit("change-lang", type);
    };

    const toggleFullscreenIcon = () =>
    (state.fullscreenIcon =
      document.fullscreenElement !== null
        ? FullscreenExitOutlined
        : FullscreenOutlined);

    // 监听全屏切换事件
    document.addEventListener("fullscreenchange", toggleFullscreenIcon);

    // 全屏切换
    const toggleFullScreen = () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    };

    //锁屏
    const setLockScreen = () => {
      emit("lock-screen", true);
    };

    //退出登录
    const confirm = () => {
      emit("login-out", true);
    };
    return {
      state,
      changeLang,
      confirm,
      setLockScreen,
      toggleFullScreen,
      FullscreenExitOutlined
    };
  },
});



</script>

