<template>
  <div class="title layout1" data-testid="warn-title-container">
    <span class="warn-title">{{ title }}：</span>
    <span class="jump-icon" @click="toDetail">>></span>
  </div>
  <div class="content" data-testid="warn-content-container">
    <div class="item" v-for="item in listInfo" :key="item" data-testid="warn-item">
      <span class="msg-icon"></span>
      {{ item }}
    </div>
  </div>
</template>
<script setup>
const emit = defineEmits(["jumpPage"]);
const props = defineProps({
  listInfo: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: "告警",
  },
});
const toDetail = () => {
  emit("jumpPage");
};
</script>
<style scoped lang="scss">
.title {
  height: 20px;
  .warn-title {
    font-weight: bold;
    color: var(--warning);
  }
  .jump-icon {
    font-weight: bold;
    color: #909399;
    cursor: pointer;
    &:hover {
      color: #fff;
    }
  }
}
.content {
  width: 100%;
  height: calc(15vh - 30px);
  padding: 10px 0px 10px 30px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  .item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    padding: 4px 0px 4px 2px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px,
      rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
    font-size: 14px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    .msg-icon {
      display: inline-block;
      width: 15px;
      height: 15px;
      background-color: var(--danger);
      border-radius: 50%;
      margin-right: 6px;
    }
  }
}

.content::-webkit-scrollbar {
  width: 0px;
  background-color: rgba(58, 63, 69, 0.5);
}

.layout1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>