<!--
 * @Author: chris
 * @Date: 2025-08-26 09:47:33
 * @LastEditors: DESKTOP-P4Q6IC1\CHRIS_PC 510148846@qq.com
 * @LastEditTime: 2026-03-25 14:48:15
-->
<script setup>
import { ref, onMounted } from 'vue';
import { WarnTriangleFilled, SuccessFilled, Message, Timer, ArrowRightBold } from '@element-plus/icons-vue';
import { ElDialog } from 'element-plus';
import 'element-plus/es/components/dialog/style/css';

const props = defineProps({
  notifyData: { type: Array, required: true, default: () => [] }
})

// 警告类型图标映射
const warningIcons = {
  danger: WarnTriangleFilled,
  warning: SuccessFilled,
  info: Message
};

// 警告类型颜色映射
const warningColors = {
  danger: '#ff6b6b',
  warning: '#ffa502',
  info: '#54a0ff'
};

// 警告类型文本映射
const warningTypeLabels = {
  danger: '危险',
  warning: '警告',
  info: '信息'
};

// 统一的警告数据源 - 虫情监测设备
const warningData = ref([
  {
    id: '1',
    title: '虫情数量激增',
    content: '设备型号D-2001监测到蚜虫数量较昨日增加50%，达到48只，建议加强监测。',
    type: 'danger',
    time: '2025-09-02 14:30:25',
    isRead: false,
    device: 'D-2001'
  },
  {
    id: '2',
    title: '虫情监测异常',
    content: '设备型号P-3005未检测到数据，可能存在故障，请检查设备状态。',
    type: 'danger',
    time: '2025-09-02 13:15:40',
    isRead: false,
    device: 'P-3005'
  },
  {
    id: '3',
    title: '虫情数据异常',
    content: '设备型号S-1008数据出现波动，建议校准传感器。',
    type: 'warning',
    time: '2025-09-02 10:45:15',
    isRead: true,
    device: 'S-1008'
  },
  {
    id: '1',
    title: '虫情数量激增',
    content: '设备型号D-2001监测到蚜虫数量较昨日增加50%，达到48只，建议加强监测。',
    type: 'danger',
    time: '2025-09-02 14:30:25',
    isRead: false,
    device: 'D-2001'
  },
  {
    id: '2',
    title: '虫情监测异常',
    content: '设备型号P-3005未检测到数据，可能存在故障，请检查设备状态。',
    type: 'danger',
    time: '2025-09-02 13:15:40',
    isRead: false,
    device: 'P-3005'
  },
  {
    id: '3',
    title: '虫情数据异常',
    content: '设备型号S-1008数据出现波动，建议校准传感器。',
    type: 'warning',
    time: '2025-09-02 10:45:15',
    isRead: true,
    device: 'S-1008'
  },
  {
    id: '4',
    title: '新增害虫种类',
    content: '设备型号D-2002检测到新的害虫种类，已记录样本数据。',
    type: 'warning',
    time: '2025-09-02 09:30:00',
    isRead: true,
    device: 'D-2002'
  },
  {
    id: '5',
    title: '虫情数量预警',
    content: '设备型号P-3001监测到蛾类数量接近阈值，请注意防范。',
    type: 'warning',
    time: '2025-09-01 18:20:10',
    isRead: true,
    device: 'P-3001'
  },
  {
    id: '6',
    title: '设备离线警告',
    content: '虫情监测设备#M-4001离线超过15分钟，请检查设备状态。',
    type: 'danger',
    time: '2025-09-02 15:45:30',
    isRead: false,
    device: 'M-4001'
  },
  {
    id: '7',
    title: '数据异常波动',
    content: '设备型号S-1005湿度传感器数据出现异常波动，可能影响虫情监测准确性。',
    type: 'warning',
    time: '2025-09-02 14:10:55',
    isRead: false,
    device: 'S-1005'
  },
  {
    id: '8',
    title: '设备状态正常',
    content: '虫情监测设备#P-3003运行正常，数据传输稳定。',
    type: 'info',
    time: '2025-09-02 08:30:00',
    isRead: true,
    device: 'P-3003'
  },
  {
    id: '9',
    title: '设备维护提醒',
    content: '虫情监测设备#D-2003将在3天后达到维护周期。',
    type: 'info',
    time: '2025-09-02 08:00:00',
    isRead: true,
    device: 'D-2003'
  },
  {
    id: '10',
    title: '虫情数量正常',
    content: '设备型号S-1001监测区域内虫情数量在正常范围内。',
    type: 'info',
    time: '2025-09-01 12:00:00',
    isRead: true,
    device: 'S-1001'
  }
]);

// 选中的警告信息
const selectedWarning = ref(null);
// 警告列表容器引用
const warningListRef = ref(null);
// 详情弹窗可见性
const detailDialogVisible = ref(false);

// 打开警告详情弹窗
const openWarningDetail = (warning) => {
  selectedWarning.value = warning;
  detailDialogVisible.value = true;
};

// 滚动到新添加的警告
const scrollToNewWarning = () => {
  if (warningListRef.value) {
    warningListRef.value.scrollTop = 0;
  }
};

// 添加新警告到统一数据源
const addNewWarning = () => {
  const types = ['danger', 'warning', 'info'];
  const type = types[Math.floor(Math.random() * types.length)];
  const deviceModels = ['D-2001', 'D-2002', 'P-3001', 'P-3005', 'S-1001', 'S-1008', 'M-4001'];
  const device = deviceModels[Math.floor(Math.random() * deviceModels.length)];
  const newWarning = {
    id: Date.now().toString(),
    title: `新${warningTypeLabels[type]}信息`,
    content: '这是一条新的虫情监测警告信息，用于测试滚动显示功能。',
    type: type,
    time: new Date().toLocaleString('zh-CN'),
    isRead: false,
    device: device
  };
  
  warningData.value.unshift(newWarning);
  // 保持最多显示15条警告
  if (warningData.value.length > 15) {
    warningData.value.pop();
  }
  
  // 滚动到新警告
  setTimeout(() => {
    scrollToNewWarning();
  }, 100);
};

function formatContent(content) {
  const contentObj = JSON.parse(content)
  return `识别到虫害数量：${contentObj.insectTotal || 0}`
}

// 模拟新警告到达
onMounted(() => {
  // 每30秒模拟一条新警告（仅用于演示）
  // const interval = setInterval(addNewWarning, 30000);
  // return () => clearInterval(interval);
});
</script>

<template>
  <div class="warning-info">
    
    <!-- 警告列表，横向布局 -->
    <div ref="warningListRef" class="warning-grid">
      <div
        v-for="warning in props.notifyData"
        :key="warning.id"
        class="warning-item"
      >
        <!-- 简化的内容结构 -->
        <component :is="warningIcons['info']" class="warning-icon" :style="{ color: warningColors['info'] }" />
        <div class="warning-content">
          <div class="warning-header-row">
            <span class="warning-item-title truncate">{{ formatContent(warning.notifyContent) }}</span>
            <span class="warning-type-label" :style="{ backgroundColor: warningColors['info'] }">
              {{ warningTypeLabels['info'] }}
            </span>
          </div>
          <div class="warning-meta">
            <!-- <span class="warning-device truncate">设备: {{ warning.device }}</span> -->
            <span class="warning-time">{{ warning.createTime }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 警告详情弹窗 -->
    <ElDialog
      v-model="detailDialogVisible"
      title="警告详情"
      width="600px"
      :before-close="() => { detailDialogVisible = false; }"
      custom-class="warning-detail-dialog"
    >
      <div v-if="selectedWarning" class="dialog-content">
        <div class="dialog-title">{{ selectedWarning.title }}</div>
        <div class="dialog-subtitle">
          <span 
            class="dialog-type-badge"
            :style="{ backgroundColor: warningColors[selectedWarning.type] }"
          >
            {{ warningTypeLabels[selectedWarning.type] }}
          </span>
          <span class="dialog-device">设备: {{ selectedWarning.device }}</span>
          <span class="dialog-time">{{ selectedWarning.time }}</span>
        </div>
        
        <div class="dialog-text">{{ selectedWarning.content }}</div>
        
        <button class="view-more-btn">
          查看更多 <ArrowRightBold class="arrow-icon" />
        </button>
      </div>
    </ElDialog>
  </div>
</template>

<style lang="scss" scoped>
// 定义SCSS变量
$primary-color: #4dabf7;
$border-radius: 6px;
$transition: all 0.3s ease;

.warning-info {
  @apply h-full px-20px pb-20px overflow-hidden;
}

.title-container {
  @apply flex items-center gap-1.5 relative;
}

.title-icon {
  @apply text-primary w-4 h-4;
}

.main-title {
  @apply text-base font-bold text-white m-0;
}

// 警告网格布局 - 紧凑的横向排列
.warning-grid {
  @apply grid grid-cols-3 gap-1 flex-1 overflow-auto p-1 h-full;
  // 自定义滚动条
  &::-webkit-scrollbar {
    @apply w-1;
  }
  &::-webkit-scrollbar-track {
    @apply bg-[rgba(255,255,255,0.05)] rounded-full;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-[rgba(255,255,255,0.2)] rounded-full hover:bg-[rgba(255,255,255,0.3)] transition-colors;
  }
}

.warning-item {
  @apply p-1.5 rounded-lg border border-transparent cursor-pointer hover:border-[rgba(255,255,255,0.2)] transition-all duration-300 flex items-center gap-1.5;
  background: rgba(255, 255, 255, 0.08);
  min-height: 55px;
}

.warning-icon {
  @apply w-5 h-5 mt-0.5 flex-shrink-0;
}

// 简化的内容区域
.warning-content {
  @apply flex-1 min-w-0 flex flex-col justify-between;
}

.warning-header-row {
  @apply flex items-center gap-1.5 mb-1;
}

.warning-item-title {
  @apply text-white font-medium text-sm leading-tight flex-1;
}

.warning-type-label {
  @apply text-white text-xs font-medium px-1.5 py-0.5 rounded-full whitespace-nowrap;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warning-meta {
  @apply flex justify-between items-center text-xs text-[#a0a0a0];
}

.warning-device {
  @apply truncate;
}

.warning-time {
  @apply whitespace-nowrap;
}

// 警告详情弹窗样式
.warning-detail-dialog {
  .el-dialog__header {
    @apply bg-[rgba(26,26,46,0.95)] border-b border-[rgba(255,255,255,0.1)];
  }
  
  .el-dialog__title {
    @apply text-white font-bold;
  }
  
  .el-dialog__body {
    @apply bg-[rgba(26,26,46,0.95)] p-0;
  }
  
  .el-dialog__footer {
    @apply bg-[rgba(26,26,46,0.95)] border-t border-[rgba(255,255,255,0.1)];
  }
}

.dialog-content {
  @apply p-4;
}

.dialog-title {
  @apply text-lg font-bold text-white mb-2;
}

.dialog-subtitle {
  @apply flex flex-wrap items-center gap-2 text-sm mb-3;
}

.dialog-type-badge {
  @apply text-white text-xs font-medium px-2 py-0.5 rounded-full;
}

.dialog-device {
  @apply text-[#a0a0a0];
}

.dialog-time {
  @apply text-[#a0a0a0];
}

.dialog-text {
  @apply text-white mb-3;
}

.view-more-btn {
  @apply flex items-center gap-1 text-primary bg-transparent border border-primary px-3 py-1.5 rounded-lg hover:bg-primary hover:text-white transition-colors text-sm mt-2;
}

.arrow-icon {
  @apply w-3 h-3;
}
</style>
