<template>
  <section class="panel">
    <div class="panel-header">
      <div>
        <p class="eyebrow">异常中心</p>
        <h3>需要管理员快速处理的事项</h3>
      </div>
      <span class="panel-tag">实时优先级</span>
    </div>

    <div class="alert-list">
      <article
        v-for="alert in alerts"
        :key="`${alert.level}-${alert.title}`"
        class="alert-item"
        :class="`alert-${alert.level}`"
        :title="alert.description"
      >
        <div class="alert-top">
          <strong>{{ alert.title }}</strong>
          <span>{{ alert.owner }}</span>
        </div>
        <div class="alert-footer">
          <span>建议动作</span>
          <strong>{{ alert.action }}</strong>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup>
defineProps({
  alerts: {
    type: Array,
    required: true
  }
});
</script>
