<template>
  <div class="tool-bar-ri">
    <div class="header-icon">
      <RefreshPage v-if="functions?.includes('refresh')" id="refreshPage" @goto-refresh="refresh" />
      <AutoLock v-if="functions?.includes('autoLock')" />
      <AssemblySize v-if="functions?.includes('assemblySize')" id="assemblySize" @goto-refresh="refresh" />
      <Language v-if="functions?.includes('language')" id="language" />
      <!-- <SearchMenu id="searchMenu" /> -->
      <ThemeSetting v-if="functions?.includes('themeSetting')" id="themeSetting" />
      <!-- <Message id="message" /> -->
      <Fullscreen v-if="functions?.includes('fullscreen')" id="fullscreen" />
    </div>
    <Avatar v-if="functions?.includes('avatar')" id="avatar" />
  </div>
</template>

<script setup lang="ts">
import AssemblySize from "./components/AssemblySize.vue";
import Language from "./components/Language.vue";
import SearchMenu from "./components/SearchMenu.vue";
import ThemeSetting from "./components/ThemeSetting.vue";
import Message from "./components/Message.vue";
import Fullscreen from "./components/Fullscreen.vue";
import Avatar from "./components/Avatar.vue";
import RefreshPage from "./components/RefreshPage.vue";
import AutoLock from "./components/AutoLock.vue";

interface ToolBarRightProp {
  functions?: string[];
}
const props = withDefaults(defineProps<ToolBarRightProp>(), {
  functions: () => ["refresh", "autoLock", "assemblySize", "language", "themeSetting", "fullscreen", "avatar"]
});

const emit = defineEmits(["gotoRefresh"]);

const refresh = () => emit("gotoRefresh");
</script>

<style scoped lang="scss">
.tool-bar-ri {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 25px;
  padding-left: 13px;
  padding-top: 8px;
  padding-bottom: 8px;
  box-sizing: border-box;
  .header-icon {
    display: flex;
    align-items: center;
    height: 100%;
    & > * {
      // margin-left: 21px;
      // padding-left: 10px;
      // padding-right: 10px;
      height: 100%;
      // align-items: center;
    }
  }
}
</style>
