<template>
  <div class="bill-card">
    <div class="bill-card-inner">
      <div class="bill-card-preview">
        <DocumentPreview :bill-number="bill.billId" :bill-serial="bill.name" />
      </div>

      <div class="bill-card-detail">
        <div class="bill-card-upper">
          <div class="bill-card-title-row">
            <h3 class="bill-card-title">{{ bill.name }}</h3>
          </div>

          <p class="bill-card-desc">{{ bill.ename }}</p>
        </div>

        <div class="bill-card-divider" />

        <div class="bill-card-meta">
          <div class="meta-row">
            <span class="meta-label">提案人：</span>
            <span class="meta-value sponsor-name" :title="allSponsorNames">
              {{ firstSponsorName }}
            </span>
          </div>
          <div class="meta-row">
            <span class="meta-label">相关领域：</span>
            <div class="meta-tags"> 
                <AreaTag v-for="item in bill.industryList" :key="item.industryName"  :tagName="item.industryName" />
            </div>
          </div>
          <div class="meta-row">
            <span class="meta-label">最新动议：</span>
            <span class="meta-value">{{ latestActionText }}</span>
          </div>
          <div class="meta-row meta-row-progress">
            <ProgressBar :stages="stageNames" :current="currentStageIndex" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import DocumentPreview from './DocumentPreview.vue' 
import ProgressBar from './ProgressBar.vue'

const props = defineProps({
  bill: { type: Object, required: true },
  progressStages: { type: Array, default: () => [] },
})

// 提案人：只展示第一个，悬浮 title 显示全部
const firstSponsorName = computed(() => {
  if (!props.bill.sponsorList || props.bill.sponsorList.length === 0) return ''
  return props.bill.sponsorList[0] || ''
})
const allSponsorNames = computed(() => {
  if (!props.bill.sponsorList || props.bill.sponsorList.length === 0) return ''
  return props.bill.sponsorList.filter(Boolean).join('\n')
})

// 最新动议：null 替换为至今
const latestActionText = computed(() => {
  if (!props.bill.latestAction) return ''
  // 将 "null" 字符串替换为 "至今"
  return props.bill.latestAction.replace(/\bnull\b/gi, '至今').trim()
})

// 法案进展：stageList 是对象数组 [{id, name}]，提取 name 列表
const stageNames = computed(() => {
  if (!props.progressStages || props.progressStages.length === 0) return []
  // progressStages 是全量阶段字典 [{id, name}]，提取 name
  return props.progressStages.map(s => s.name || s)
})

// 当前阶段：找到 stageList 最后一个阶段在全量字典中的位置
const currentStageIndex = computed(() => {
  if (!props.bill.stageList || props.bill.stageList.length === 0) return 0
  if (!props.progressStages || props.progressStages.length === 0) return 0
  // stageList 是已走过的阶段对象数组，取最后一个
  const lastStage = props.bill.stageList[props.bill.stageList.length - 1]
  const lastStageName = lastStage?.name || lastStage
  const idx = props.progressStages.findIndex(s => (s.name || s) === lastStageName)
  return idx > -1 ? idx : 0
})
</script>

<style scoped>
.bill-card {
  width: 1224px;
  max-width: 100%;
  height: 320px;
  background: #fff;
  border: 1px solid rgba(234, 236, 238, 1);
  border-radius: 10px;
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  box-sizing: border-box;
  padding: 12px 16px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.bill-card:hover {
  box-shadow: 0px 0px 24px 0px rgba(25, 69, 130, 0.16);
}

.bill-card-inner {
  display: flex;
  flex-direction: row;
  gap: 13px;
  align-items: center;
  height: 100%;
}

.bill-card-preview {
  flex-shrink: 0;
  width: 240px;
  height: 296px;
}

.bill-card-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  height: 100%;
}

.bill-card-upper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bill-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.bill-card-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(59, 65, 75, 1);
  margin: 0;
  line-height: 26px;
  flex: 1;
  min-width: 0;
}

.bill-card-desc {
  font-size: 16px;
  font-weight: 400;
  color: rgba(59, 65, 75, 1);
  margin: 0;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bill-card-divider {
  width: 100%;
  height: 1px;
  background: rgba(234, 236, 238, 1);
  flex-shrink: 0;
}

.bill-card-meta {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.meta-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
}

.meta-row:nth-child(1) { }
.meta-row:nth-child(2) { }
.meta-row:nth-child(3) { }
.meta-row:nth-child(4) { }
.meta-row:nth-child(5) { }

.meta-label {
  font-size: 16px;
  font-weight: 700;
  color: rgba(59, 65, 75, 1);
  letter-spacing: 1px;
  line-height: 24px;
  white-space: nowrap;
  flex-shrink: 0;
  width: 100px;
}

.meta-value {
  font-size: 16px;
  font-weight: 400;
  color: rgba(95, 101, 108, 1);
  line-height: 24px;
  flex: 1;
  min-width: 0;
}

.sponsor-name {
  cursor: default;
  white-space: nowrap;
}

.meta-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.meta-row-progress {
  width: 100%;
}
.meta-row-progress :deep(.progress-bar) {
  width: 100%;
}

.meta-progress {
  flex: 1;
  min-width: 0;
}
</style>
