<template>
  <teleport v-if="showTeleport" to="#global-header-title-bar-right" defer>
    <button class="operating-button" @click="cutUiStyleClick">
      <el-icon color="#666666" :size="18"><fluent-picture-in-picture-exit24-filled></fluent-picture-in-picture-exit24-filled></el-icon>
    </button>
  </teleport>
</template>

<script setup lang="ts">
  // import FluentPictureInPictureEnter24Filled from '~icons/fluent/picture-in-picture-enter-24-filled';
  import FluentPictureInPictureExit24Filled from '~icons/fluent/picture-in-picture-exit-24-filled';
  const viewStore = useViewStore();
  const windowStyle = computed(() => viewStore.windowStyle);

  /** 是否显示传送门（防止传送门过早初始化） */
  const showTeleport = ref(false);
  onMounted(() => {
    viewStore.setWindowStyle('mini');
    nextTick(() => {
      setTimeout(() => {
        showTeleport.value = true;
      }, 100);
    });
  });

  onUnmounted(() => {
    viewStore.setWindowStyle('normal');
  });

  /**
   * 切换ui风格
   */
  function cutUiStyleClick() {
    viewStore.setWindowStyle(windowStyle.value === 'mini' ? 'normal' : 'mini');
  }
</script>

<style lang="scss" scoped>
  .operating-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    cursor: pointer;
    background-color: var(--button-bg);
    border-radius: 50%;
    transition: all 0.2s ease;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
    }
  }
</style>
