<template>
  <header class="topbar">
    <div>
      <div class="eyebrow">Global finance operations</div>
      <h1>{{ currentView.title }}</h1>
      <p>{{ currentView.desc }}</p>
    </div>
    <div class="top-actions">
      <label class="search">
        <span v-html="searchIcon"></span>
        <input :value="search" type="search" placeholder="搜索申请人、单号、费用类型" @input="emit('update:search', $event.target.value)" />
      </label>
      <button class="btn" type="button" @click="emit('batchApprove')">
        <span v-html="checkIcon"></span>
        批量通过
      </button>
      <button class="btn primary" type="button" @click="emit('openChat')">
        <span v-html="messageIcon"></span>
        合规对话
      </button>
    </div>
  </header>
</template>

<script setup>
import { icons } from '../../data/icons.js'

defineProps({
  currentView: { type: Object, required: true },
  search: { type: String, default: '' }
})

const emit = defineEmits(['update:search', 'batchApprove', 'openChat'])

const searchIcon = icons.search
const checkIcon = icons.check
const messageIcon = icons.message
</script>

<style scoped>
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
}
.topbar p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.search { position: relative; min-width: 300px; }
.search span { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
.search span svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: var(--radius); }
</style>
