<template>
  <div class="app-head-bar-container">
    <div
      class="global-move-windows title-bar"
      :style="{ height: `${props.height}px` }"
      @mousedown="handleMouseDown"
      @touchstart="handleTouchStart"
      @dblclick="toggleMximize"
    >
      <div v-auto-animate class="global-move-windows title-bar-left">
        <el-space :size="10">
          <!-- 用户菜单 -->
          <menu-user v-if="!isLoginPage"></menu-user>
          <!-- 帮助菜单 -->
          <menu-help></menu-help>
          <!-- 刷新 -->
          <el-button :icon="LucideRefreshCw" link color="#333333" plain @click="reload"> 刷新 </el-button>
          <!-- 时间 -->
          <page-show-time style="margin-top: 3px"></page-show-time>
        </el-space>
      </div>
      <div class="global-move-windows" style="display: flex; flex: 1; align-items: center; justify-content: center; font-size: 16px; font-weight: bold">
        {{ title }}
      </div>
      <div class="global-move-windows title-bar-right">
        <!-- 用于传送门 -->
        <div id="global-header-title-bar-right"></div>
        <button class="operating-button" @click="togglePin">
          <el-icon :color="isPin ? '#295ef2' : '#666666'" :size="18"><solar-pin-bold></solar-pin-bold></el-icon>
        </button>
        <button v-if="showBackButton" class="back-button operating-button" @click="back">
          <el-icon color="#fff"><lucide-chevron-left></lucide-chevron-left></el-icon>
        </button>
        <button class="minimum-button operating-button" @click="minimizeCurrentWindow">
          <el-icon color="#fff" :size="14"><lucide-minus></lucide-minus></el-icon>
        </button>
        <button class="expand-button operating-button" @click="toggleMximize">
          <el-icon color="#fff" :size="14">
            <lucide-minimize-2 v-if="isMaximize"></lucide-minimize-2>
            <lucide-move-diagonal v-else></lucide-move-diagonal>
          </el-icon>
        </button>
        <button class="close-button operating-button" @click="closeCurrentWindow">
          <el-icon color="#fff" :size="14"><lucide-x></lucide-x></el-icon>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import MenuHelp from './aa-components/menu-help.vue';
  import MenuUser from './aa-components/menu-user.vue';
  import LucideRefreshCw from '~icons/lucide/refresh-cw';
  import LucideChevronLeft from '~icons/lucide/chevron-left';
  import LucideMoveDiagonal from '~icons/lucide/move-diagonal';
  import LucideMinimize2 from '~icons/lucide/minimize-2';
  import LucideMinus from '~icons/lucide/minus';
  import LucideX from '~icons/lucide/x';
  import SolarPinBold from '~icons/solar/pin-bold';
  import { vAutoAnimate } from '@formkit/auto-animate';
  import { computed } from 'vue';
  import { type ViewStore, useViewStore } from '@/pinia/modules/view';
  import { useRouter } from 'vue-router';
  import { handleMouseDown, handleTouchStart } from '@/utils/tauri/windows-move';
  import { closeCurrentWindow, minimizeCurrentWindow } from '@/utils/tauri/windows-action';
  import PageShowTime from '@/components/page/page-show-time/page-show-time.vue';

  const props = defineProps({
    /** 高度 */
    height: { type: Number, required: true },
  });
  const viewStore: ViewStore = useViewStore();
  const route = useRoute();
  const router = useRouter();
  /** 是否最大化 */
  const isMaximize = computed(() => viewStore.isMaximize);
  const isPin = computed(() => viewStore.isPin);
  /** 是否登录页面 */
  const isLoginPage = computed(() => route.path === '/login');
  const title = computed(() => (route.path !== '/login' ? route.meta.title : ''));
  const showBackButton = computed(() => {
    // 首页和登录页不显示返回按钮，同时也要判断是否有上一页
    return route.path !== '/login' && route.path !== '/select-classroom-type' && window.history.state.back !== null;
  });

  /** 返回 */
  function back() {
    // 使用Vue Router的返回功能
    router.go(-1);
  }

  /**
   * 展开窗口
   */
  function toggleMximize() {
    viewStore.toggleMximize();
  }

  /**
   * 锁定窗口
   */
  function togglePin() {
    viewStore.togglePin();
  }

  /**
   * 重新加载页面
   */
  function reload() {
    window.location.reload();
  }
</script>

<style scoped lang="scss">
  .title-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    padding: 0;
    overflow: hidden;

    .title-bar-left,
    .title-bar-right {
      display: flex;
      flex: 1;
      align-items: center;
      height: 100%;
    }

    .title-bar-left {
      display: flex;
      justify-content: flex-start;
      width: auto;
      margin-left: 15px;

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }

      .title {
        flex-grow: 1;
        margin-top: -2px;
        margin-right: 20px;
        overflow: hidden;
        font-size: 13px;
        font-weight: bold;
        color: #3668f2;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .title-bar-right {
      display: flex;
      justify-content: flex-end;
      width: 150px;
      margin-left: auto;
    }

    .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;

      &.close-button {
        --button-bg: #f56057;
      }

      &.minimum-button {
        --button-bg: #fec428;
      }

      &.expand-button {
        --button-bg: #1fd42a;
      }

      &.back-button {
        --button-bg: #7c7c7c;
      }

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