<template>
  <div class="policy-list">
    <div v-for="item in props.policyList" :key="item.id" class="policy-item">
      <el-image :src="$withFallbackImage(item.imageUrl, item.content) " class="item-cover" fit="cover"/>
      <div class="item-details">
        <h3 class="item-title">{{ item.name }}</h3>
        <div class="item-content"> {{ item.times }} · {{ item.content }} <el-icon><Link /></el-icon></div>
        <div class="item-tags">
          <el-tag v-for="tag in item.tags" :key="tag" class="custom-tag">{{ tag }}</el-tag>
        </div>
        
        <div 
          v-if="item.relatedBill" 
          class="related-bill-box"
          :class="`status-bg-${item.status}`"
        >
          <span>{{ item.relatedBill.text }}</span>
          <div class="status-badge" :class="`status-color-${item.status}`">
            <span class="badge-dot"></span>
            {{ getStatusInfo(item.status).text }}
          </div>
        </div>

        <div v-else class="related-bill-box status-bg-unimplemented">
           <span>不存在相关提案。</span>
           <div class="status-badge status-color-unimplemented">
            <span class="badge-dot"></span>
            {{ item.status }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Link } from '@element-plus/icons-vue'

const props = defineProps({
  policyList: {
    type: Array,
    default: () => []
  }
})

// --- Status Styling Helper ---
const getStatusInfo = (status) => {
  switch (status) {
    case 'implemented':
      return { text: '已实施', color: '#e66657', bgColor: '#fdeeed' };
    case 'partial':
      return { text: '部分实施', color: '#d38f24', bgColor: '#fcf3e4' };
    case 'unimplemented':
      return { text: '未实施', color: '#409eff', bgColor: '#ecf5ff' };
    default:
      return { text: '未知', color: '#909399', bgColor: '#f4f4f5' };
  }
};

</script>

<style scoped>
/* --- Policy List Styles --- */
.policy-list {
  display: flex;
  flex-direction: column;
}

.policy-item {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #e4e7ed;
}

.policy-item:last-child {
  border-bottom: none;
}

.item-cover {
  width: 80px;
  height: 80px;
  margin-right: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.item-details {
  flex-grow: 1;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px;
  cursor: pointer;
  line-height: 1.4;
}

.item-title:hover {
  color: #409eff;
}

.item-content {
  color: #909399;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.item-tags {
  margin-bottom: 12px;
}

.custom-tag {
  margin-right: 8px;
  background-color: #f0f2f5;
  color: #606266;
  border-color: #e4e7ed;
  font-size: 12px;
}

.related-bill-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.status-badge {
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 500;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  margin-right: 6px;
}

/* Dynamic status colors */
.status-bg-implemented { 
  background-color: #fdeeed; 
}

.status-color-implemented { 
  color: #e66657; 
}

.status-bg-partial { 
  background-color: #fcf3e4; 
}

.status-color-partial { 
  color: #d38f24; 
}

.status-bg-unimplemented { 
  background-color: #ecf5ff; 
}

.status-color-unimplemented { 
  color: #409eff; 
}

/* 响应式设计 */
@media (max-width: 768px) {
  .policy-item {
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
  }
  
  .item-cover {
    width: 100%;
    height: 120px;
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .item-title {
    font-size: 15px;
  }
  
  .related-bill-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }
  
  .status-badge {
    align-self: flex-end;
  }
}
</style>
