<template>
  <header class="page-header">
    <div class="header-content">
      <div class="header-left">
        <div class="text-title-2-bold">科技法案立法进展预测</div>
        <div class="text-tip-2 text-primary-65-clor" v-if="props.proposalInfo">{{ props.proposalInfo.title+"("+ props.proposalInfo.date+")" }}</div>
      </div>
      <div class="header-actions">
        <button class="action-btn">
          <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
            <line x1="16" y1="13" x2="8" y2="13" />
            <line x1="16" y1="17" x2="8" y2="17" />
            <polyline points="10 9 9 9 8 9" />
          </svg>
          <span>选择法案</span>
        </button>
        <button class="action-btn">
          <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
            <polyline points="7 10 12 15 17 10" />
            <line x1="12" y1="15" x2="12" y2="3" />
          </svg>
          <span>导出分析结果</span>
        </button>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import type { ProposalInfo } from '../api'
const props = defineProps<{
  proposalInfo?: ProposalInfo | null
  defaultFilters?: Record<string, string[]>
}>()
</script>

<style scoped>
.page-header {
  width: 2548px;
  height: 80px;
 /* margin-left: 160px; */
  box-sizing: border-box;
  display: flex;
  align-items: center;
      margin-left: -478px;
    padding-left: 478px;
        background: #ffffff;
        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
        margin-bottom: 16px;
        margin-left: 0px;
}

.header-content {
  width: 1600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--bg-black-10);
  border-radius: 5px;
  background-color: var(--bg-white-100);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary-65-color);
  cursor: pointer;
  transition: background-color 0.2s;
   
}

.action-btn:hover {
  background-color: var(--bg-black-2);
}

.action-icon {
  width: 20px;
  height: 20px;
  color: var(--text-primary-65-color);
}
</style>
