<template>
  <div class="dialog-content " >
    <!-- 顶部标题栏 -->
     <!-- {{ errorDetailItems[5].value  === 'Ⅰ级' }} -->
    <div class="dialog-header" >
      <div class="header-icon">
        <div class="alert-triangle">
          <img src="@/assets/images/right2/err_Ⅰ.png" alt="告警图标" style="width: 40px; height: 40px;">
        </div>
      </div>
      <div class="header-title">QV天线</div>
      <button class="close-btn" @click="handleClose">×</button>
    </div>
    
    <!-- 告警详情列表 -->
    <div class="alert-details">
      <div class="detail-item" v-for="item in errorDetailItems" :key="item.label">
        <span class="detail-label">{{ item.label }}</span>
        <!-- 新增value-wrapper容器 -->
        <div class="value-wrapper">
          <span class="detail-value " 
            :class="{
              'alert-level_1':item.value ==='Ⅰ级',
              'alert-level_2':item.value ==='Ⅱ级',
              'alert-level_3':item.value ==='Ⅲ级',
              'alert-level_4':item.value ==='Ⅳ级',
              'alert-status_1':item.value ==='活动',
              'alert-status_0':item.value ==='自动清除',
              'alert-status_2':item.value ==='手工清除',
            }">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onBeforeMount } from 'vue';

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  },
  errorDetailItems: {
    type: Array,
    default: () => []
  }
});
const OpposeAlertDataStatusMap = ref({
  "手工清除":'2',
  "活动":'1',
  "自动清除":'0',
})

// 定义事件
const emit = defineEmits(['handleIsErrorDataCloseFn']);

// 关闭弹窗
const handleClose = () => {
  emit('handleIsErrorDataCloseFn');
};

</script>

<style scoped>
/* 弹窗内容容器 */
.dialog-content {
  position: fixed; /* 改为fixed定位 */
  top: 65vh;
  right: 400px;
  background: #1a1a1a;
  border-radius: 4px;
  z-index: 1001;
  overflow: hidden;

   
   border-top: 2px solid;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, rgba(54, 27, 27, 0.93) 0%, rgba(255, 2, 2, 0.93) 50%, rgba(54, 27, 27, 0.93)) 1;
  
  /* background-color: #eea929; */
  width: 250px;
  height: 330px;
}

.alert-status_2 {

 color: #28D86E !important;
 background:none;
}
.alert-status_1 {
 color: red !important;
 background:none;
}
.alert-status_0 {
  color: green !important;
  background:none;
}
.Unprocessed{
  box-shadow: inset 0 -20px 70px -25px rgba(255, 2, 2, 0.93);
}
.processed{
  box-shadow: inset 0 -20px 70px -25px rgba(0, 255, 0, 0.93);
}
/* 弹窗头部 */
.dialog-header {
  display: flex;
  align-items: center;
  padding: 4px 15px;
  background-image: url('@/assets/images/right2/err_header_bg.png');
  background-size: cover;
  color: white;
}

.header-icon {
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.alert-triangle {
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.header-title {
  flex: 1;
  font-size: 16px;
  padding-left: 10px;
  font-weight: bold;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 0 5px;
}

/* 告警详情列表 */
.alert-details {
  padding: 5px 0;
  background: rgba(10, 14, 23, 0.6);
  /* border-radius: 8px; */
  /* height: 35vh; */
  height: 320px;
  overflow-y: auto;
  width: 100%;
  padding-bottom: 30px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-size: 11px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
}

.detail-label {
  color: #c5c5c5;
  text-align: right;
  flex: 0.51;
  padding-right: 15px;
  word-break: break-word;
}

/* 新增的value-wrapper样式 */
.value-wrapper {
  flex: 0.96;
  display: flex;
  justify-content: flex-start;
}

.detail-value {
  color: #ffffff;
  text-align: left;
  /* font-family: 'Consolas', monospace; */
  word-break: break-all;
}

/* 告警级别样式 - 独立于flex布局 */
[class*="alert-level_"] {
  /* display: inline-block !important; */
  width: 28px !important;
  color: #ffffff !important;
  height: 16px !important;
  border-radius: 2px !important;
  padding-left: 2px  !important;
  /* margin: 0 5px 0 0 !important; */
  /* text-indent: -9999px; 隐藏文本内容 */
  /* overflow: hidden; */
  position: relative;
}

/* 恢复状态文本的显示 */
[class*="alert-status_"] {
  display: inline !important;
  width: auto !important;
  
  
}

.alert-level_1 {
    /* padding-top: 10px; */
  background-color: #ed323e;
}
.alert-level_2 {
  background-color: #eea929;
}
.alert-level_3 {
  background-color: #3270ed;
}
.alert-level_4 {
  background-color: #17a0e0;
}

.alert-status_0 {
  color: red;
}
.alert-status_1 {
  color: green;
}

/* 最后一项移除下边框 */
.detail-item:last-child {
  border-bottom: none;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #535353, #535353);
  border-radius: 2px;
}
</style>