<template>
  <div class="alarm-notification-container" v-show="visible">
    <!-- 标签页头部 -->
    <div class="detail-tabs">
      <div class="tab-header">
        <div class="tab-list">
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'all' }" 
            @click="activeTab = 'all'"
          >
            全部
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'car' }" 
            @click="activeTab = 'car'"
          >
            车辆冲突
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'report' }" 
            @click="activeTab = 'report'"
          >
            越界告警
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'speed' }" 
            @click="activeTab = 'speed'"
          >
            超速告警
          </div>
        </div>
        <div class="tab-actions">
        
          <div class="close-btn" @click="handleClose">
            <i class="close-icon">×</i>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 报警列表 -->
    <div class="alarm-list">
      <div class="alarm-item" v-for="(item, index) in filteredAlarms" :key="index">
        <div class="alarm-icon1" :class="item.level">
          <img v-if="item.type === 'car'" src="@/assets/images/clarm_conflict.png" class="alarm-img" alt="车辆冲突" />
          <img v-else-if="item.type === 'report'" src="@/assets/images/clarm_over.png" class="alarm-img" alt="越界告警" />
          <img v-else-if="item.type === 'speed'" src="@/assets/images/speed.png" class="alarm-img" alt="超速告警" />
          <i v-else class="alarm-dot"></i>
        </div>
        <div class="alarm-content">
          <div class="alarm-title">
            {{ item.carId }} ({{ item.carType }}) {{ item.time }} {{ item.description }}
          </div>
          <div class="alarm-time">{{ item.date }}</div>
        </div>
      </div>
      <div v-if="filteredAlarms.length === 0" class="empty-data">
        暂无告警数据
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 当前激活的标签页
const activeTab = ref('all');

// 控制组件显示/隐藏
const visible = ref(true);

// 告警数据列表
const alarmList = ref([]);

// 根据当前选中的标签页过滤告警数据
const filteredAlarms = computed(() => {
  if (activeTab.value === 'all') {
    return alarmList.value;
  }
  return alarmList.value.filter(item => item.type === activeTab.value);
});

// 处理关闭按钮点击事件
function handleClose() {
  visible.value = false;
  emit('close');
}

// 定义emit
const emit = defineEmits(['close']);

// 暴露方法，允许父组件更新数据和控制显示/隐藏
defineExpose({
  // 更新告警列表
  updateAlarmList(newList) {
    if (newList && Array.isArray(newList)) {
      alarmList.value = newList;
    }
  },
  
  // 显示组件
  show() {
    visible.value = true;
  },
  
  // 隐藏组件
  hide() {
    visible.value = false;
  },
  
  // 切换显示/隐藏状态
  toggle() {
    visible.value = !visible.value;
  },
  
  // 获取当前显示状态
  isVisible() {
    return visible.value;
  }
});
</script>

<style lang="scss" scoped>
.alarm-notification-container {
  position: absolute;
  left:70px;
  top: 15%;
  width: 400px;
  background-color: rgba(41, 44, 56, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: #fff;
  z-index: 1000;
  overflow: hidden;
}

.detail-tabs {
  width: 100%;
}

.tab-header { 
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: #1E2233; */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0 10px;
  height: 34px;
  position: relative;
  border-bottom: 1px solid #3A4452;
}

.tab-list {
  display: flex;
  height: 100%;
  flex: 1;
}

.tab-actions {
  display: flex;
  align-items: center;
}

.add-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #A0A8B7;
  margin-right: 10px;
  transition: all 0.3s;
}

.add-btn:hover {
  color: #fff;
}

.tab-item {
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #A0A8B7;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  white-space: nowrap;
}

.tab-item.active {
  color: #fff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #347AE2;
}

.close-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}

/* .close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
} */

.close-icon {
  font-size: 20px;
  color: #A0A8B7;
  font-style: normal;
}

.alarm-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
}

.alarm-item {
  display: flex;
  padding: 12px 15px;
  border-bottom: 1px solid #3A4452;
}

.alarm-icon1 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alarm-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* .alarm-icon.high {
  background-color: rgba(255, 77, 79, 0.2);
}

.alarm-icon.medium {
  background-color: rgba(255, 153, 0, 0.2);
} */

.alarm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.alarm-icon.high .alarm-dot {
  background-color: #FF4D4F;
}

.alarm-icon.medium .alarm-dot {
  background-color: #FF9900;
}

.alarm-content {
  flex: 1;
}

.alarm-title {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.alarm-time {
  font-size: 12px;
  color: #8C959F;
  text-align: right;
}

.empty-data {
  padding: 30px 0;
  text-align: center;
  color: #8C959F;
  font-size: 14px;
}

/* 滚动条样式 */
.alarm-list::-webkit-scrollbar {
  width: 5px;
}

.alarm-list::-webkit-scrollbar-track {
  background: rgba(19, 26, 36, 0.5);
}

.alarm-list::-webkit-scrollbar-thumb {
  background: rgba(78, 113, 143, 0.5);
  border-radius: 3px;
}

.alarm-list::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 113, 143, 0.8);
}
</style>