<template>
  <div class="door-access-container">
    <!-- 页面头部 -->
<!--    <div class="page-header">
      <h2 class="page-title">
        <el-icon><Lock /></el-icon>
        门禁设备管理
      </h2>
      <div class="header-actions">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新增设备</el-button>
        <el-button :icon="Download" @click="handleExport">导出数据</el-button>
        <el-button :icon="Refresh" @click="handleRefresh" :loading="loading">刷新</el-button>
      </div>
    </div>-->

    <!-- 统计卡片 -->
<!--    <el-row :gutter="20" class="stats-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon online">
              <el-icon><Monitor /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ stats.total }}</div>
              <div class="stats-label">设备总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon success">
              <el-icon><CircleCheck /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ stats.online }}</div>
              <div class="stats-label">在线设备</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon danger">
              <el-icon><CircleClose /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ stats.offline }}</div>
              <div class="stats-label">离线设备</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon warning">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-value">{{ stats.alerts }}</div>
              <div class="stats-label">异常告警</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>-->

    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="位置" prop="location">
          <el-input
              v-model="queryParams.location"
              placeholder="请输入位置"
              clearable
              @keyup.enter="handleQuery"
              style="width: 200px"
          >
            <template #prefix>
              <el-icon><Location /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="设备状态" prop="deviceStatus">
          <el-select v-model="queryParams.deviceStatus" placeholder="请选择状态" clearable style="width: 150px;">
            <el-option label="全部" value="" />
            <el-option label="在线" value="Online">
              <span class="status-option">
                <span class="status-dot online"></span>在线
              </span>
            </el-option>
            <el-option label="离线" value="Offline">
              <span class="status-option">
                <span class="status-dot offline"></span>离线
              </span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="门状态" prop="doorStatus">
          <el-select v-model="queryParams.doorStatus" placeholder="请选择门状态" clearable style="width: 150px;">
            <el-option label="全部" value="" />
            <el-option label="开启" value="开启" />
            <el-option label="关闭" value="关闭" />
            <el-option label="锁定" value="锁定" />
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围" prop="dateRange">
          <el-date-picker
              v-model="queryParams.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 340px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="info" :icon="showAdvanced ? ArrowUp : ArrowDown" @click="toggleAdvanced">
            {{ showAdvanced ? '收起' : '高级' }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 高级搜索 -->
      <el-collapse-transition>
        <el-form v-show="showAdvanced" :model="queryParams" :inline="true" class="advanced-search">
          <el-form-item label="事件类型" prop="eventType">
            <el-select v-model="queryParams.eventType" placeholder="请选择事件类型" clearable style="width: 150px;">
              <el-option label="全部" value="" />
              <el-option label="正常开门" value="Normal" />
              <el-option label="强制开门" value="Force" />
              <el-option label="异常告警" value="Alert" />
              <el-option label="超时未关" value="Timeout" />
            </el-select>
          </el-form-item>

          <el-form-item label="处理状态" prop="processStatus">
            <el-select v-model="queryParams.processStatus" placeholder="请选择处理状态" clearable style="width: 150px;">
              <el-option label="全部" value="" />
              <el-option label="待处理" value="Pending" />
              <el-option label="处理中" value="Processing" />
              <el-option label="已处理" value="Processed" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-collapse-transition>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <span>设备列表</span>
          <div class="table-tools">
            <el-tooltip content="刷新" placement="top">
              <el-button :icon="Refresh" circle @click="handleRefresh" />
            </el-tooltip>
            <el-tooltip content="列设置" placement="top">
              <el-button :icon="Setting" circle @click="showColumnSetting = true" />
            </el-tooltip>
          </div>
        </div>
      </template>

      <el-table
          v-loading="loading"
          :data="doorDevices"
          border
          stripe
          highlight-current-row
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
          :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" align="center" width="60">
          <template #default="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="位置" align="center" prop="location" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <div class="location-cell">
              <el-icon><Location /></el-icon>
              <span>{{ scope.row.location }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="门状态" align="center" prop="doorStatus" width="120">
          <template #default="scope">
            <div class="door-status">
              <el-icon :class="getDoorStatusClass(scope.row.doorStatus)">
                <component :is="getDoorStatusIcon(scope.row.doorStatus)" />
              </el-icon>
              <span>{{ formatDoorStatus(scope.row.doorStatus) }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="设备状态" align="center" width="120">
          <template #default="scope">
            <div class="device-status">
              <span class="status-dot" :class="scope.row.deviceStatus === 'Online' ? 'online' : 'offline'"></span>
              <span>{{ scope.row.deviceStatus === "Online" ? "在线" : "离线" }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="最后事件" align="center" min-width="180">
          <template #default="scope">
            <div class="event-info">
              <div class="event-time">
                <el-icon><Clock /></el-icon>
                {{ formatTime(scope.row.lastEventTime) }}
              </div>
              <el-tag :type="getEventType(scope.row.eventType)" size="small">
                {{ formatEventType(scope.row.eventType) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="处理状态" align="center" width="120">
          <template #default="scope">
            <el-tag :type="getProcessStatusType(scope.row.processStatus)">
              {{ formatProcessStatus(scope.row.processStatus) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="scope">
            <el-button type="primary" link size="small" :icon="View" @click="handleView(scope.row)">
              查看
            </el-button>
            <el-button type="warning" link size="small" :icon="Unlock" @click="handleControl(scope.row)">
              控制
            </el-button>
            <el-dropdown @command="(command) => handleCommand(command, scope.row)">
              <el-button type="info" link size="small">
                更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="edit" :icon="Edit">编辑</el-dropdown-item>
                  <el-dropdown-item command="history" :icon="Clock">历史记录</el-dropdown-item>
                  <el-dropdown-item command="delete" :icon="Delete" divided>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
          v-show="total > 0"
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination-container"
      />
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialog" title="设备详情" width="800px" destroy-on-close>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备ID">{{ currentDevice.id }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{ currentDevice.location }}</el-descriptions-item>
        <el-descriptions-item label="设备型号">{{ currentDevice.model || 'AC-2000' }}</el-descriptions-item>
        <el-descriptions-item label="安装日期">{{ currentDevice.installDate || '2024-01-15' }}</el-descriptions-item>
        <el-descriptions-item label="当前状态" :span="2">
          <el-space>
            <el-tag :type="getDeviceStatusType(currentDevice.deviceStatus)">
              {{ currentDevice.deviceStatus === "Online" ? "在线" : "离线" }}
            </el-tag>
            <el-tag :type="getDoorStatusType(currentDevice.doorStatus)">
              {{ formatDoorStatus(currentDevice.doorStatus) }}
            </el-tag>
          </el-space>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 实时监控数据 -->
      <el-card class="mt-4">
        <template #header>
          <span>实时监控数据</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="monitor-item">
              <div class="monitor-label">今日通行</div>
              <div class="monitor-value">{{ currentDevice.todayAccess || 156 }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="monitor-item">
              <div class="monitor-label">异常事件</div>
              <div class="monitor-value error">{{ currentDevice.todayAlerts || 3 }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="monitor-item">
              <div class="monitor-label">在线时长</div>
              <div class="monitor-value">{{ currentDevice.onlineHours || '23.5' }}h</div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 最近事件 -->
      <el-card class="mt-4">
        <template #header>
          <span>最近事件</span>
        </template>
        <el-timeline>
          <el-timeline-item
              v-for="(event, index) in recentEvents"
              :key="index"
              :timestamp="event.time"
              :type="event.type"
              :hollow="true"
          >
            <div class="timeline-content">
              <span class="event-title">{{ event.title }}</span>
              <span class="event-desc">{{ event.description }}</span>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <template #footer>
        <el-button @click="detailDialog = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 控制弹窗 -->
    <el-dialog v-model="controlDialog" title="门禁控制" width="500px" destroy-on-close>
      <el-alert
          title="请谨慎操作，确保安全"
          type="warning"
          show-icon
          :closable="false"
          class="mb-4"
      />

      <el-form :model="controlForm" label-width="100px">
        <el-form-item label="设备位置">
          <el-input v-model="currentDevice.location" disabled />
        </el-form-item>

        <el-form-item label="控制操作">
          <el-radio-group v-model="controlForm.action">
            <el-radio-button label="open">
              <el-icon><Unlock /></el-icon>
              远程开门
            </el-radio-button>
            <el-radio-button label="lock">
              <el-icon><Lock /></el-icon>
              远程锁定
            </el-radio-button>
            <el-radio-button label="reset">
              <el-icon><Refresh /></el-icon>
              重置设备
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="持续时间" v-if="controlForm.action === 'open'">
          <el-input-number
              v-model="controlForm.duration"
              :min="1"
              :max="60"
              @change="handleDurationChange"
          />
          <span class="ml-2">秒</span>
        </el-form-item>

        <el-form-item label="操作原因">
          <el-input
              v-model="controlForm.reason"
              type="textarea"
              :rows="3"
              placeholder="请输入操作原因"
              maxlength="200"
              show-word-limit
          />
        </el-form-item>

        <el-form-item label="验证密码">
          <el-input
              v-model="controlForm.password"
              type="password"
              placeholder="请输入操作密码"
              show-password
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="controlDialog = false">取消</el-button>
        <el-button type="primary" @click="executeControl" :loading="controlLoading">
          确认执行
        </el-button>
      </template>
    </el-dialog>

    <!-- 历史记录弹窗 -->
    <el-dialog v-model="historyDialog" title="历史记录" width="900px" destroy-on-close>
      <el-table :data="historyData" border stripe max-height="400">
        <el-table-column label="时间" prop="time" width="180">
          <template #default="scope">
            {{ formatTime(scope.row.time) }}
          </template>
        </el-table-column>
        <el-table-column label="事件类型" prop="type" width="120">
          <template #default="scope">
            <el-tag :type="getEventType(scope.row.type)" size="small">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="operator" width="120" />
        <el-table-column label="详情" prop="detail" show-overflow-tooltip />
        <el-table-column label="结果" prop="result" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'" size="small">
              {{ scope.row.result }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="DoorDevices">
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Search,
  Refresh,
  Plus,
  Download,
  Lock,
  Unlock,
  Monitor,
  CircleCheck,
  CircleClose,
  Warning,
  Location,
  Clock,
  View,
  Edit,
  Delete,
  Setting,
  ArrowDown,
  ArrowUp,
  CloseBold,
  SemiSelect
} from '@element-plus/icons-vue';
import { listAccessControl } from "@/api/accessControl/accessControl";

// 响应式变量
const queryRef = ref(null);
const doorDevices = ref([]);
const loading = ref(false);
const showSearch = ref(true);
const showAdvanced = ref(false);
const total = ref(0);
const selectedRows = ref([]);
const detailDialog = ref(false);
const controlDialog = ref(false);
const historyDialog = ref(false);
const currentDevice = ref({});
const controlLoading = ref(false);
const showColumnSetting = ref(false);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  location: '',
  deviceStatus: '',
  doorStatus: '',
  eventType: '',
  processStatus: '',
  dateRange: [],
  interfaceName: "门禁设备"
});

// 控制表单
const controlForm = reactive({
  action: 'open',
  duration: 5,
  reason: '',
  password: ''
});

// 统计数据
const stats = computed(() => {
  const data = {
    total: doorDevices.value.length,
    online: 0,
    offline: 0,
    alerts: 0
  };

  doorDevices.value.forEach(device => {
    if (device.deviceStatus === 'Online') data.online++;
    else data.offline++;
    if (device.eventType === 'Alert') data.alerts++;
  });

  return data;
});

// 最近事件数据
const recentEvents = ref([
  { time: '2024-03-20 10:30:45', type: 'success', title: '正常开门', description: '员工刷卡进入' },
  { time: '2024-03-20 10:25:12', type: 'warning', title: '超时未关', description: '门开启超过30秒未关闭' },
  { time: '2024-03-20 10:20:33', type: 'danger', title: '强制开门', description: '检测到非法开门行为' },
  { time: '2024-03-20 10:15:22', type: 'primary', title: '远程开门', description: '管理员远程开启' }
]);

// 历史记录数据
const historyData = ref([
  { time: new Date(), type: '正常开门', operator: '张恒', detail: '员工刷卡进入办公室', result: '成功' },
  { time: new Date(Date.now() - 3600000), type: '远程控制', operator: '管理员', detail: '远程开启大门', result: '成功' },
  { time: new Date(Date.now() - 7200000), type: '异常告警', operator: '系统', detail: '检测到强制开门', result: '已处理' }
]);

// 自动刷新定时器
let refreshTimer = null;

onMounted(() => {
  getList();
  // 启动自动刷新
  refreshTimer = setInterval(() => {
    getList();
  }, 30000); // 30秒刷新一次
});

onUnmounted(() => {
  // 清除定时器
  if (refreshTimer) {
    clearInterval(refreshTimer);
  }
});

// 获取门禁设备列表
const getList = async () => {
  try {
    loading.value = true;
    const response = await listAccessControl(queryParams);

    // 处理数据，添加模拟的额外字段
    doorDevices.value = (response.data.list || []).map(item => ({
      ...item,
      model: 'AC-2000',
      installDate: '2024-01-15',
      todayAccess: Math.floor(Math.random() * 300),
      todayAlerts: Math.floor(Math.random() * 10),
      onlineHours: (Math.random() * 24).toFixed(1)
    }));

    total.value = response.data.total || 0;
  } catch (error) {
    console.error('获取数据失败:', error);
    ElMessage.error('获取门禁设备数据失败');
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置
const resetQuery = () => {
  queryRef.value?.resetFields();
  queryParams.dateRange = [];
  handleQuery();
};

// 刷新
const handleRefresh = () => {
  getList();
  ElMessage.success('数据已刷新');
};

// 切换高级搜索
const toggleAdvanced = () => {
  showAdvanced.value = !showAdvanced.value;
};

// 新增设备
const handleAdd = () => {
  ElMessage.info('新增设备功能开发中...');
};

// 导出数据
const handleExport = () => {
  ElMessage.success('正在导出数据...');
};

// 查看详情
const handleView = (row) => {
  currentDevice.value = row;
  detailDialog.value = true;
};

// 控制设备 - 修改这个方法
const handleControl = (row) => {
  // 阻止事件冒泡，防止触发行点击事件
  event.stopPropagation();

  currentDevice.value = row;
  controlDialog.value = true;
  // 重置表单
  controlForm.action = 'open';
  controlForm.duration = 5;
  controlForm.reason = '';
  controlForm.password = '';
};


// 执行控制
const executeControl = async () => {
  if (!controlForm.password) {
    ElMessage.warning('请输入操作密码');
    return;
  }

  controlLoading.value = true;
  try {
    // 模拟控制操作
    await new Promise(resolve => setTimeout(resolve, 2000));

    const actionText = {
      'open': '远程开门',
      'lock': '远程锁定',
      'reset': '重置设备'
    };

    ElMessage.success(`${actionText[controlForm.action]}操作成功`);
    controlDialog.value = false;

    // 刷新数据
    getList();
  } catch (error) {
    ElMessage.error('操作失败，请重试');
  } finally {
    controlLoading.value = false;
  }
};

// 处理更多操作
const handleCommand = (command, row) => {
  switch (command) {
    case 'edit':
      ElMessage.info('编辑功能开发中...');
      break;
    case 'history':
      currentDevice.value = row;
      historyDialog.value = true;
      break;
    case 'delete':
      handleDelete(row);
      break;
  }
};

// 删除设备
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
        `确定要删除位于"${row.location}"的门禁设备吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    );

    ElMessage.success('删除成功');
    getList();
  } catch {
    ElMessage.info('已取消删除');
  }
};

// 行点击
const handleRowClick = (row) => {
  handleView(row);
};

// 选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// 分页
const handleSizeChange = (val) => {
  queryParams.pageSize = val;
  queryParams.pageNum = 1;
  getList();
};

const handleCurrentChange = (val) => {
  queryParams.pageNum = val;
  getList();
};

// 持续时间变化
const handleDurationChange = (val) => {
  ElMessage.info(`开门持续时间设置为${val}秒`);
};

// 表格行样式
const tableRowClassName = ({ row }) => {
  if (row.deviceStatus === 'Offline') return 'offline-row';
  if (row.eventType === 'Alert') return 'alert-row';
  return '';
};

// 格式化函数
const formatTime = (time) => {
  if (!time) return '-';
  const date = new Date(time);
  return date.toLocaleString('zh-CN');
};

const formatDoorStatus = (status) => {
  const statusMap = {
    'Open': '开启',
    'Closed': '关闭',
    'Locked': '锁定'
  };
  return statusMap[status] || status;
};

const formatEventType = (type) => {
  const typeMap = {
    'Normal': '正常开门',
    'Force': '强制开门',
    'Alert': '异常告警',
    'Timeout': '超时未关'
  };
  return typeMap[type] || type;
};

const formatProcessStatus = (status) => {
  const statusMap = {
    'Pending': '待处理',
    'Processing': '处理中',
    'Processed': '已处理'
  };
  return statusMap[status] || status;
};

// 获取样式类型
const getDeviceStatusType = (status) => {
  return status === "Online" ? "success" : "danger";
};

const getDoorStatusClass = (status) => {
  const classMap = {
    'Open': 'door-open',
    'Closed': 'door-closed',
    'Locked': 'door-locked'
  };
  return classMap[status] || '';
};

const getDoorStatusIcon = (status) => {
  const iconMap = {
    'Open': Unlock,
    'Closed': SemiSelect,
    'Locked': Lock
  };
  return iconMap[status] || Lock;
};

const getDoorStatusType = (status) => {
  const typeMap = {
    'Open': 'success',
    'Closed': 'info',
    'Locked': 'warning'
  };
  return typeMap[status] || 'info';
};

const getEventType = (type) => {
  const typeMap = {
    'Normal': 'success',
    'Force': 'danger',
    'Alert': 'danger',
    'Timeout': 'warning',
    '正常开门': 'success',
    '远程控制': 'primary',
    '异常告警': 'danger'
  };
  return typeMap[type] || 'info';
};

const getProcessStatusType = (status) => {
  const typeMap = {
    'Pending': 'warning',
    'Processing': 'primary',
    'Processed': 'success'
  };
  return typeMap[status] || 'info';
};
</script>

<style scoped>
.door-access-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 90vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title .el-icon {
  font-size: 28px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 统计卡片 */
.stats-cards {
  margin-bottom: 20px;
}

.stats-card {
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-right: 20px;
}

.stats-icon.online {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.stats-icon.success {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  color: white;
}

.stats-icon.danger {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

.stats-icon.warning {
  background: linear-gradient(135deg, #fcb69f 0%, #ffecd2 100%);
  color: white;
}

.stats-info {
  flex: 1;
}

.stats-value {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.stats-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.advanced-search {
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

/* 状态选项 */
.status-option {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online {
  background-color: #67c23a;
  animation: pulse-green 2s infinite;
}

.status-dot.offline {
  background-color: #f56c6c;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(103, 194, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
  }
}

/* 表格卡片 */
.table-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

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

.table-tools {
  display: flex;
  gap: 10px;
}

/* 表格样式 */
.location-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.door-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.door-status .el-icon {
  font-size: 20px;
}

.door-open {
  color: #67c23a;
}

.door-closed {
  color: #909399;
}

.door-locked {
  color: #e6a23c;
}

.device-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.event-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.event-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #909399;
}

/* 表格行样式 */
:deep(.el-table) {
  .offline-row {
    background-color: #fef0f0;
  }

  .alert-row {
    background-color: #fdf6ec;
  }

  .el-table__row:hover {
    cursor: pointer;
  }
}

/* 分页容器 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 监控项 */
.monitor-item {
  text-align: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.monitor-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.monitor-value {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
}

.monitor-value.error {
  color: #f56c6c;
}

/* 时间线内容 */
.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.event-title {
  font-weight: 600;
  color: #303133;
}

.event-desc {
  font-size: 14px;
  color: #909399;
}

/* 工具类 */
.mt-4 {
  margin-top: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}

.ml-2 {
  margin-left: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .stats-cards {
    margin-bottom: 10px;
  }

  .stats-content {
    flex-direction: column;
    text-align: center;
  }

  .stats-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }

  :deep(.el-form--inline .el-form-item) {
    margin-right: 10px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .door-access-container {
    background-color: #1a1a1a;
  }

  .stats-card,
  .search-card,
  .table-card {
    background-color: #2a2a2a;
  }

  .stats-value {
    color: #e0e0e0;
  }

  .monitor-item {
    background-color: #333333;
  }
}

/* 加载动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 打印样式 */
@media print {
  .page-header,
  .stats-cards,
  .search-card,
  .table-tools,
  .el-table__column:last-child {
    display: none;
  }

  .table-card {
    box-shadow: none;
    border: 1px solid #dcdfe6;
  }
}
</style>
