<template>
  <div class="alarm-manage">
    <!-- 告警统计卡片 -->
    <div class="alarm-stats">
      <div class="stat-card total">
        <div class="stat-icon">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
              fill="currentColor"
            />
            <path
              d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
              fill="currentColor"
            />
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ alarmStats.total }}</div>
          <div class="stat-label">告警总数</div>
        </div>
      </div>
      <div class="stat-card pending">
        <div class="stat-icon">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
              fill="currentColor"
            />
            <path
              d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
              fill="currentColor"
            />
            <path
              d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z"
              fill="currentColor"
            />
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ alarmStats.pending }}</div>
          <div class="stat-label">待处理</div>
        </div>
      </div>
      <div class="stat-card processing">
        <div class="stat-icon">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
              fill="currentColor"
            />
            <path
              d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z"
              fill="currentColor"
            />
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ alarmStats.processing }}</div>
          <div class="stat-label">处理中</div>
        </div>
      </div>
      <div class="stat-card resolved">
        <div class="stat-icon">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
              fill="currentColor"
            />
            <path
              d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
              fill="currentColor"
            />
            <path
              d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z"
              fill="currentColor"
            />
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ alarmStats.resolved }}</div>
          <div class="stat-label">已解决</div>
        </div>
      </div>
    </div>

    <!-- 工单系统对接配置 -->
    <div class="workorder-config">
      <div class="config-header">
        <div class="config-title">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-600 72h560v208H232V136zm560 480H232V408h560v208zm0 272H232V680h560v208z"
              fill="currentColor"
            />
          </svg>
          工单系统对接配置
        </div>
        <el-switch
          v-model="workOrderConfig.enabled"
          active-text="已启用"
          inactive-text="已禁用"
          class="custom-switch"
        ></el-switch>
      </div>

      <div class="config-content" v-if="workOrderConfig.enabled">
        <div class="config-row">
          <div class="config-item">
            <label>工单系统类型</label>
            <el-select
              v-model="workOrderConfig.systemType"
              class="custom-select"
            >
              <el-option label="业主工单系统A" value="systemA"></el-option>
              <el-option label="业主工单系统B" value="systemB"></el-option>
              <el-option label="第三方工单平台" value="thirdParty"></el-option>
            </el-select>
          </div>
          <div class="config-item">
            <label>API地址</label>
            <el-input
              v-model="workOrderConfig.apiUrl"
              placeholder="https://api.workorder.com"
              class="custom-input"
            ></el-input>
          </div>
          <div class="config-item">
            <label>API密钥</label>
            <el-input
              v-model="workOrderConfig.apiKey"
              placeholder="请输入API密钥"
              show-password
              class="custom-input"
            ></el-input>
          </div>
        </div>
        <div class="config-row">
          <div class="config-item">
            <label>自动推送</label>
            <el-switch
              v-model="workOrderConfig.autoPush"
              class="custom-switch"
            ></el-switch>
          </div>
          <div class="config-item">
            <label>推送告警等级</label>
            <el-select
              v-model="workOrderConfig.pushLevel"
              class="custom-select"
              multiple
            >
              <el-option label="严重" value="critical"></el-option>
              <el-option label="警告" value="warning"></el-option>
              <el-option label="信息" value="info"></el-option>
            </el-select>
          </div>
          <div class="config-item">
            <label>工单优先级映射</label>
            <el-select
              v-model="workOrderConfig.priorityMapping"
              class="custom-select"
            >
              <el-option label="告警等级=工单优先级" value="direct"></el-option>
              <el-option label="根据规则映射" value="rule"></el-option>
            </el-select>
          </div>
        </div>
        <div class="config-actions">
          <div class="primary-btn">
            <el-button
              type="primary"
              @click="testConnection"
              class="custom-btn"
            >
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z"
                  fill="currentColor"
                />
              </svg>
              测试连接
            </el-button>
          </div>
          <div class="success-btn">
            <el-button type="success" @click="saveConfig" class="custom-btn">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z"
                  fill="currentColor"
                />
              </svg>
              保存配置
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 告警筛选 -->
    <div class="alarm-filter">
      <div class="filter-group">
        <div class="filter-item">
          <label>告警级别</label>
          <el-select
            v-model="filterForm.level"
            placeholder="全部"
            clearable
            class="custom-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="严重" value="critical"></el-option>
            <el-option label="警告" value="warning"></el-option>
            <el-option label="信息" value="info"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <label>告警状态</label>
          <el-select
            v-model="filterForm.status"
            placeholder="全部"
            clearable
            class="custom-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="处理中" value="processing"></el-option>
            <el-option label="已解决" value="resolved"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <label>工单状态</label>
          <el-select
            v-model="filterForm.workOrderStatus"
            placeholder="全部"
            clearable
            class="custom-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="未创建" value="notCreated"></el-option>
            <el-option label="待派发" value="pending"></el-option>
            <el-option label="进行中" value="inProgress"></el-option>
            <el-option label="已完成" value="completed"></el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <label>告警时间</label>
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            class="custom-picker"
          ></el-date-picker>
        </div>
      </div>
      <div class="filter-actions">
        <el-input
          v-model="filterForm.keyword"
          placeholder="搜索告警标题/设备/描述"
          clearable
          class="search-input custom-input"
        ></el-input>
        <div class="primary-btn">
          <el-button type="primary" @click="handleSearch" class="custom-btn"
            >查询</el-button
          >
        </div>
        <el-button @click="handleReset" class="custom-btn">重置</el-button>
        <div class="success-btn">
          <el-button type="success" @click="handleExport" class="custom-btn"
            >导出</el-button
          >
        </div>
      </div>
    </div>

    <!-- 告警列表 -->
    <div class="alarm-list">
      <div class="list-header">
        <div class="list-title">告警列表</div>
        <div class="list-info">共 {{ filteredAlarms.length }} 条告警</div>
      </div>
      <div class="table-container">
        <table class="alarm-table">
          <thead>
            <tr>
              <th>告警ID</th>
              <th>告警级别</th>
              <th>告警标题</th>
              <th>设备名称</th>
              <th>告警时间</th>
              <th>告警状态</th>
              <th>工单编号</th>
              <th>工单状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="alarm in paginatedAlarms" :key="alarm.id">
              <td>{{ alarm.id }}</td>
              <td>
                <span class="level-badge" :class="alarm.level">
                  {{ getLevelText(alarm.level) }}
                </span>
              </td>
              <td class="title-cell">{{ alarm.title }}</td>
              <td>{{ alarm.deviceName }}</td>
              <td>{{ alarm.alarmTime }}</td>
              <td>
                <span class="status-badge" :class="alarm.status">
                  {{ getStatusText(alarm.status) }}
                </span>
              </td>
              <td>
                <span
                  v-if="alarm.workOrderId"
                  class="workorder-link"
                  @click="viewWorkOrder(alarm)"
                >
                  {{ alarm.workOrderId }}
                </span>
                <span v-else class="no-workorder">未创建</span>
              </td>
              <td>
                <span
                  v-if="alarm.workOrderStatus"
                  class="workorder-status"
                  :class="alarm.workOrderStatus"
                >
                  {{ getWorkOrderStatusText(alarm.workOrderStatus) }}
                </span>
                <span v-else>-</span>
              </td>
              <td class="action-cell">
                <div class="action-buttons">
                  <div class="primary-btn" v-if="!alarm.workOrderId">
                    <el-button
                      type="primary"
                      size="small"
                      @click="createWorkOrder(alarm)"
                      class="action-btn"
                    >
                      创建工单
                    </el-button>
                  </div>
                  <el-button
                    size="small"
                    @click="viewAlarmDetail(alarm)"
                    class="action-btn"
                  >
                    详情
                  </el-button>
                  <el-dropdown
                    @command="(cmd) => handleAlarmCommand(cmd, alarm)"
                    class="action-dropdown"
                  >
                    <el-button size="small" class="action-btn">
                      更多
                      <svg
                        viewBox="0 0 1024 1024"
                        xmlns="http://www.w3.org/2000/svg"
                        style="
                          margin-left: 0.04rem;
                          width: 0.1rem;
                          height: 0.1rem;
                        "
                      >
                        <path
                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                          fill="currentColor"
                        />
                        <path
                          d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
                          fill="currentColor"
                        />
                      </svg>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu class="custom-dropdown-menu">
                        <el-dropdown-item
                          command="viewWorkOrder"
                          v-if="alarm.workOrderId"
                          >查看工单</el-dropdown-item
                        >
                        <el-dropdown-item
                          command="createWorkOrder"
                          v-if="!alarm.workOrderId"
                          >创建工单</el-dropdown-item
                        >
                        <el-dropdown-item
                          command="resolve"
                          v-if="alarm.status !== 'resolved'"
                          divided
                          >标记已解决</el-dropdown-item
                        >
                        <el-dropdown-item
                          command="close"
                          v-if="alarm.status !== 'resolved'"
                          >关闭告警</el-dropdown-item
                        >
                        <el-dropdown-item
                          command="reopen"
                          v-if="alarm.status === 'resolved'"
                          >重新打开</el-dropdown-item
                        >
                        <el-dropdown-item command="export" divided
                          >导出报告</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="filteredAlarms.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="custom-pagination"
        ></el-pagination>
      </div>
    </div>

    <!-- 告警详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="告警详情"
      width="800px"
      class="custom-dialog"
    >
      <div class="detail-content" v-if="selectedAlarm">
        <div class="detail-section">
          <div class="section-title">基本信息</div>
          <div class="info-grid">
            <div class="info-item">
              <span class="item-label">告警ID:</span>
              <span class="item-value">{{ selectedAlarm.id }}</span>
            </div>
            <div class="info-item">
              <span class="item-label">告警级别:</span>
              <span class="item-value level-badge" :class="selectedAlarm.level">
                {{ getLevelText(selectedAlarm.level) }}
              </span>
            </div>
            <div class="info-item">
              <span class="item-label">告警标题:</span>
              <span class="item-value">{{ selectedAlarm.title }}</span>
            </div>
            <div class="info-item">
              <span class="item-label">告警状态:</span>
              <span
                class="item-value status-badge"
                :class="selectedAlarm.status"
              >
                {{ getStatusText(selectedAlarm.status) }}
              </span>
            </div>
            <div class="info-item">
              <span class="item-label">设备名称:</span>
              <span class="item-value">{{ selectedAlarm.deviceName }}</span>
            </div>
            <div class="info-item">
              <span class="item-label">告警时间:</span>
              <span class="item-value">{{ selectedAlarm.alarmTime }}</span>
            </div>
            <div class="info-item full-width">
              <span class="item-label">告警描述:</span>
              <span class="item-value">{{ selectedAlarm.description }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section" v-if="selectedAlarm.workOrderId">
          <div class="section-title">关联工单</div>
          <div class="workorder-info">
            <div class="info-row">
              <span class="info-label">工单编号:</span>
              <span
                class="info-value workorder-link"
                @click="viewWorkOrder(selectedAlarm)"
              >
                {{ selectedAlarm.workOrderId }}
              </span>
            </div>
            <div class="info-row">
              <span class="info-label">工单状态:</span>
              <span
                class="info-value workorder-status"
                :class="selectedAlarm.workOrderStatus"
              >
                {{ getWorkOrderStatusText(selectedAlarm.workOrderStatus) }}
              </span>
            </div>
            <div class="info-row">
              <span class="info-label">工单类型:</span>
              <span class="item-value">{{ selectedAlarm.workOrderType }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">创建时间:</span>
              <span class="item-value">{{
                selectedAlarm.workOrderCreateTime
              }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">处理人:</span>
              <span class="item-value">{{
                selectedAlarm.workOrderHandler
              }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <div class="section-title">处理记录</div>
          <div class="process-timeline">
            <div
              v-for="(record, index) in selectedAlarm.processRecords"
              :key="index"
              class="timeline-item"
            >
              <div class="timeline-dot" :class="record.type"></div>
              <div class="timeline-content">
                <div class="timeline-title">{{ record.title }}</div>
                <div class="timeline-time">{{ record.time }}</div>
                <div class="timeline-desc" v-if="record.description">
                  {{ record.description }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="detailDialogVisible = false" class="custom-btn"
          >关闭</el-button
        >
      </template>
    </el-dialog>

    <!-- 创建工单弹窗 -->
    <el-dialog
      v-model="workOrderDialogVisible"
      title="创建工单"
      width="600px"
      class="custom-dialog"
    >
      <el-form
        :model="workOrderForm"
        :rules="workOrderRules"
        ref="workOrderFormRef"
        label-width="100px"
      >
        <el-form-item label="工单标题" prop="title">
          <el-input
            v-model="workOrderForm.title"
            placeholder="请输入工单标题"
            class="custom-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单类型" prop="type">
          <el-select v-model="workOrderForm.type" class="custom-select">
            <el-option label="设备故障" value="deviceFault"></el-option>
            <el-option label="系统异常" value="systemError"></el-option>
            <el-option label="维护保养" value="maintenance"></el-option>
            <el-option label="其他" value="other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-select v-model="workOrderForm.priority" class="custom-select">
            <el-option label="紧急" value="urgent"></el-option>
            <el-option label="高" value="high"></el-option>
            <el-option label="中" value="medium"></el-option>
            <el-option label="低" value="low"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指派人" prop="assignee">
          <el-select v-model="workOrderForm.assignee" class="custom-select">
            <el-option label="张三" value="user1"></el-option>
            <el-option label="李四" value="user2"></el-option>
            <el-option label="王五" value="user3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工单描述" prop="description">
          <el-input
            v-model="workOrderForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入工单描述"
            class="custom-input"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="workOrderDialogVisible = false" class="custom-btn"
          >取消</el-button
        >
        <el-button type="primary" @click="submitWorkOrder" class="custom-btn"
          >提交工单</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AlarmManage",
  data() {
    return {
      alarmStats: {
        total: 156,
        pending: 12,
        processing: 28,
        resolved: 116,
      },
      workOrderConfig: {
        enabled: true,
        systemType: "systemA",
        apiUrl: "https://api.workorder.example.com",
        apiKey: "",
        autoPush: true,
        pushLevel: ["critical", "warning"],
        priorityMapping: "direct",
      },
      filterForm: {
        level: "",
        status: "",
        workOrderStatus: "",
        keyword: "",
        dateRange: [],
      },
      currentPage: 1,
      pageSize: 10,
      alarmList: [],
      detailDialogVisible: false,
      workOrderDialogVisible: false,
      selectedAlarm: null,
      workOrderForm: {
        title: "",
        type: "",
        priority: "",
        assignee: "",
        description: "",
      },
      workOrderRules: {
        title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
        type: [
          { required: true, message: "请选择工单类型", trigger: "change" },
        ],
        priority: [
          { required: true, message: "请选择优先级", trigger: "change" },
        ],
        assignee: [
          { required: true, message: "请选择指派人", trigger: "change" },
        ],
        description: [
          { required: true, message: "请输入工单描述", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    filteredAlarms() {
      let alarms = [...this.alarmList];

      if (this.filterForm.level) {
        alarms = alarms.filter((a) => a.level === this.filterForm.level);
      }

      if (this.filterForm.status) {
        alarms = alarms.filter((a) => a.status === this.filterForm.status);
      }

      if (this.filterForm.workOrderStatus) {
        alarms = alarms.filter(
          (a) => a.workOrderStatus === this.filterForm.workOrderStatus
        );
      }

      if (this.filterForm.keyword) {
        const keyword = this.filterForm.keyword.toLowerCase();
        alarms = alarms.filter(
          (a) =>
            a.title.toLowerCase().includes(keyword) ||
            a.deviceName.toLowerCase().includes(keyword) ||
            a.description.toLowerCase().includes(keyword)
        );
      }

      if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
        const [start, end] = this.filterForm.dateRange;
        alarms = alarms.filter(
          (a) => a.alarmTime >= start && a.alarmTime <= end
        );
      }

      return alarms;
    },
    paginatedAlarms() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredAlarms.slice(start, end);
    },
  },
  mounted() {
    this.initAlarmList();
  },
  methods: {
    initAlarmList() {
      const now = new Date();
      this.alarmList = [
        {
          id: "ALM202403040001",
          level: "critical",
          title: "主机过载告警",
          description: "1号主机负载超过额定值105%，持续运行10分钟",
          deviceName: "1号主机",
          deviceCode: "CH-001",
          alarmTime: "2024-03-04 10:30:25",
          status: "pending",
          workOrderId: "WO202403040001",
          workOrderStatus: "inProgress",
          workOrderType: "deviceFault",
          workOrderCreateTime: "2024-03-04 10:35:00",
          workOrderHandler: "张三",
          processRecords: [
            {
              type: "create",
              title: "告警产生",
              time: "2024-03-04 10:30:25",
              description: "系统检测到1号主机过载",
            },
            {
              type: "push",
              title: "自动推送到工单系统",
              time: "2024-03-04 10:30:30",
              description: "成功创建工单WO202403040001",
            },
            {
              type: "process",
              title: "工单已派发",
              time: "2024-03-04 10:45:00",
              description: "指派给运维人员张三",
            },
            {
              type: "processing",
              title: "运维人员已接单",
              time: "2024-03-04 11:00:00",
              description: "开始处理主机过载问题",
            },
          ],
        },
        {
          id: "ALM202403040002",
          level: "critical",
          title: "冷冻泵故障告警",
          description: "4号冷冻泵电机过载保护触发",
          deviceName: "4号冷冻泵",
          deviceCode: "CP-004",
          alarmTime: "2024-03-04 09:15:42",
          status: "processing",
          workOrderId: "WO202403040002",
          workOrderStatus: "pending",
          workOrderType: "deviceFault",
          workOrderCreateTime: "2024-03-04 09:20:00",
          workOrderHandler: "李四",
          processRecords: [
            {
              type: "create",
              title: "告警产生",
              time: "2024-03-04 09:15:42",
              description: "检测到冷冻泵电机过载",
            },
            {
              type: "push",
              title: "自动推送到工单系统",
              time: "2024-03-04 09:15:45",
              description: "成功创建工单WO202403040002",
            },
            {
              type: "pending",
              title: "等待派发",
              time: "2024-03-04 09:20:00",
              description: "工单待派发",
            },
          ],
        },
        {
          id: "ALM202403040003",
          level: "warning",
          title: "冷却塔风机效率下降",
          description: "1号冷却塔风机效率低于设计值15%",
          deviceName: "1号冷却塔",
          deviceCode: "CT-001",
          alarmTime: "2024-03-04 08:45:18",
          status: "pending",
          workOrderId: null,
          workOrderStatus: null,
          processRecords: [
            {
              type: "create",
              title: "告警产生",
              time: "2024-03-04 08:45:18",
              description: "检测到风机效率下降",
            },
          ],
        },
        {
          id: "ALM202403040004",
          level: "info",
          title: "温度传感器数据异常",
          description: "18号温度传感器读数波动较大",
          deviceName: "18号温度传感器",
          deviceCode: "TS-018",
          alarmTime: "2024-03-04 07:30:55",
          status: "resolved",
          workOrderId: null,
          workOrderStatus: null,
          processRecords: [
            {
              type: "create",
              title: "告警产生",
              time: "2024-03-04 07:30:55",
              description: "传感器读数异常",
            },
            {
              type: "resolve",
              title: "告警已解决",
              time: "2024-03-04 08:15:00",
              description: "传感器已恢复正常",
            },
          ],
        },
        {
          id: "ALM202403030005",
          level: "critical",
          title: "主机冷却水流量异常",
          description: "2号主机冷却水流量低于设定值50%",
          deviceName: "2号主机",
          deviceCode: "CH-002",
          alarmTime: "2024-03-03 16:22:33",
          status: "resolved",
          workOrderId: "WO202403030001",
          workOrderStatus: "completed",
          workOrderType: "deviceFault",
          workOrderCreateTime: "2024-03-03 16:30:00",
          workOrderHandler: "王五",
          processRecords: [
            {
              type: "create",
              title: "告警产生",
              time: "2024-03-03 16:22:33",
              description: "检测到冷却水流量异常",
            },
            {
              type: "push",
              title: "自动推送到工单系统",
              time: "2024-03-03 16:22:40",
              description: "成功创建工单WO202403030001",
            },
            {
              type: "process",
              title: "工单已派发",
              time: "2024-03-03 16:45:00",
              description: "指派给运维人员王五",
            },
            {
              type: "processing",
              title: "运维人员已接单",
              time: "2024-03-03 17:00:00",
              description: "开始处理冷却水流量问题",
            },
            {
              type: "resolve",
              title: "问题已解决",
              time: "2024-03-03 18:30:00",
              description: "冷却水流量恢复正常",
            },
            {
              type: "complete",
              title: "工单已完成",
              time: "2024-03-03 18:35:00",
              description: "工单已归档",
            },
          ],
        },
        {
          id: "ALM202403030006",
          level: "warning",
          title: "系统EER值低于阈值",
          description: "机房整体EER值为4.2，低于设定值5.0",
          deviceName: "机房系统",
          deviceCode: "SYS-001",
          alarmTime: "2024-03-03 14:10:22",
          status: "resolved",
          workOrderId: "WO202403030002",
          workOrderStatus: "completed",
          workOrderType: "systemError",
          workOrderCreateTime: "2024-03-03 14:20:00",
          workOrderHandler: "张三",
          processRecords: [
            {
              type: "create",
              title: "告警产生",
              time: "2024-03-03 14:10:22",
              description: "系统能效低于阈值",
            },
            {
              type: "push",
              title: "自动推送到工单系统",
              time: "2024-03-03 14:10:30",
              description: "成功创建工单WO202403030002",
            },
            {
              type: "process",
              title: "工单已派发",
              time: "2024-03-03 14:30:00",
              description: "指派给运维人员张三",
            },
            {
              type: "resolve",
              title: "问题已解决",
              time: "2024-03-03 15:45:00",
              description: "EER值已恢复到6.5",
            },
            {
              type: "complete",
              title: "工单已完成",
              time: "2024-03-03 15:50:00",
              description: "工单已归档",
            },
          ],
        },
      ];

      // 添加更多模拟数据
      for (let i = 7; i <= 20; i++) {
        const levels = ["critical", "warning", "info"];
        const statuses = ["pending", "processing", "resolved"];
        const workOrderStatuses = [
          "notCreated",
          "pending",
          "inProgress",
          "completed",
        ];
        const date = new Date(
          now.getTime() - Math.random() * 7 * 24 * 60 * 60 * 1000
        );

        this.alarmList.push({
          id: `ALM2024030${String(i).padStart(5, "0")}`,
          level: levels[Math.floor(Math.random() * levels.length)],
          title: [
            "设备温度异常",
            "传感器离线",
            "电流波动异常",
            "冷却塔效率下降",
            "泵运行异常",
          ][Math.floor(Math.random() * 5)],
          description: `告警描述详情 ${i}`,
          deviceName: `${
            ["主机", "冷冻泵", "冷却泵", "冷却塔", "温度传感器"][
              Math.floor(Math.random() * 5)
            ]
          }`,
          deviceCode: `DEV-${String(i).padStart(3, "0")}`,
          alarmTime: date.toISOString().slice(0, 19).replace("T", " "),
          status: statuses[Math.floor(Math.random() * statuses.length)],
          workOrderId:
            Math.random() > 0.5
              ? `WO2024030${String(i).padStart(5, "0")}`
              : null,
          workOrderStatus:
            Math.random() > 0.3
              ? workOrderStatuses[
                  Math.floor(Math.random() * workOrderStatuses.length)
                ]
              : null,
          workOrderType: "deviceFault",
          workOrderCreateTime: date
            .toISOString()
            .slice(0, 19)
            .replace("T", " "),
          workOrderHandler: ["张三", "李四", "王五"][
            Math.floor(Math.random() * 3)
          ],
          processRecords: [
            {
              type: "create",
              title: "告警产生",
              time: date.toISOString().slice(0, 19).replace("T", " "),
              description: "告警已产生",
            },
          ],
        });
      }
    },
    getLevelText(level) {
      const map = {
        critical: "严重",
        warning: "警告",
        info: "信息",
      };
      return map[level] || level;
    },
    getStatusText(status) {
      const map = {
        pending: "待处理",
        processing: "处理中",
        resolved: "已解决",
      };
      return map[status] || status;
    },
    getWorkOrderStatusText(status) {
      const map = {
        notCreated: "未创建",
        pending: "待派发",
        inProgress: "进行中",
        completed: "已完成",
      };
      return map[status] || status;
    },
    handleSearch() {
      this.currentPage = 1;
    },
    handleReset() {
      this.filterForm = {
        level: "",
        status: "",
        workOrderStatus: "",
        keyword: "",
        dateRange: [],
      };
      this.currentPage = 1;
    },
    handleExport() {
      this.$message.success("告警列表导出成功");
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    viewAlarmDetail(alarm) {
      this.selectedAlarm = alarm;
      this.detailDialogVisible = true;
    },
    createWorkOrder(alarm) {
      this.workOrderForm.title = `[告警] ${alarm.title} - ${alarm.deviceName}`;
      this.workOrderForm.type = "deviceFault";
      this.workOrderForm.priority =
        alarm.level === "critical"
          ? "urgent"
          : alarm.level === "warning"
          ? "high"
          : "medium";
      this.workOrderForm.assignee = "";
      this.workOrderForm.description = alarm.description;
      this.workOrderDialogVisible = true;
    },
    submitWorkOrder() {
      this.$refs.workOrderFormRef.validate((valid) => {
        if (valid) {
          const alarm = this.alarmList.find((a) => a === this.selectedAlarm);
          if (alarm) {
            alarm.workOrderId = `WO${new Date().getTime()}`;
            alarm.workOrderStatus = "pending";
            alarm.workOrderType = this.workOrderForm.type;
            alarm.workOrderCreateTime = new Date()
              .toISOString()
              .slice(0, 19)
              .replace("T", " ");
            alarm.workOrderHandler = this.workOrderForm.assignee;
            alarm.status = "processing";
            alarm.processRecords.push({
              type: "push",
              title: "手动创建工单",
              time: new Date().toISOString().slice(0, 19).replace("T", " "),
              description: `成功创建工单${alarm.workOrderId}`,
            });
          }
          this.$message.success("工单创建成功");
          this.workOrderDialogVisible = false;
        }
      });
    },
    viewWorkOrder(alarm) {
      this.$message.info(`查看工单: ${alarm.workOrderId}`);
    },
    handleAlarmCommand(command, alarm) {
      if (command === "resolve") {
        alarm.status = "resolved";
        alarm.processRecords.push({
          type: "resolve",
          title: "标记为已解决",
          time: new Date().toISOString().slice(0, 19).replace("T", " "),
          description: "用户手动标记为已解决",
        });
        this.$message.success("已标记为已解决");
      } else if (command === "close") {
        alarm.status = "resolved";
        this.$message.success("告警已关闭");
      } else if (command === "reopen") {
        alarm.status = "pending";
        alarm.processRecords.push({
          type: "reopen",
          title: "重新打开告警",
          time: new Date().toISOString().slice(0, 19).replace("T", " "),
          description: "用户重新打开告警",
        });
        this.$message.success("告警已重新打开");
      } else if (command === "createWorkOrder") {
        this.createWorkOrder(alarm);
      } else if (command === "viewWorkOrder") {
        this.viewWorkOrder(alarm);
      } else if (command === "export") {
        this.$message.success(`导出告警${alarm.id}的报告成功`);
      }
    },
    testConnection() {
      this.$message.success("工单系统连接测试成功");
    },
    saveConfig() {
      this.$message.success("配置已保存");
    },
  },
};
</script>

<style lang="scss" scoped>
.alarm-manage {
  padding: 0.16rem;
}

.alarm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
  gap: 0.15rem;
  margin-bottom: 0.16rem;

  .stat-card {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.08rem;

    &.total {
      background: linear-gradient(
        135deg,
        rgba(84, 112, 198, 0.2) 0%,
        rgba(115, 192, 222, 0.2) 100%
      );
      border: 1px solid rgba(84, 112, 198, 0.3);
    }

    &.pending {
      background: linear-gradient(
        135deg,
        rgba(238, 102, 102, 0.2) 0%,
        rgba(229, 57, 53, 0.2) 100%
      );
      border: 1px solid rgba(238, 102, 102, 0.3);
    }

    &.processing {
      background: linear-gradient(
        135deg,
        rgba(250, 200, 88, 0.2) 0%,
        rgba(255, 179, 0, 0.2) 100%
      );
      border: 1px solid rgba(250, 200, 88, 0.3);
    }

    &.resolved {
      background: linear-gradient(
        135deg,
        rgba(145, 204, 117, 0.2) 0%,
        rgba(102, 187, 106, 0.2) 100%
      );
      border: 1px solid rgba(145, 204, 117, 0.3);
    }

    .stat-icon {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.15rem;
      background: rgba(255, 255, 255, 0.1);

      svg {
        width: 0.26rem;
        height: 0.26rem;
        fill: #ffffff;
      }
    }

    .stat-info {
      flex: 1;

      .stat-value {
        font-size: 0.28rem;
        color: #15e1fd;
        font-weight: bold;
        margin-bottom: 0.03rem;
      }

      .stat-label {
        font-size: 0.13rem;
        color: #ffffff;
        opacity: 0.7;
      }
    }
  }
}

.workorder-config {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.08rem;
  margin-bottom: 0.16rem;

  .config-header {
    display: flex;
    align-items: center;
    gap: 0.12rem;

    .config-title {
      font-size: 0.16rem;
      color: #ffffff;
      font-weight: bold;

      svg {
        width: 0.18rem;
        height: 0.18rem;
        fill: #15e1fd;
      }
    }
  }
}

.config-content {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;
  margin-bottom: 0.16rem;

  .config-row {
    display: flex;
    gap: 0.15rem;
    margin-bottom: 0.15rem;
    flex-wrap: wrap;

    .config-item {
      display: flex;
      flex-direction: column;
      gap: 0.08rem;
      min-width: 2rem;

      label {
        font-size: 0.13rem;
        color: #ffffff;
        opacity: 0.7;
      }

      ::v-deep .custom-select,
      ::v-deep .custom-input {
        .el-input__wrapper,
        .el-select__wrapper {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);

          .el-input__inner {
            color: #ffffff;
          }
        }
      }

      ::v-deep .custom-switch {
        .el-switch__core {
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }

  .config-actions {
    display: flex;
    gap: 0.1rem;
    margin-top: 0.15rem;

    ::v-deep .custom-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }
      }

      &.el-button--success {
        background: linear-gradient(135deg, #91cc75 0%, #66bb6a 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%);
        }
      }

      svg {
        width: 0.14rem;
        height: 0.14rem;
        fill: #ffffff;
        margin-right: 0.04rem;
      }
    }
  }
}

.alarm-filter {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.08rem;
  margin-bottom: 0.16rem;
  flex-wrap: wrap;
  gap: 0.15rem;

  .filter-group {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;

    .filter-item {
      display: flex;
      flex-direction: column;
      gap: 0.08rem;
      min-width: 1.8rem;

      label {
        font-size: 0.13rem;
        color: #ffffff;
        opacity: 0.7;
      }

      ::v-deep .custom-select,
      ::v-deep .custom-picker {
        .el-input__wrapper,
        .el-select__wrapper {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);

          .el-input__inner {
            color: #ffffff;
          }
        }
      }
    }
  }

  .filter-actions {
    display: flex;
    gap: 0.1rem;

    .search-input {
      width: 2.5rem;
    }

    ::v-deep .custom-btn {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }
      }

      &.el-button--success {
        background: linear-gradient(135deg, #91cc75 0%, #66bb6a 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%);
        }
      }
    }
  }
}

.alarm-list {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;

    .list-title {
      font-size: 0.16rem;
      color: #ffffff;
      font-weight: bold;
      padding-left: 0.12rem;
      border-left: 0.04rem solid #15e1fd;
    }

    .list-info {
      font-size: 0.14rem;
      color: #ffffff;
      opacity: 0.7;
    }
  }

  .table-container {
    overflow-x: auto;
    border-radius: 0.04rem;
    background: rgba(255, 255, 255, 0.02);

    .alarm-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 10rem;

      thead {
        position: sticky;
        top: 0;
        z-index: 10;

        tr {
          background: linear-gradient(
            135deg,
            rgba(21, 225, 253, 0.1) 0%,
            rgba(145, 204, 117, 0.1) 100%
          );

          th {
            padding: 0.14rem 0.12rem;
            text-align: left;
            font-size: 0.14rem;
            color: #15e1fd;
            font-weight: 600;
            border-bottom: 2px solid rgba(21, 225, 253, 0.3);
            white-space: nowrap;

            &:first-child {
              padding-left: 0.15rem;
              border-top-left-radius: 0.04rem;
            }

            &:last-child {
              padding-right: 0.15rem;
              border-top-right-radius: 0.04rem;
            }
          }
        }
      }

      tbody {
        tr {
          transition: all 0.3s ease;
          background: rgba(255, 255, 255, 0.02);

          &:nth-child(even) {
            background: rgba(255, 255, 255, 0.04);
          }

          &:hover {
            background: rgba(21, 225, 253, 0.1);
            transform: translateX(0.02rem);
          }

          td {
            padding: 0.14rem 0.12rem;
            font-size: 0.13rem;
            color: #ffffff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            vertical-align: middle;

            &:first-child {
              padding-left: 0.15rem;
            }

            &:last-child {
              padding-right: 0.15rem;
            }

            .level-badge {
              display: inline-block;
              padding: 0.05rem 0.15rem;
              border-radius: 0.05rem;
              font-size: 0.12rem;
              font-weight: 500;
              white-space: nowrap;
              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);

              &.critical {
                background: linear-gradient(
                  135deg,
                  rgba(238, 102, 102, 0.25) 0%,
                  rgba(229, 57, 53, 0.25) 100%
                );
                color: #ff8a80;
                border: 1px solid rgba(238, 102, 102, 0.4);
              }

              &.warning {
                background: linear-gradient(
                  135deg,
                  rgba(250, 200, 88, 0.25) 0%,
                  rgba(255, 179, 0, 0.25) 100%
                );
                color: #ffe082;
                border: 1px solid rgba(250, 200, 88, 0.4);
              }

              &.info {
                background: linear-gradient(
                  135deg,
                  rgba(84, 112, 198, 0.25) 0%,
                  rgba(103, 126, 234, 0.25) 100%
                );
                color: #90caf9;
                border: 1px solid rgba(84, 112, 198, 0.4);
              }
            }

            .status-badge {
              display: inline-block;
              padding: 0.05rem 0.15rem;
              border-radius: 0.05rem;
              font-size: 0.12rem;
              font-weight: 500;
              white-space: nowrap;
              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);

              &.pending {
                background: linear-gradient(
                  135deg,
                  rgba(238, 102, 102, 0.25) 0%,
                  rgba(229, 57, 53, 0.25) 100%
                );
                color: #ff8a80;
                border: 1px solid rgba(238, 102, 102, 0.4);
              }

              &.processing {
                background: linear-gradient(
                  135deg,
                  rgba(250, 200, 88, 0.25) 0%,
                  rgba(255, 179, 0, 0.25) 100%
                );
                color: #ffe082;
                border: 1px solid rgba(250, 200, 88, 0.4);
              }

              &.resolved {
                background: linear-gradient(
                  135deg,
                  rgba(145, 204, 117, 0.25) 0%,
                  rgba(102, 187, 106, 0.25) 100%
                );
                color: #a5d6a7;
                border: 1px solid rgba(145, 204, 117, 0.4);
              }
            }

            .workorder-link {
              color: #15e1fd;
              cursor: pointer;
              text-decoration: underline;
              font-weight: 500;
              transition: all 0.3s ease;

              &:hover {
                color: #91cc75;
                text-shadow: 0 0 0.04rem rgba(145, 204, 117, 0.5);
              }
            }

            .no-workorder {
              color: #ffffff;
              opacity: 0.5;
              font-style: italic;
            }

            .workorder-status {
              display: inline-block;
              padding: 0.05rem 0.15rem;
              border-radius: 0.05rem;
              font-size: 0.12rem;
              font-weight: 500;
              white-space: nowrap;
              box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.2);

              &.notCreated {
                background: rgba(255, 255, 255, 0.1);
                color: #ffffff;
                opacity: 0.5;
              }

              &.pending {
                background: linear-gradient(
                  135deg,
                  rgba(238, 102, 102, 0.25) 0%,
                  rgba(229, 57, 53, 0.25) 100%
                );
                color: #ff8a80;
                border: 1px solid rgba(238, 102, 102, 0.4);
              }

              &.inProgress {
                background: linear-gradient(
                  135deg,
                  rgba(250, 200, 88, 0.25) 0%,
                  rgba(255, 179, 0, 0.25) 100%
                );
                color: #ffe082;
                border: 1px solid rgba(250, 200, 88, 0.4);
              }

              &.completed {
                background: linear-gradient(
                  135deg,
                  rgba(145, 204, 117, 0.25) 0%,
                  rgba(102, 187, 106, 0.25) 100%
                );
                color: #a5d6a7;
                border: 1px solid rgba(145, 204, 117, 0.4);
              }
            }

            .title-cell {
              max-width: 2.5rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover {
                color: #15e1fd;
              }
            }

            .action-buttons {
              display: flex;
              align-items: center;
              gap: 0.08rem;
              flex-wrap: nowrap;

              .action-btn {
                padding: 0.05rem 0.12rem;
                font-size: 0.12rem;
                border-radius: 0.04rem;
                font-weight: 500;
                transition: all 0.3s ease;
                white-space: nowrap;

                &.el-button--primary {
                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                  border: none;
                  color: #ffffff;
                  box-shadow: 0 0.04rem 0.08rem rgba(102, 126, 234, 0.3);

                  &:hover {
                    background: linear-gradient(
                      135deg,
                      #5a67d8 0%,
                      #6b46c1 100%
                    );
                    transform: translateY(-0.02rem);
                    box-shadow: 0 0.06rem 0.12rem rgba(102, 126, 234, 0.4);
                  }
                }

                &.el-button--success {
                  background: linear-gradient(135deg, #91cc75 0%, #66bb6a 100%);
                  border: none;
                  color: #ffffff;
                  box-shadow: 0 0.04rem 0.08rem rgba(145, 204, 117, 0.3);

                  &:hover {
                    background: linear-gradient(
                      135deg,
                      #7cb342 0%,
                      #558b2f 100%
                    );
                    transform: translateY(-0.02rem);
                    box-shadow: 0 0.06rem 0.12rem rgba(145, 204, 117, 0.4);
                  }
                }

                &.el-button--default {
                  background: rgba(255, 255, 255, 0.1);
                  border: 1px solid rgba(255, 255, 255, 0.2);
                  color: #ffffff;

                  &:hover {
                    background: rgba(255, 255, 255, 0.2);
                  }
                }

                &:active {
                  transform: translateY(0);
                }

                svg {
                  width: 0.1rem;
                  height: 0.1rem;
                  fill: #ffffff;
                }
              }

              .action-dropdown {
                ::v-deep .el-button--small {
                  padding: 0.05rem 0.1rem;
                  font-size: 0.12rem;
                  background: rgba(255, 255, 255, 0.1);
                  border: 1px solid rgba(255, 255, 255, 0.2);
                  color: #ffffff;
                  border-radius: 0.04rem;
                  font-weight: 500;

                  &:hover {
                    background: rgba(255, 255, 255, 0.2);
                  }

                  svg {
                    width: 0.1rem;
                    height: 0.1rem;
                    fill: #ffffff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    padding-top: 0.2rem;

    ::v-deep .custom-pagination {
      .el-pagination__total,
      .el-pagination__jump,
      .el-pager li {
        color: #ffffff;
      }

      .el-pager li {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }

        &.is-active {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-color: transparent;
        }
      }

      .btn-prev,
      .btn-next {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #ffffff;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
}

::v-deep .custom-dialog {
  .el-dialog {
    background: rgba(30, 30, 50, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .el-dialog__header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .el-dialog__title {
    color: #ffffff;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }

  .detail-content {
    .detail-section {
      margin-bottom: 0.3rem;

      .section-title {
        font-size: 0.15rem;
        color: #15e1fd;
        font-weight: bold;
        margin-bottom: 0.15rem;
        padding-left: 0.12rem;
        border-left: 0.04rem solid #15e1fd;
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.15rem;

        .info-item {
          display: flex;
          justify-content: space-between;
          padding: 0.12rem;
          background: rgba(255, 255, 255, 0.03);
          border-radius: 0.06rem;

          &.full-width {
            grid-column: 1 / -1;
          }

          .item-label {
            font-size: 0.14rem;
            color: #ffffff;
            opacity: 0.7;
          }

          .item-value {
            font-size: 0.14rem;
            color: #ffffff;

            &.level-badge {
              padding: 0.04rem 0.12rem;
              border-radius: 0.04rem;
              font-size: 0.12rem;

              &.critical {
                background: rgba(238, 102, 102, 0.2);
                color: #ee6666;
              }

              &.warning {
                background: rgba(250, 200, 88, 0.2);
                color: #fac858;
              }

              &.info {
                background: rgba(84, 112, 198, 0.2);
                color: #5470c6;
              }
            }

            &.status-badge {
              padding: 0.04rem 0.12rem;
              border-radius: 0.04rem;
              font-size: 0.12rem;

              &.pending {
                background: rgba(238, 102, 102, 0.2);
                color: #ee6666;
              }

              &.processing {
                background: rgba(250, 200, 88, 0.2);
                color: #fac858;
              }

              &.resolved {
                background: rgba(145, 204, 117, 0.2);
                color: #91cc75;
              }
            }
          }
        }
      }

      .workorder-info {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 0.06rem;
        padding: 0.15rem;

        .info-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.1rem;

          &:last-child {
            margin-bottom: 0;
          }

          .info-label {
            font-size: 0.14rem;
            color: #ffffff;
            opacity: 0.7;
          }

          .info-value {
            font-size: 0.14rem;
            color: #ffffff;

            &.workorder-link {
              color: #15e1fd;
              cursor: pointer;
              text-decoration: underline;

              &:hover {
                color: #91cc75;
              }
            }

            &.workorder-status {
              padding: 0.04rem 0.12rem;
              border-radius: 0.04rem;
              font-size: 0.12rem;

              &.pending {
                background: rgba(238, 102, 102, 0.2);
                color: #ee6666;
              }

              &.inProgress {
                background: rgba(250, 200, 88, 0.2);
                color: #fac858;
              }

              &.completed {
                background: rgba(145, 204, 117, 0.2);
                color: #91cc75;
              }
            }
          }
        }
      }

      .process-timeline {
        .timeline-item {
          display: flex;
          margin-bottom: 0.2rem;

          .timeline-dot {
            width: 0.1rem;
            height: 0.1rem;
            border-radius: 50%;
            margin-right: 0.15rem;
            margin-top: 0.03rem;

            &.create {
              background: #5470c6;
            }

            &.push {
              background: #91cc75;
            }

            &.process,
            &.processing {
              background: #fac858;
            }

            &.resolve {
              background: #73c0de;
            }

            &.complete {
              background: #3ba272;
            }

            &.pending {
              background: #ee6666;
            }

            &.reopen {
              background: #f37336;
            }
          }

          .timeline-content {
            flex: 1;

            .timeline-title {
              font-size: 0.14rem;
              color: #ffffff;
              font-weight: bold;
              margin-bottom: 0.05rem;
            }

            .timeline-time {
              font-size: 0.12rem;
              color: #ffffff;
              opacity: 0.6;
              margin-bottom: 0.05rem;
            }

            .timeline-desc {
              font-size: 0.13rem;
              color: #ffffff;
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-form {
  .el-form-item__label {
    color: #ffffff;
    opacity: 0.7;
  }

  .custom-input,
  .custom-select {
    .el-input__wrapper,
    .el-select__wrapper {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      .el-input__inner {
        color: #ffffff;
      }
    }
  }
}

::v-deep .el-dropdown-menu {
  background: rgba(30, 30, 50, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.4);
  border-radius: 0.06rem;
  padding: 0.08rem 0;

  .el-dropdown-menu__item {
    color: #ffffff;
    padding: 0.1rem 0.16rem;
    font-size: 0.13rem;
    transition: all 0.3s ease;

    &:hover {
      background: linear-gradient(
        135deg,
        rgba(21, 225, 253, 0.15) 0%,
        rgba(145, 204, 117, 0.15) 100%
      );
      color: #15e1fd;
    }

    &.is-divided {
      position: relative;
      margin-top: 0.08rem;

      &::before {
        content: "";
        position: absolute;
        top: -0.04rem;
        left: 0.1rem;
        right: 0.1rem;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
}

@media (max-width: 1485px) {
  .alarm-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .alarm-filter {
    flex-direction: column;
  }

  .filter-actions {
    width: 100%;
    margin-top: 0.1rem;

    .search-input {
      flex: 1;
    }
  }

  .table-container {
    .alarm-table {
      thead tr th,
      tbody tr td {
        font-size: 0.12rem;
        padding: 0.08rem;
      }
    }
  }
}
</style>
