<!--
  -
  - Copyright (c) 2025. Jeffery Hsu - Achievement Report Generator
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License as published by
  - the Free Software Foundation, either version 3 of the License, or
  - (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with this program. If not, see <https://www.gnu.org/licenses/>.
  -
  -->

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { emitter } from '@renderer/utils/mitt'
import { useRoute } from 'vue-router'
import { Close, Finished, FullScreen, Minus } from '@element-plus/icons-vue'
import icon from '@renderer/assets/icon.png'

const showTitleBar = ref(false)
const showSaveIcon = ref(false)
const route = useRoute()

const handleTitleBar = (ev: 'minimize' | 'maximize' | 'close') => {
  if (window.electron) window.electron.ipcRenderer.send('title_bar', ev)
}

emitter.on('titleBarShow', (e) => {
  if (!e.length) return
  if (e.includes('save')) showSaveIcon.value = true
})

onMounted(() => {
  if (window.electron) {
    showTitleBar.value = true
  }
})

watch(
  () => route.name,
  (newName) => {
    if (!newName?.toString().startsWith('panel')) {
      showSaveIcon.value = false
    }
  }
)
</script>

<template>
  <div class="flex h-screen flex-col overflow-hidden bg-transparent">
    <div
      v-if="showTitleBar"
      class="flex h-12 w-full justify-between overflow-hidden window-title flex-shrink-0 bg-white/75"
    >
      <div class="flex items-center pl-4">
        <!-- 图标 -->
        <img class="h-8" :src="icon" alt="" />
        <!-- 标题 -->
        <div class="pl-4 font-bold">达成情况评价报告生成工具</div>
      </div>
      <!-- 最小化、最大化、关闭 -->
      <div class="flex items-center justify-center function">
        <div
          v-show="showSaveIcon"
          class="flex h-full w-10 items-center justify-center fill-black transition-all hover:bg-gray-200"
          @click="handleTitleBar('minimize')"
        >
          <el-icon><Finished /></el-icon>
        </div>
        <div
          class="flex h-full w-10 items-center justify-center fill-black transition-all hover:bg-gray-200"
          @click="handleTitleBar('minimize')"
        >
          <el-icon><Minus /></el-icon>
        </div>
        <div
          class="flex h-full w-10 items-center justify-center fill-black transition-all hover:bg-gray-200"
          @click="handleTitleBar('maximize')"
        >
          <el-icon><FullScreen /></el-icon>
        </div>
        <div
          class="flex h-full w-10 items-center justify-center fill-black transition-all hover:bg-red-600 hover:fill-white"
          @click="handleTitleBar('close')"
        >
          <el-icon><Close /></el-icon>
        </div>
      </div>
    </div>
    <router-view class="grow overflow-hidden" />
  </div>
</template>

<style scoped>
.window-title {
  -webkit-app-region: drag;
}

.window-title .function {
  -webkit-app-region: no-drag;
}
</style>
