<template>
  <div class="bill-list"> 
    <div v-if="loading" class="bill-list-loading">
      <div v-for="i in 3" :key="i" class="bill-list-skeleton">
        <div class="skeleton-left" />
        <div class="skeleton-right">
          <div class="skeleton-line w30" />
          <div class="skeleton-line w50" />
          <div class="skeleton-divider" />
          <div class="skeleton-line w60" />
          <div class="skeleton-line w40" />
        </div>
      </div>
    </div>
 
    <div v-else-if="bills.length === 0" class="bill-list-empty">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
      </svg>
      <p>暂无相关法案</p>
    </div>
 
    <template v-else>
      <BillCard
        v-for="bill in bills"
        :key="bill.id"
        :bill="bill"
        :progress-stages="progressStages"
      />
 
      <div v-if="total > 0" class="bill-pagination">
        <span class="bill-pagination-total">{{ '\u5171' + total + '\u9879\u6cd5\u6848' }}</span>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          :pager-count="5"
          layout="prev, pager, next"
          background
          @current-change="$emit('page-change', $event)"
        />
      </div>
    </template>
  </div>
</template>

<script setup>
import BillCard from './BillCard.vue'

defineProps({
  bills: { type: Array, required: true },
  loading: { type: Boolean, default: false },
  total: { type: Number, default: 0 },
  currentPage: { type: Number, default: 1 },
  pageSize: { type: Number, default: 10 },
  progressStages: { type: Array, default: () => ['提出', '众议院通过', '参议院通过', '分歧协调', '提交总统', '法案通过'] },
})
defineEmits(['page-change'])
</script>

<style scoped>
.bill-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bill-list-loading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bill-list-skeleton {
  display: flex;
  gap: 24px;
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 8px;
  padding: 24px;
}
.skeleton-left {
  width: 120px;
  height: 190px;
  background: #f0f0f0;
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}
.skeleton-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-line {
  height: 16px;
  background: #f0f0f0;
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}
.skeleton-line.w30 { width: 30%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w50 { width: 50%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-divider {
  height: 1px;
  background: #ebedf0;
}
.bill-list-empty {
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 8px;
  padding: 48px;
  text-align: center;
  color: #bfbfbf;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Pagination */
.bill-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0;
}
.bill-pagination-total {
  font-size: 14px;
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  color: rgba(95, 101, 108, 1);
  white-space: nowrap;
}

/* Override el-pagination to match design */
.bill-pagination :deep(.el-pagination) {
  --el-pagination-bg-color: #fff;
  --el-pagination-hover-color: rgba(5, 95, 194, 1);
  padding: 0;
}
.bill-pagination :deep(.el-pagination.is-background .btn-prev),
.bill-pagination :deep(.el-pagination.is-background .btn-next),
.bill-pagination :deep(.el-pagination.is-background .el-pager li) {
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  border: 1px solid rgba(234, 236, 238, 1);
  background: #fff;
  color: rgba(59, 65, 75, 1);
  font-size: 14px;
  font-family: 'Microsoft YaHei', sans-serif;
  margin: 0 3px;
}
.bill-pagination :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background: #fff;
  color: rgba(5, 95, 194, 1);
  border-color: rgba(5, 95, 194, 1);
}
.bill-pagination :deep(.el-pagination.is-background .el-pager li:not(.is-disabled):hover) {
  color: rgba(5, 95, 194, 1);
}
.bill-pagination :deep(.el-pagination.is-background .btn-prev:hover),
.bill-pagination :deep(.el-pagination.is-background .btn-next:hover) {
  color: rgba(5, 95, 194, 1);
}
</style>
