<template>
  <div class="dashboard-container">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">
          <span class="gradient-text">IBMS智能建筑管理系统</span>
        </h1>
        <p class="welcome-subtitle">集成化、智能化、可视化的建筑管理解决方案</p>
        <div class="version-info">
          <el-tag type="primary" effect="dark" @click="showVersionInfo">
            <i class="el-icon-price-tag"></i> v{{ version }}
          </el-tag>
          <el-tag type="success" effect="plain" @click="showSystemStatus">
            <i class="el-icon-circle-check"></i> 运行正常
          </el-tag>
        </div>
      </div>
      <div class="welcome-illustration">
        <!-- SVG 图形保持不变 -->
        <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" style="stop-color:#667eea;stop-opacity:0.8" />
              <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.8" />
            </linearGradient>
          </defs>
          <!-- 建筑轮廓 -->
          <rect x="50" y="100" width="80" height="150" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="2" rx="5"/>
          <rect x="150" y="50" width="100" height="200" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="2" rx="5"/>
          <rect x="270" y="120" width="80" height="130" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="2" rx="5"/>

          <!-- 窗户 -->
          <rect x="60" y="110" width="20" height="20" fill="rgba(255,255,255,0.5)" />
          <rect x="90" y="110" width="20" height="20" fill="rgba(255,255,255,0.5)" />
          <rect x="60" y="140" width="20" height="20" fill="rgba(255,255,255,0.5)" />
          <rect x="90" y="140" width="20" height="20" fill="rgba(255,255,255,0.5)" />

          <!-- 连接线 -->
          <path d="M 90 250 Q 200 280 310 250" stroke="white" stroke-width="2" fill="none" stroke-dasharray="5,5" opacity="0.5"/>
          <circle cx="200" cy="265" r="5" fill="white" opacity="0.8"/>

          <!-- 图标 -->
          <text x="200" y="40" text-anchor="middle" fill="white" font-size="24" font-weight="bold">IBMS</text>
        </svg>
      </div>
    </div>

    <!-- 快速统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :md="6" v-for="(stat, index) in statistics" :key="index">
        <div class="stat-card" :style="{ background: stat.color }" @click="handleStatClick(stat)">
          <div class="stat-icon">
            <component :is="stat.iconComponent" />
          </div>
          <div class="stat-content">
            <div class="stat-value">
              <span class="count-up">{{ stat.value }}</span>
            </div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
          <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
            <el-icon>
              <ArrowUp v-if="stat.trend > 0" />
              <ArrowDown v-else />
            </el-icon>
            {{ Math.abs(stat.trend) }}%
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 系统功能模块 -->
      <el-col :xs="24" :lg="16">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <h3>
                <el-icon><Menu /></el-icon>
                系统功能模块
              </h3>
              <el-button type="text" @click="viewAllModules">
                查看全部
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </template>
          <el-row :gutter="15">
            <el-col :xs="12" :sm="8" :md="6" v-for="(module, index) in systemModules" :key="index">
              <div class="module-item" @click="handleModuleClick(module)">
                <div class="module-icon" :style="{ background: module.color }">
                  <component :is="module.iconComponent" />
                </div>
                <div class="module-name">{{ module.name }}</div>
                <div class="module-desc">{{ module.desc }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 实时监控数据 -->
        <!-- 实时监控数据 -->
        <el-card class="monitor-card">
          <template #header>
            <div class="card-header">
              <h3>
                <el-icon><DataLine /></el-icon>
                实时监控数据
              </h3>
              <el-button-group>
                <el-button size="small" :type="chartType === 'line' ? 'primary' : ''" @click="switchChart('line')">
                  折线图
                </el-button>
                <el-button size="small" :type="chartType === 'bar' ? 'primary' : ''" @click="switchChart('bar')">
                  柱状图
                </el-button>
              </el-button-group>
            </div>
          </template>
          <div class="chart-container" @click="viewDetailChart">
            <!-- 模拟图表 -->
            <div class="mock-chart">
              <div class="chart-bars" v-if="chartType === 'bar'">
                <div
                    v-for="(bar, index) in mockChartData"
                    :key="index"
                    class="bar"
                    :style="{ height: bar + '%', animationDelay: index * 0.1 + 's' }"
                    @click.stop="showDataDetail(index, bar)"
                >
                  <span class="bar-value">{{ bar }}%</span>
                </div>
              </div>
              <div class="chart-lines" v-else>
                <!-- 简单的折线图模拟 -->
                <svg width="100%" height="100%" :viewBox="`0 0 ${chartWidth} ${chartHeight}`" preserveAspectRatio="none">
                  <!-- 网格线 -->
                  <g class="grid">
                    <!-- 水平网格线 -->
                    <line v-for="i in 5" :key="'h-' + i"
                          :x1="0"
                          :y1="(chartHeight / 5) * i"
                          :x2="chartWidth"
                          :y2="(chartHeight / 5) * i"
                          stroke="#e0e0e0"
                          stroke-width="1" />
                    <!-- 垂直网格线 -->
                    <line v-for="(label, index) in chartLabels" :key="'v-' + index"
                          :x1="getXPosition(index)"
                          :y1="0"
                          :x2="getXPosition(index)"
                          :y2="chartHeight"
                          stroke="#e0e0e0"
                          stroke-width="1" />
                  </g>

                  <!-- 折线 -->
                  <polyline
                      :points="linePoints"
                      fill="none"
                      stroke="#409EFF"
                      stroke-width="3"
                      stroke-linejoin="round"
                      stroke-linecap="round"
                  />

                  <!-- 数据点 -->
                  <g>
                    <circle
                        v-for="(point, index) in linePointsArray"
                        :key="index"
                        :cx="point.x"
                        :cy="point.y"
                        r="5"
                        fill="#409EFF"
                        stroke="white"
                        stroke-width="2"
                        @click.stop="showDataDetail(index, mockChartData[index])"
                        style="cursor: pointer;"
                        class="data-point"
                    >
                      <title>{{ chartLabels[index] }}: {{ mockChartData[index] }}%</title>
                    </circle>
                  </g>

                  <!-- 数值标签 -->
                  <g>
                    <text
                        v-for="(point, index) in linePointsArray"
                        :key="'text-' + index"
                        :x="point.x"
                        :y="point.y - 10"
                        text-anchor="middle"
                        font-size="12"
                        fill="#606266"
                        class="value-label"
                    >
                      {{ mockChartData[index] }}%
                    </text>
                  </g>
                </svg>
              </div>
              <div class="chart-labels">
                <span v-for="(label, index) in chartLabels" :key="index" @click="showLabelDetail(label)">{{ label }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧信息栏 -->
      <el-col :xs="24" :lg="8">
        <!-- 技术栈 -->
        <el-card class="tech-card">
          <template #header>
            <div class="card-header">
              <h3>
                <el-icon><Cpu /></el-icon>
                技术架构
              </h3>
            </div>
          </template>
          <el-tabs v-model="activeTech" class="tech-tabs">
            <el-tab-pane label="后端技术" name="backend">
              <div class="tech-list">
                <div class="tech-item" v-for="(tech, index) in backendTech" :key="index" @click="showTechDetail(tech)">
                  <el-tag :type="tech.type" effect="plain">{{ tech.name }}</el-tag>
                  <span class="tech-version">{{ tech.version }}</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="前端技术" name="frontend">
              <div class="tech-list">
                <div class="tech-item" v-for="(tech, index) in frontendTech" :key="index" @click="showTechDetail(tech)">
                  <el-tag :type="tech.type" effect="plain">{{ tech.name }}</el-tag>
                  <span class="tech-version">{{ tech.version }}</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>

        <!-- 系统公告 -->
        <el-card class="notice-card">
          <template #header>
            <div class="card-header">
              <h3>
                <el-icon><Bell /></el-icon>
                系统公告
<!--                <el-badge v-if="unreadCount > 0" :value="unreadCount" :max="99" class="notice-badge" />-->
              </h3>
              <el-link type="primary" @click="viewAllNotices">更多</el-link>
            </div>
          </template>
          <el-skeleton :loading="noticeLoading" animated :count="3">
            <template #template>
              <el-skeleton-item variant="h3" style="width: 50%; margin-bottom: 10px;" />
              <el-skeleton-item variant="text" style="margin-bottom: 5px;" />
              <el-skeleton-item variant="text" style="width: 80%; margin-bottom: 20px;" />
            </template>
            <template #default>
              <el-timeline v-if="notices.length > 0">
                <el-timeline-item
                    v-for="(notice, index) in notices"
                    :key="notice.notice_id"
                    :timestamp="parseTime(notice.create_time)"
                    :type="getNoticeTimelineType(notice.notice_type)"
                    placement="top">
                  <div class="notice-content"><!-- @click="viewNoticeDetail(notice)-->
                    <h4>
                      {{ notice.notice_title }}
<!--                      <el-tag v-if="!notice.is_read" type="danger" size="small" effect="plain">未读</el-tag>-->
                    </h4>
                    <p>{{ getNoticePreview(notice.notice_content) }}</p>
                    <div class="notice-meta">
                    <span class="notice-type">
                      <dict-tag :options="sys_notice_type" :value="notice.notice_type" />
                    </span>
                      <span class="notice-author">{{ notice.create_by }}</span>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
              <el-empty v-else description="暂无公告" />
            </template>
          </el-skeleton>
        </el-card>

        <!-- 快捷操作 -->
        <el-card class="quick-action-card">
          <template #header>
            <div class="card-header">
              <h3>
                <el-icon><Lightning /></el-icon>
                快捷操作
              </h3>
            </div>
          </template>
          <div class="quick-actions">
            <el-button
                v-for="(action, index) in quickActions"
                :key="index"
                :type="action.type"
                @click="handleQuickAction(action)">
              <el-icon>
                <component :is="action.iconComponent" />
              </el-icon>
              {{ action.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Dashboard">
import {
  Monitor,
  Connection,
  Lightning,
  Warning,
  Menu,
  ArrowRight,
  DataLine,
  Cpu,
  Bell,
  ArrowUp,
  ArrowDown,
  VideoCamera,
  Search,
  Document,
  Setting,
  Download,
  PartlyCloudy
} from '@element-plus/icons-vue';
// 导入必要的API和工具
import { ref, reactive, onMounted, onUnmounted, shallowRef, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { getNotice, show as markNoticeAsRead } from "@/api/system/notice";
import {listNoticeRead} from "@/api/system/menu";
import { connectToWebSocket } from "@/layout/components/websocket";

// 获取字典数据
const { proxy } = getCurrentInstance();
const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");

const router = useRouter();
const version = ref('3.8.9');
const activeTech = ref('backend');
const chartType = ref('bar');

// 系统公告相关的响应式数据
const notices = ref([]);
const noticeLoading = ref(false);
const unreadCount = ref(0);
const noticeDialogVisible = ref(false);
const currentNotice = ref({});

// WebSocket连接
let wsConnection = null;

// 查询参数
const noticeQueryParams = ref({
  pageNum: 1,
  pageSize: 5,  // Dashboard只显示最新5条
  orderByColumn: 'create_time',
  isAsc: 'desc'
});

// 获取公告列表
const getNoticeList = async () => {
  noticeLoading.value = true;
  try {
    const response = await listNoticeRead(noticeQueryParams.value);
    if (response.code === 200) {
      // 获取前5条公告
      notices.value = response.data.slice(0, 3);
      // 计算未读数量
      unreadCount.value = response.data.filter(item => !item.is_read).length;
    }
  } catch (error) {
    console.error('获取公告列表失败:', error);
    ElMessage.error('获取公告列表失败');
  } finally {
    noticeLoading.value = false;
  }
};

// 获取公告预览内容（去除HTML标签，限制长度）
const getNoticePreview = (content) => {
  if (!content) return '';
  // 去除HTML标签
  const text = content.replace(/<[^>]*>/g, '');
  // 限制长度
  return text.length > 50 ? text.substring(0, 50) + '...' : text;
};

// 根据公告类型返回时间线类型
const getNoticeTimelineType = (noticeType) => {
  const typeMap = {
    '1': 'primary',   // 通知
    '2': 'success',   // 公告
    '3': 'warning',   // 提醒
    '4': 'danger'     // 紧急
  };
  return typeMap[noticeType] || 'info';
};

// 查看公告详情
/*const viewNoticeDetail = async (notice) => {
  try {
    const response = await getNotice(notice.notice_id);
    if (response.code === 200) {
      currentNotice.value = response.data;

      ElMessageBox.alert(
          `<div style="text-align: left;">
          <p><strong>公告标题：</strong>${response.data.noticeTitle}</p>
          <p><strong>公告类型：</strong>${getNoticeTypeLabel(response.data.noticeType)}</p>
          <p><strong>发布人：</strong>${response.data.createBy}</p>
          <p><strong>发布时间：</strong>${response.data.createTime}</p>
          <p><strong>公告内容：</strong></p>
          <div style="margin-top: 10px; padding: 10px; background: #f5f7fa; border-radius: 4px;">
            ${response.data.noticeContent}
          </div>
        </div>`,
          '公告详情',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '已读',
            customClass: 'notice-detail-dialog',
            beforeClose: async (action, instance, done) => {
              if (action === 'confirm' && !notice.is_read) {
                await markAsRead(notice.notice_id);
              }
              done();
            }
          }
      );
    }
  } catch (error) {
    console.error('获取公告详情失败:', error);
    ElMessage.error('获取公告详情失败');
  }
};*/

// 标记为已读
const markAsRead = async (noticeId) => {
  try {
    const response = await markNoticeAsRead({ noticeId });
    if (response.code === 200) {
      // 刷新公告列表
      await getNoticeList();
      ElMessage.success('已标记为已读');
    }
  } catch (error) {
    console.error('标记已读失败:', error);
  }
};

// 获取公告类型标签
const getNoticeTypeLabel = (type) => {
  const dict = sys_notice_type.value.find(item => item.value === type);
  return dict ? dict.label : type;
};

// 查看所有公告
const viewAllNotices = () => {
  router.push('/system/notice');
};

// WebSocket消息处理
// const handleWebSocketMessage = (message) => {
//   if (message && message !== "del" && message !== "update") {
//     ElNotification({
//       title: '新公告',
//       message: '您有新的公告，请注意查收',
//       type: 'warning',
//       duration: 5000,
//       position: 'top-right',
//       onClick: () => {
//         getNoticeList();
//       }
//     });
//   }
//   // 刷新公告列表
//   getNoticeList();
// };

// 其他原有的方法保持不变...

onMounted(() => {
  // 初始化时显示欢迎信息
  ElMessage.success('欢迎使用IBMS智能建筑管理系统！');

  // 获取公告列表
  getNoticeList();

  // 连接WebSocket
  //wsConnection = connectToWebSocket(handleWebSocketMessage);

  // 其他原有的初始化代码...
});

// onUnmounted(() => {
//   // 清理WebSocket连接
//   if (wsConnection) {
//     // 根据实际的WebSocket实现进行清理
//   }
// });

// 图表尺寸
const chartWidth = ref(600);
const chartHeight = ref(250);

// 获取X轴位置
const getXPosition = (index) => {
  const padding = 40;
  const step = (chartWidth.value - 2 * padding) / (chartLabels.length - 1);
  return padding + index * step;
};

// 计算折线图点位
const linePoints = computed(() => {
  const padding = 40;
  const xStep = (chartWidth.value - 2 * padding) / (mockChartData.value.length - 1);
  const yRange = chartHeight.value - 2 * padding;

  return mockChartData.value.map((value, index) => {
    const x = padding + index * xStep;
    const y = chartHeight.value - padding - (value / 100) * yRange;
    return `${x},${y}`;
  }).join(' ');
});

const linePointsArray = computed(() => {
  const padding = 40;
  const xStep = (chartWidth.value - 2 * padding) / (mockChartData.value.length - 1);
  const yRange = chartHeight.value - 2 * padding;

  return mockChartData.value.map((value, index) => ({
    x: padding + index * xStep,
    y: chartHeight.value - padding - (value / 100) * yRange
  }));
});

// 模拟图表数据
const mockChartData = ref([65, 78, 90, 70, 85, 60, 75]);
const chartLabels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

// 统计数据
const statistics = reactive([
  {
    label: '设备总数',
    value: '1,234',
    iconComponent: shallowRef(Monitor),
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    trend: 12.5,
    path: '/device/list'
  },
  {
    label: '在线设备',
    value: '1,180',
    iconComponent: shallowRef(Connection),
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    trend: 8.3,
    path: '/device/online'
  },
  {
    label: '今日能耗',
    value: '2,845',
    iconComponent: shallowRef(Lightning),
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    trend: -5.2,
    path: '/energy/today'
  },
  {
    label: '告警数量',
    value: '12',
    iconComponent: shallowRef(Warning),
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    trend: -15.8,
    path: '/alarm/list'
  }
]);

// 系统模块
const systemModules = reactive([
  {
    name: '能源管理',
    desc: '能耗监控分析',
    iconComponent: shallowRef(Lightning),
    color: '#409EFF',
    path: '/energy'
  },
  {
    name: '设备监控',
    desc: '设备状态管理',
    iconComponent: shallowRef(Monitor),
    color: '#67C23A',
    path: '/device'
  },
  {
    name: '环境监测',
    desc: '环境参数监控',
    iconComponent: shallowRef(PartlyCloudy),
    color: '#E6A23C',
    path: '/environment'
  },
  {
    name: '安防系统',
    desc: '安全防护管理',
    iconComponent: shallowRef(VideoCamera),
    color: '#F56C6C',
    path: '/security'
  },
  {
    name: '照明控制',
    desc: '智能照明管理',
    iconComponent: shallowRef(Lightning),
    color: '#909399',
    path: '/lighting'
  },
  {
    name: '报警管理',
    desc: '告警处理中心',
    iconComponent: shallowRef(Bell),
    color: '#E6A23C',
    path: '/alarm'
  }
]);

// 技术栈数据
const backendTech = reactive([
  { name: 'Spring Boot', version: '2.7.x', type: 'primary', desc: '基础框架' },
  { name: 'Spring Security', version: '5.7.x', type: 'success', desc: '安全框架' },
  { name: 'JWT', version: '0.11.x', type: 'info', desc: '认证方案' },
  { name: 'MyBatis Plus', version: '3.5.x', type: 'warning', desc: 'ORM框架' },
  { name: 'Redis', version: '6.2.x', type: 'danger', desc: '缓存中间件' },
  { name: 'MySQL', version: '8.0.x', type: 'primary', desc: '关系型数据库' },
  { name: 'RabbitMQ', version: '3.9.x', type: 'success', desc: '消息队列' }
]);

const frontendTech = reactive([
  { name: 'Vue 3', version: '3.3.x', type: 'primary', desc: '前端框架' },
  { name: 'Vite', version: '4.4.x', type: 'success', desc: '构建工具' },
  { name: 'Element Plus', version: '2.3.x', type: 'info', desc: 'UI组件库' },
  { name: 'Pinia', version: '2.1.x', type: 'warning', desc: '状态管理' },
  { name: 'Axios', version: '1.4.x', type: 'danger', desc: 'HTTP客户端' },
  { name: 'ECharts', version: '5.4.x', type: 'primary', desc: '图表库' },
  { name: 'TypeScript', version: '5.1.x', type: 'success', desc: '类型系统' }
]);


// 快捷操作
const quickActions = reactive([
  {
    name: '设备巡检',
    iconComponent: shallowRef(Search),
    type: 'primary',
    action: 'inspection'
  },
  {
    name: '生成报表',
    iconComponent: shallowRef(Document),
    type: 'success',
    action: 'report'
  },
  {
    name: '系统设置',
    iconComponent: shallowRef(Setting),
    type: 'info',
    action: 'settings'
  },
  {
    name: '数据备份',
    iconComponent: shallowRef(Download),
    type: 'warning',
    action: 'backup'
  }
]);

// 显示版本信息
const showVersionInfo = () => {
  ElMessageBox.alert(
      `<div style="text-align: left;">
      <p><strong>当前版本：</strong>v${version.value}</p>
      <p><strong>发布日期：</strong>2024-01-15</p>
      <p><strong>更新内容：</strong></p>
      <ul style="margin-left: 20px;">
        <li>优化系统性能</li>
        <li>新增能源分析报表</li>
        <li>修复已知问题</li>
      </ul>
    </div>`,
      '版本信息',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定'
      }
  );
};

// 显示系统状态
const showSystemStatus = () => {
  ElMessageBox.alert(
      `<div style="text-align: left;">
      <p><strong>系统状态：</strong><span style="color: #67C23A;">运行正常</span></p>
      <p><strong>运行时长：</strong>15天 8小时 32分钟</p>
      <p><strong>CPU使用率：</strong>35%</p>
      <p><strong>内存使用率：</strong>62%</p>
      <p><strong>磁盘使用率：</strong>48%</p>
    </div>`,
      '系统状态',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定'
      }
  );
};

// 处理统计卡片点击
const handleStatClick = (stat) => {
  ElMessage.info(`正在查看${stat.label}详情...`);
  // 实际项目中这里应该跳转到对应页面
  // router.push(stat.path);
};

// 查看所有模块
const viewAllModules = () => {
  ElMessage.success('正在加载所有系统模块...');
  // router.push('/modules');
};

// 处理模块点击
const handleModuleClick = (module) => {
  ElMessage.success(`正在进入${module.name}模块`);
  // 实际项目中这里应该跳转到对应页面
  // router.push(module.path);
};

// 切换图表类型
const switchChart = (type) => {
  chartType.value = type;
  ElMessage.success(`已切换为${type === 'line' ? '折线图' : '柱状图'}`);
  // 这里可以重新加载图表数据
  refreshChartData();
};

// 刷新图表数据
const refreshChartData = () => {
  // 模拟数据刷新
  mockChartData.value = mockChartData.value.map(() =>
      Math.floor(Math.random() * 40) + 60
  );
};

// 查看详细图表
const viewDetailChart = () => {
  ElMessage.info('正在打开详细数据分析页面...');
  // router.push('/analysis/chart');
};

// 显示数据详情
const showDataDetail = (index, value) => {
  ElMessageBox.alert(
      `<div style="text-align: left;">
      <p><strong>日期：</strong>${chartLabels[index]}</p>
      <p><strong>数值：</strong>${value}%</p>
      <p><strong>环比：</strong>${index > 0 ? ((value - mockChartData.value[index - 1]) > 0 ? '+' : '') + (value - mockChartData.value[index - 1]).toFixed(1) + '%' : '无'}</p>
      <p><strong>状态：</strong>${value > 80 ? '<span style="color: #F56C6C;">偏高</span>' : value > 60 ? '<span style="color: #E6A23C;">正常</span>' : '<span style="color: #67C23A;">偏低</span>'}</p>
    </div>`,
      '数据详情',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定'
      }
  );
};

// 显示标签详情
const showLabelDetail = (label) => {
  ElMessage.info(`查看${label}的详细数据`);
};

// 显示技术详情
const showTechDetail = (tech) => {
  ElMessageBox.alert(
      `<div style="text-align: left;">
      <p><strong>技术名称：</strong>${tech.name}</p>
      <p><strong>当前版本：</strong>${tech.version}</p>
      <p><strong>功能描述：</strong>${tech.desc}</p>
      <p><strong>官方网站：</strong><a href="#" style="color: #409EFF;">查看官网</a></p>
    </div>`,
      '技术详情',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定'
      }
  );
};

// 处理快捷操作
const handleQuickAction = (action) => {
  switch (action.action) {
    case 'inspection':
      ElMessageBox.confirm('是否立即开始设备巡检？', '设备巡检', {
        confirmButtonText: '开始巡检',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        ElMessage.success('设备巡检已开始，预计需要5分钟');
        // 这里可以调用巡检API
      }).catch(() => {
        ElMessage.info('已取消设备巡检');
      });
      break;

    case 'report':
      ElMessageBox.prompt('请选择报表类型', '生成报表', {
        confirmButtonText: '生成',
        cancelButtonText: '取消',
        inputPattern: /^(日报|周报|月报)$/,
        inputPlaceholder: '请输入：日报、周报或月报',
        inputErrorMessage: '请输入正确的报表类型'
      }).then(({ value }) => {
        ElMessage.success(`正在生成${value}，请稍候...`);
        // 模拟生成报表
        setTimeout(() => {
          ElMessage.success(`${value}生成成功，已保存到系统`);
        }, 2000);
      }).catch(() => {
        ElMessage.info('已取消生成报表');
      });
      break;

    case 'settings':
      ElMessage.info('正在打开系统设置...');
      // router.push('/settings');
      break;

    case 'backup':
      ElMessageBox.confirm('确定要备份系统数据吗？', '数据备份', {
        confirmButtonText: '确定备份',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessage.success('数据备份已开始，请勿关闭页面');
        // 模拟备份进度
        let progress = 0;
        const timer = setInterval(() => {
          progress += 20;
          if (progress >= 100) {
            clearInterval(timer);
            ElMessage.success('数据备份完成！');
          } else {
            ElMessage.info(`备份进度：${progress}%`);
          }
        }, 1000);
      }).catch(() => {
        ElMessage.info('已取消数据备份');
      });
      break;
  }
};

// 数字动画效果
const animateValue = (obj, start, end, duration) => {
  let startTimestamp = null;
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp;
    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
    obj.value = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
};

onMounted(() => {
  // 初始化时显示欢迎信息
  /*ElMessage.success('欢迎使用IBMS智能建筑管理系统！');*/

  // 模拟数据更新
  setInterval(() => {
    // 随机更新一些数据
    const randomIndex = Math.floor(Math.random() * mockChartData.value.length);
    mockChartData.value[randomIndex] = Math.floor(Math.random() * 40) + 60;
  }, 5000);
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 84px);

  // 欢迎区域
  .welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      animation: pulse 4s ease-in-out infinite;
    }

    .welcome-content {
      flex: 1;
      position: relative;
      z-index: 1;

      .welcome-title {
        font-size: 36px;
        margin-bottom: 10px;
        font-weight: 600;

        .gradient-text {
          background: linear-gradient(to right, #fff, #f0f0f0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .welcome-subtitle {
        font-size: 18px;
        opacity: 0.9;
        margin-bottom: 20px;
      }

      .version-info {
        .el-tag {
          margin-right: 10px;
        }
      }
    }

    .welcome-illustration {
      width: 400px;
      height: 300px;
      position: relative;
      z-index: 1;

      svg {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
      }
    }
  }

  // 统计卡片
  .stat-cards {
    margin-bottom: 30px;

    .stat-card {
      border-radius: 12px;
      padding: 25px;
      color: white;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      cursor: pointer;
      height: 140px;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);

        .stat-icon {
          transform: scale(1.1) rotate(5deg);
        }
      }

      &::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
      }

      .stat-icon {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 48px;
        opacity: 0.3;
        transition: all 0.3s ease;
      }

      .stat-content {
        position: relative;
        z-index: 1;

        .stat-value {
          font-size: 32px;
          font-weight: 600;
          margin-bottom: 5px;

          .count-up {
            display: inline-block;
          }
        }

        .stat-label {
          font-size: 16px;
          opacity: 0.9;
        }
      }

      .stat-trend {
        position: absolute;
        bottom: 20px;
        right: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(255,255,255,0.2);
        padding: 4px 8px;
        border-radius: 4px;

        &.up {
          color: #67C23A;
        }

        &.down {
          color: #F56C6C;
        }

        .el-icon {
          font-size: 16px;
        }
      }
    }
  }

  // 主要内容区域
  .main-content {
    // 通用卡片样式
    .el-card {
      border-radius: 12px;
      border: none;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          display: flex;
          align-items: center;
          gap: 8px;

          .el-icon {
            color: #409EFF;
          }
        }
      }
    }

    // 功能模块卡片
    .feature-card {
      .module-item {
        text-align: center;
        padding: 20px 10px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 15px;

        &:hover {
          background: #f5f7fa;
          transform: translateY(-3px);

          .module-icon {
            transform: scale(1.1);
          }
        }

        .module-icon {
          width: 60px;
          height: 60px;
          margin: 0 auto 12px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          color: white;
          font-size: 28px;
        }

        .module-name {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 5px;
        }

        .module-desc {
          font-size: 13px;
          color: #909399;
        }
      }
    }

    // 监控图表卡片
    .monitor-card {
      .chart-container {
        height: 300px;
        padding: 20px;

        .mock-chart {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .chart-bars {
            flex: 1;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            gap: 10px;
            margin-bottom: 10px;

            .bar {
              flex: 1;
              background: linear-gradient(to top, #409EFF, #66b1ff);
              border-radius: 4px 4px 0 0;
              position: relative;
              min-height: 20px;
              animation: growBar 1s ease-out forwards;
              transform-origin: bottom;

              &:hover {
                opacity: 0.8;
              }

              .bar-value {
                position: absolute;
                top: -25px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 12px;
                color: #606266;
                white-space: nowrap;
              }
            }
          }

          .chart-labels {
            display: flex;
            justify-content: space-around;
            color: #909399;
            font-size: 12px;
            padding-top: 10px;
            border-top: 1px solid #EBEEF5;
          }
        }
      }
    }

    // 技术栈卡片
    .tech-card {
      .tech-tabs {
        .tech-list {
          .tech-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;

            &:last-child {
              border-bottom: none;
            }

            .el-tag {
              min-width: 120px;
            }

            .tech-version {
              color: #909399;
              font-size: 13px;
            }
          }
        }
      }
    }

    // 公告卡片
    .notice-card {
      :deep(.el-timeline) {
        padding-left: 0;

        .el-timeline-item__wrapper {
          padding-left: 28px;
        }

        .el-timeline-item__timestamp {
          color: #909399;
          font-size: 13px;
        }

        .notice-content {
          h4 {
            margin: 0 0 5px 0;
            font-size: 15px;
            font-weight: 600;
            color: #303133;
          }

          p {
            margin: 0;
            font-size: 13px;
            color: #606266;
            line-height: 1.5;
          }
        }
      }
    }

    // 快捷操作卡片
    .quick-action-card {
      .quick-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        .el-button {
          width: 100%;
          height: 40px;
          border-radius: 8px;
          font-size: 14px;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 10px;

    .welcome-section {
      flex-direction: column;
      text-align: center;
      padding: 30px 20px;

      .welcome-content {
        margin-bottom: 20px;

        .welcome-title {
          font-size: 28px;
        }

        .welcome-subtitle {
          font-size: 16px;
        }
      }

      .welcome-illustration {
        width: 100%;
        max-width: 300px;
        height: 200px;
      }
    }

    .stat-cards {
      .stat-card {
        margin-bottom: 15px;
      }
    }

    .main-content {
      .feature-card {
        .module-item {
          padding: 15px 5px;

          .module-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
          }

          .module-name {
            font-size: 14px;
          }

          .module-desc {
            font-size: 12px;
          }
        }
      }

      .quick-action-card {
        .quick-actions {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes growBar {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.stat-card,
.el-card {
  animation: fadeInUp 0.6s ease-out;
}

// 延迟动画
.stat-cards .el-col:nth-child(1) .stat-card { animation-delay: 0.1s; }
.stat-cards .el-col:nth-child(2) .stat-card { animation-delay: 0.2s; }
.stat-cards .el-col:nth-child(3) .stat-card { animation-delay: 0.3s; }
.stat-cards .el-col:nth-child(4) .stat-card { animation-delay: 0.4s; }
.notice-card {
  .card-header {
    .notice-badge {
      margin-left: 10px;

      :deep(.el-badge__content) {
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        font-size: 12px;
      }
    }
  }

  :deep(.el-timeline) {
    .notice-content {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #f5f7fa;
        padding: 8px;
        border-radius: 4px;
        margin: -8px;
      }

      h4 {
        display: flex;
        align-items: center;
        gap: 8px;

        .el-tag {
          margin-left: auto;
        }
      }

      .notice-meta {
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #909399;

        .notice-type {
          :deep(.el-tag) {
            height: 20px;
            line-height: 18px;
            padding: 0 8px;
          }
        }
      }
    }
  }

  :deep(.el-empty) {
    padding: 20px 0;

    .el-empty__description {
      margin-top: 10px;
    }
  }
}

// 公告详情弹窗样式
:global(.notice-detail-dialog) {
  .el-message-box__content {
    max-height: 60vh;
    overflow-y: auto;
  }
}
// 监控图表卡片
.monitor-card {
  .chart-container {
    height: 350px;
    padding: 20px;
    cursor: pointer;

    .mock-chart {
      height: 100%;
      display: flex;
      flex-direction: column;

      .chart-bars {
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        gap: 10px;
        margin-bottom: 10px;

        .bar {
          flex: 1;
          background: linear-gradient(to top, #409EFF, #66b1ff);
          border-radius: 4px 4px 0 0;
          position: relative;
          min-height: 20px;
          animation: growBar 1s ease-out forwards;
          transform-origin: bottom;
          transition: all 0.3s ease;

          &:hover {
            opacity: 0.8;
            transform: translateY(-2px);
          }

          .bar-value {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #606266;
            white-space: nowrap;
          }
        }
      }

      .chart-lines {
        flex: 1;
        position: relative;
        margin-bottom: 10px;
        background: #fafafa;
        border-radius: 4px;
        overflow: hidden;

        svg {
          display: block;

          .grid {
            opacity: 0.5;
          }

          .data-point {
            transition: all 0.3s ease;

            &:hover {
              r: 7;
              fill: #66b1ff;
            }
          }

          .value-label {
            opacity: 0;
            transition: opacity 0.3s ease;
          }

          &:hover .value-label {
            opacity: 1;
          }
        }
      }

      .chart-labels {
        display: flex;
        justify-content: space-around;
        color: #909399;
        font-size: 12px;
        padding-top: 10px;
        border-top: 1px solid #EBEEF5;

        span {
          cursor: pointer;
          transition: color 0.3s ease;

          &:hover {
            color: #409EFF;
          }
        }
      }
    }
  }
}

// 添加折线动画
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.chart-lines {
  polyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 2s ease-out forwards;
  }

  .data-point {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;

    @for $i from 1 through 7 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.1}s;
      }
    }
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
</style>
