<template>
  <div class="header-toolbar">
    <div class="toolbar-buttons">
      <a-button size="large" @click="handleAutoAnnotate" :disabled="!currentImageId">
        <template #icon><icon-robot /></template>
        自动标注
      </a-button>
      <a-button size="large" @click="handleManualAnnotate" :disabled="!currentImageId">
        <template #icon><icon-edit /></template>
        手动标注
      </a-button>
      <a-button size="large" @click="handleGenerateReport">
        <template #icon><icon-file-image /></template>
        生成检测报告
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { 
  IconPlayArrow,
  IconRobot,
  IconEdit,
  IconFileImage
} from '@arco-design/web-vue/es/icon'

defineProps<{
  currentImageId: string
}>()

const emit = defineEmits<{
  start: []
  autoAnnotate: []
  manualAnnotate: []
  generateReport: []
}>()

const handleStart = () => {
  emit('start')
}



const handleAutoAnnotate = () => {
  emit('autoAnnotate')
}

const handleManualAnnotate = () => {
  emit('manualAnnotate')
}

const handleGenerateReport = () => {
  emit('generateReport')
}
</script>

<style scoped lang="scss">
.header-toolbar {
  background: #1e3a8a;
  padding: 12px 20px;
  border-bottom: 1px solid #1e40af;

  .toolbar-buttons {
    display: flex;
    gap: 12px;
    align-items: center;

    .arco-btn {
      font-weight: 500;
      border-radius: 6px;
      
      &.arco-btn-primary {
        background: #3b82f6;
        border-color: #3b82f6;
        
        &:hover {
          background: #2563eb;
          border-color: #2563eb;
        }
      }

      &:not(.arco-btn-primary) {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: white;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }
}
</style> 