<script setup lang="ts">
import { onMounted } from 'vue'

const emit = defineEmits(['search', 'save', 'delete', 'excel'])

onMounted(() => {
  window.addEventListener('keydown', (e: KeyboardEvent) => {
    switch (e.key) {
      case 'F3':
        e.preventDefault()
        emit('search')
        break
      case 'F4':
        e.preventDefault()
        emit('save')
        break
      case 'F5':
        e.preventDefault()
        emit('delete')
        break
      case 'F7':
        e.preventDefault()
        emit('excel')
        break
    }
  })
})
</script>

<template>
  <header class="douzone-header-toolbar">
    <div style="display: flex; align-items: center; gap: 12px;">
      <span style="font-weight: bold; font-size: 16px; color: #F1C40F;">QuantEngine Vue 3 SPA</span>
      <span style="border-left: 1px solid #5D7D9A; padding-left: 12px; opacity: 0.8;">더존 회계시스템 기준 6대 컴포넌트</span>
    </div>
    <div style="display: flex; align-items: center;">
      <button type="button" class="btn-douzone-action" @click="emit('search')"><span class="hotkey-badge">F3</span>조회</button>
      <button type="button" class="btn-douzone-action" @click="emit('save')"><span class="hotkey-badge">F4</span>저장</button>
      <button type="button" class="btn-douzone-action" @click="emit('delete')"><span class="hotkey-badge">F5</span>삭제</button>
      <button type="button" class="btn-douzone-action" @click="emit('excel')"><span class="hotkey-badge">F7</span>엑셀</button>
      <router-link to="/login" class="btn-douzone-action" style="background-color: #E74C3C; text-decoration: none; margin-left: 12px;">로그아웃</router-link>
    </div>
  </header>
</template>
