<template>
  <div class="team-alerts">
    <h2>团队异常预警</h2>
    <div class="alert-list">
      <div 
        v-for="alert in aggregatedAlerts" 
        :key="alert.id"
        class="alert-item"
        :class="alert.type"
      >
        <span class="alert-icon">{{ alert.icon }}</span>
        <span>{{ alert.message }}</span>
      </div>
      <div v-if="aggregatedAlerts.length === 0" class="alert-item info">
        <span class="alert-icon">ℹ</span>
        <span>暂无异常预警</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义props
const props = defineProps({
  abnormalData: {
    type: Object,
    default: () => ({})
  }
})

// 处理团队异常数据
const aggregatedAlerts = computed(() => {
  const data = props.abnormalData
  
  if (!data || !data.processedAlerts || !Array.isArray(data.processedAlerts)) {
    return []
  }
  
  return data.processedAlerts
})
</script>

<style lang="scss" scoped>
// Team Alerts
.team-alerts {
  // min-height: 350px;
  // max-height: 400px;
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
  }
  
  .alert-list {
    display: flex;
    flex-direction: column;
    max-height: 270px;
    overflow-y: auto;
    
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
      
      &:hover {
        background: #94a3b8;
      }
    }
  }
  .alert-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    
    &.warning {
      background: #fef3c7;
      color: #92400e;
      
      .alert-icon {
        color: #f59e0b;
      }
    }
    
    &.danger {
      background: #fee2e2;
      color: #991b1b;
      
      .alert-icon {
        color: #ef4444;
      }
    }
    
    &.info {
      background: #dbeafe;
      color: #1e40af;
      
      .alert-icon {
        color: #3b82f6;
      }
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .team-alerts {
    padding: 1rem;
    
    h2 {
      font-size: 1.1rem;
    }
    
    .alert-item {
       padding: 0.5rem;
       font-size: 0.8rem;
       flex-direction: row;
       align-items: center;
       gap: 0.5rem;
       
       .alert-icon {
         font-size: 1.2rem;
         flex-shrink: 0;
       }
     }
  }
}

@media (max-width: 480px) {
  .team-alerts {
    padding: 0.75rem;
    border-radius: 8px;
  }
}
</style>