<template>
  <section class="proposal-section">
    <div class="section-header">
      <div class="header-left">
        <svg class="section-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>
        <h2 class="section-title text-title-3-bold">当前提案信息</h2>
      </div>
      <div class="header-actions">
        <button class="action-btn" title="对比">
         <img src="../assets/source.svg"/>
        </button>
        <button class="action-btn" title="下载">
           <img src="../assets/down.svg"/>
        </button>
        <button class="action-btn" title="收藏">
          <img src="../assets/collection.svg"/>
        </button>
      </div>
    </div>
    <div class="divider" />
    <div class="info-grid">
      <div
        v-for="field in infoFields"
        :key="field.key"
        class="info-item"
      >
        <span class="info-label text-body-1">{{ field.label }}</span>
        <template v-if="field.key === 'areas'">
          <div class="area-tags">
             <AreaTag  v-for="area in info.areas" :key="area" :tagName="area" />
          </div>
          
        </template>
        <template v-else>
          <span class="info-value text-body-1">{{ info[field.key as keyof typeof info] }}</span>
        </template>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import type { ProposalInfo } from '../api'

defineProps<{
  info: ProposalInfo
}>()

// 信息字段配置 - 只保留：提案标题、提案时间、涉及领域、提案人、共同提案人、政府结构类型
const infoFields = [
  { key: 'title', label: '提案标题：' },
  { key: 'date', label: '提案时间：' },
  { key: 'areas', label: '涉及领域：' },
  { key: 'proposer', label: '提案人：' },
  { key: 'coProposers', label: '共同提案人：' },
  { key: 'governmentType', label: '政府结构类型：' }
]
</script>

<style scoped>
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-icon {
  width: 16px;
  height: 16px;
  color: var(--text-primary-80-color);
}

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

.action-btn {
  width: 28px;
  height: 28px;
  padding: 4px;
  border: none;
  border-radius: 50px;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn svg {
  width: 20px;
  height: 20px;
  color: var(--text-primary-50-color);
}

.action-btn:hover svg {
  color: var(--color-primary-100);
}

.divider {
  height: 1px;
  background-color: var(--border-black-5);
  margin-bottom: 24px;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 24px;
  padding-left: 30px;
}

.info-item {
  width: 580px;
  display: flex;
  align-items: center;
}

.info-label {
  width: 150px;
  flex-shrink: 0;
  color: var(--text-primary-65-color);
}

.info-value {
  color: var(--text-primary-80-color);
}

.area-tags {
  display: flex;
  gap: 8px;
}

.area-tag {
  padding: 1px 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-primary-100);
  background-color: var(--color-primary-10);
  border: 1px solid var(--color-primary-10);
  border-radius: var(--radius-4);
}
</style>
