<template>
  <div class="door-access-container">
    <!-- 页面头部 -->
<!--    <div class="page-header">
      <div class="header-left">
        <div class="page-title">
          <el-icon class="title-icon"><Lock /></el-icon>
          <span>门禁设备管理</span>
        </div>
        <div class="page-subtitle">智能门禁设备统一管理平台</div>
      </div>
      <div class="header-right">
        <el-button type="primary" :icon="Plus" @click="handleAdd">新增设备</el-button>
        <el-button :icon="Download" @click="handleExport">导出数据</el-button>
      </div>
    </div>-->

    <!-- 统计卡片 -->
<!--    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon total">
            <el-icon><Monitor /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-number">{{ total }}</div>
            <div class="stats-label">设备总数</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon hikvision">
            <el-icon><VideoCamera /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-number">{{ hikVisionCount }}</div>
            <div class="stats-label">海康设备</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon capacity">
            <el-icon><User /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-number">{{ totalCapacity }}</div>
            <div class="stats-label">总容量</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stats-card">
          <div class="stats-icon doors">
            <el-icon><House /></el-icon>
          </div>
          <div class="stats-content">
            <div class="stats-number">{{ totalDoors }}</div>
            <div class="stats-label">门禁点数</div>
          </div>
        </div>
      </el-col>
    </el-row>-->

    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="设备名称" prop="name">
          <el-input
              v-model="queryParams.name"
              placeholder="请输入设备名称"
              clearable
              @keyup.enter="handleQuery"
              style="width: 240px"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>

<!--        <el-form-item label="区域" prop="regionName">
          <el-select
              v-model="queryParams.regionName"
              placeholder="请选择区域"
              clearable
              style="width: 180px"
          >
            <el-option
                v-for="region in regionOptions"
                :key="region.value"
                :label="region.label"
                :value="region.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="设备型号" prop="devTypeDesc">
          <el-select
              v-model="queryParams.devTypeDesc"
              placeholder="请选择设备型号"
              clearable
              style="width: 180px"
          >
            <el-option
                v-for="model in modelOptions"
                :key="model.value"
                :label="model.label"
                :value="model.value"
            />
          </el-select>
        </el-form-item>-->

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery" :loading="loading">
            搜索
          </el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
<!--          <el-button :icon="Refresh" @click="handleRefresh" :loading="loading">刷新</el-button>-->
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="table-header">
          <div class="header-left">
            <span class="table-title">设备列表</span>
            <el-tag type="info" size="small" class="ml-2">共 {{ total }} 台设备</el-tag>
          </div>
          <div class="header-right">
            <el-button-group>
              <el-button :icon="Grid" @click="viewMode = 'table'" :type="viewMode === 'table' ? 'primary' : ''" />
              <el-button :icon="Menu" @click="viewMode = 'card'" :type="viewMode === 'card' ? 'primary' : ''" />
            </el-button-group>
          </div>
        </div>
      </template>

      <!-- 表格视图 -->
      <div v-if="viewMode === 'table'">
        <el-table
            v-loading="loading"
            :data="doorDevices"
            border
            stripe
            highlight-current-row
            @row-click="handleView"
            :row-class-name="getRowClassName"
            element-loading-text="正在加载设备数据..."
        >
          <el-table-column label="序号" type="index" align="center" width="60">
            <template #default="scope">
              {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column label="设备信息" min-width="280">
            <template #default="scope">
              <div class="device-info">
                <div class="device-name">
                  <el-icon class="device-icon"><Lock /></el-icon>
                  <span class="name-text">{{ scope.row.name }}</span>
                </div>
                <div class="device-details">
                  <el-tag size="small" type="primary">{{ scope.row.devTypeDesc }}</el-tag>
                  <span class="serial-num">{{ scope.row.devSerialNum }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="网络信息" align="center" width="140">
            <template #default="scope">
              <div class="network-info">
                <div class="ip-address">
                  <el-icon><Monitor /></el-icon>
                  <span>{{ scope.row.ip }}</span>
                </div>
                <div class="port">端口: {{ scope.row.port }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="所属区域" align="center" width="120">
            <template #default="scope">
              <div class="region-info">
                <el-tag type="success" size="small">{{ scope.row.regionName }}</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="容量信息" align="center" width="160">
            <template #default="scope">
              <div class="capacity-info">
                <div class="capacity-item">
                  <el-icon><CreditCard /></el-icon>
                  <span>卡片: {{ formatNumber(scope.row.cardCapacity) }}</span>
                </div>
                <div class="capacity-item">
                  <el-icon><User /></el-icon>
                  <span>人脸: {{ formatNumber(scope.row.faceCapacity) }}</span>
                </div>
                <div class="capacity-item">
                  <el-icon><Pointer /></el-icon>
                  <span>指纹: {{ formatNumber(scope.row.fingerCapacity) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="门禁数量" align="center" width="100">
            <template #default="scope">
              <el-tag type="warning" size="large">{{ scope.row.doorCapacity }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="制造商" align="center" width="100">
            <template #default="scope">
              <el-tag :type="getManufacturerType(scope.row.manufacturer)" size="small">
                {{ formatManufacturer(scope.row.manufacturer) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="更新时间" align="center" width="160">
            <template #default="scope">
              <div class="time-info">
                <el-icon><Clock /></el-icon>
                <span>{{ formatTime(scope.row.updateTime) }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="200" fixed="right">
            <template #default="scope">
              <el-button-group>
                <el-button type="primary" size="small" :icon="View" @click.stop="handleView(scope.row)">
                  详情
                </el-button>
                <el-button type="success" disabled size="small" :icon="Setting" @click.stop="handleConfig(scope.row)">
                  配置
                </el-button>
<!--                <el-button type="warning" size="small" :icon="Monitor" @click.stop="handleMonitor(scope.row)">
                  监控
                </el-button>-->
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 卡片视图 -->
      <div v-else class="card-view">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="device in doorDevices" :key="device.indexCode">
            <div class="device-card" @click="handleView(device)">
              <div class="card-header">
                <div class="device-status online">
                  <span class="status-dot"></span>
                  <span>在线</span>
                </div>
                <el-dropdown @command="(command) => handleCardCommand(command, device)">
                  <el-button type="text" :icon="MoreFilled" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="config" :icon="Setting">配置</el-dropdown-item>
                      <el-dropdown-item command="monitor" :icon="Monitor">监控</el-dropdown-item>
                      <el-dropdown-item command="delete" :icon="Delete" divided>删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="card-content">
                <div class="device-name">{{ device.name }}</div>
                <div class="device-model">{{ device.devTypeDesc }}</div>
                <div class="device-ip">{{ device.ip }}:{{ device.port }}</div>
                <div class="device-region">{{ device.regionName }}</div>
              </div>
              <div class="card-footer">
                <div class="capacity-summary">
                  <span>卡片: {{ formatNumber(device.cardCapacity) }}</span>
                  <span>人脸: {{ formatNumber(device.faceCapacity) }}</span>
                  <span>门数: {{ device.doorCapacity }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 分页器 -->
      <div class="pagination-wrapper">
        <el-pagination
            v-show="total > 0"
            v-model:current-page="queryParams.pageNo"
            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"
            background
        />
      </div>
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialog" title="设备详情" width="900px" destroy-on-close>
      <div class="device-detail">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="基本信息" name="basic">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="设备名称">
                <el-tag type="primary">{{ currentDevice.name }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="设备型号">{{ currentDevice.devTypeDesc }}</el-descriptions-item>
              <el-descriptions-item label="序列号" :span="2">
                <el-input :value="currentDevice.devSerialNum" readonly>
                  <template #append>
                    <el-button :icon="CopyDocument" @click="copyToClipboard(currentDevice.devSerialNum)" />
                  </template>
                </el-input>
              </el-descriptions-item>
              <el-descriptions-item label="IP地址">{{ currentDevice.ip }}</el-descriptions-item>
              <el-descriptions-item label="端口">{{ currentDevice.port }}</el-descriptions-item>
              <el-descriptions-item label="所属区域">{{ currentDevice.regionName }}</el-descriptions-item>
              <el-descriptions-item label="制造商">
                <el-tag :type="getManufacturerType(currentDevice.manufacturer)">
                  {{ formatManufacturer(currentDevice.manufacturer) }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <el-tab-pane label="容量信息" name="capacity">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="capacity-card">
                  <div class="capacity-icon card">
                    <el-icon><CreditCard /></el-icon>
                  </div>
                  <div class="capacity-info">
                    <div class="capacity-number">{{ formatNumber(currentDevice.cardCapacity) }}</div>
                    <div class="capacity-label">卡片容量</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="capacity-card">
                  <div class="capacity-icon face">
                    <el-icon><User /></el-icon>
                  </div>
                  <div class="capacity-info">
                    <div class="capacity-number">{{ formatNumber(currentDevice.faceCapacity) }}</div>
                    <div class="capacity-label">人脸容量</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="capacity-card">
                  <div class="capacity-icon finger">
                    <el-icon><Pointer /></el-icon>
                  </div>
                  <div class="capacity-info">
                    <div class="capacity-number">{{ formatNumber(currentDevice.fingerCapacity) }}</div>
                    <div class="capacity-label">指纹容量</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-4">
              <el-col :span="12">
                <div class="capacity-card">
                  <div class="capacity-icon door">
                    <el-icon><House /></el-icon>
                  </div>
                  <div class="capacity-info">
                    <div class="capacity-number">{{ currentDevice.doorCapacity }}</div>
                    <div class="capacity-label">门禁数量</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="capacity-card">
                  <div class="capacity-icon algorithm">
                    <el-icon><Cpu /></el-icon>
                  </div>
                  <div class="capacity-info">
                    <div class="capacity-number">{{ currentDevice.modelAlgorithms || 'N/A' }}</div>
                    <div class="capacity-label">算法版本</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="功能支持" name="capability">
            <div class="capability-list">
              <el-row :gutter="10">
                <el-col :span="8" v-for="capability in parseCapabilities(currentDevice.capability)" :key="capability">
                  <div class="capability-item">
                    <el-icon class="capability-icon"><Check /></el-icon>
                    <span>{{ formatCapability(capability) }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <el-tab-pane label="时间信息" name="time">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="创建时间">
                <div class="time-item">
                  <el-icon><Clock /></el-icon>
                  <span>{{ formatTime(currentDevice.createTime) }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">
                <div class="time-item">
                  <el-icon><Refresh /></el-icon>
                  <span>{{ formatTime(currentDevice.updateTime) }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="数据版本">{{ currentDevice.dataVersion }}</el-descriptions-item>
              <el-descriptions-item label="排序">{{ currentDevice.sort }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialog = false">关闭</el-button>
          <el-button type="primary" @click="handleConfig(currentDevice)">配置设备</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 配置弹窗 -->
    <el-dialog v-model="configDialog" title="设备配置" width="600px" destroy-on-close>
      <el-form :model="configForm" label-width="120px">
        <el-form-item label="设备名称">
          <el-input v-model="configForm.name" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input v-model="configForm.ip" placeholder="请输入IP地址" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input-number v-model="configForm.port" :min="1" :max="65535" />
        </el-form-item>
        <el-form-item label="所属区域">
          <el-select v-model="configForm.regionName" placeholder="请选择区域" style="width: 100%">
            <el-option
                v-for="region in regionOptions"
                :key="region.value"
                :label="region.label"
                :value="region.value"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="configDialog = false">取消</el-button>
        <el-button type="primary" @click="saveConfig" :loading="configLoading">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AccessControl">
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Search,
  Refresh,
  Plus,
  Download,
  Lock,
  Monitor,
  VideoCamera,
  User,
  House,
  View,
  Setting,
  Grid,
  Menu,
  Clock,
  CreditCard,
  Pointer,
  Check,
  Cpu,
  CopyDocument,
  Delete,
  MoreFilled
} from '@element-plus/icons-vue';
import axios from 'axios';

// 响应式变量
const queryRef = ref(null);
const doorDevices = ref([]);
const loading = ref(false);
const total = ref(0);
const detailDialog = ref(false);
const configDialog = ref(false);
const currentDevice = ref({});
const viewMode = ref('table');
const activeTab = ref('basic');
const configLoading = ref(false);

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  regionName: '',
  devTypeDesc: ''
});

// 配置表单
const configForm = reactive({
  name: '',
  ip: '',
  port: 8000,
  regionName: ''
});

// 计算属性
const hikVisionCount = computed(() => {
  return doorDevices.value.filter(device => device.manufacturer === 'hikvision').length;
});

const totalCapacity = computed(() => {
  return doorDevices.value.reduce((sum, device) => sum + (device.cardCapacity || 0), 0);
});

const totalDoors = computed(() => {
  return doorDevices.value.reduce((sum, device) => sum + (device.doorCapacity || 0), 0);
});

// 选项数据
const regionOptions = ref([]);
const modelOptions = ref([]);

/*
onMounted(() => {
  getList();
});
*/

// 获取门禁设备列表
const getList = async () => {
  try {
    loading.value = true;
    const params = {
      pageNo: queryParams.pageNo,
      pageSize: queryParams.pageSize,
      name: queryParams.name,
      regionName: queryParams.regionName,
      devTypeDesc: queryParams.devTypeDesc
    };

    const response = await axios.get(`${__LOCAL_API__}/Hikvision/getAcsDeviceSearch`, { params });

    if (response.data.code === 200) {
      doorDevices.value = response.data.data.list || [];
      total.value = response.data.data.total || 0;

      // 提取选项数据
      extractOptions();
    } else {
      ElMessage.error(response.data.message || '获取数据失败');
    }
  } catch (error) {
    console.error('获取数据失败:', error);
    ElMessage.error('获取门禁设备数据失败');
  } finally {
    loading.value = false;
  }
};

// 提取选项数据
const extractOptions = () => {
  const regions = [...new Set(doorDevices.value.map(device => device.regionName))];
  const models = [...new Set(doorDevices.value.map(device => device.devTypeDesc))];

  regionOptions.value = regions.map(region => ({ label: region, value: region }));
  modelOptions.value = models.map(model => ({ label: model, value: model }));
};

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

// 重置
const resetQuery = () => {
  queryRef.value?.resetFields();
  Object.assign(queryParams, {
    pageNo: 1,
    pageSize: 10,
    name: '',
    regionName: '',
    devTypeDesc: ''
  });
  handleQuery();
};

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

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

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

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

// 配置设备
const handleConfig = (row) => {
  currentDevice.value = row;
  Object.assign(configForm, {
    name: row.name,
    ip: row.ip,
    port: parseInt(row.port),
    regionName: row.regionName
  });
  configDialog.value = true;
};

// 监控设备
const handleMonitor = (row) => {
  ElMessage.info(`正在打开设备监控: ${row.name}`);
};

// 卡片命令处理
const handleCardCommand = (command, device) => {
  switch (command) {
    case 'config':
      handleConfig(device);
      break;
    case 'monitor':
      handleMonitor(device);
      break;
    case 'delete':
      handleDelete(device);
      break;
  }
};

// 删除设备
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
        `确定要删除设备"${row.name}"吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    );
    ElMessage.success('删除成功');
    getList();
  } catch {
    ElMessage.info('已取消删除');
  }
};

// 保存配置
const saveConfig = async () => {
  configLoading.value = true;
  try {
    // 模拟保存
    await new Promise(resolve => setTimeout(resolve, 1000));
    ElMessage.success('配置保存成功');
    configDialog.value = false;
    getList();
  } catch (error) {
    ElMessage.error('保存失败');
  } finally {
    configLoading.value = false;
  }
};

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

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

// 复制到剪贴板
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success('已复制到剪贴板');
  } catch (err) {
    ElMessage.error('复制失败');
  }
};

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

const formatNumber = (num) => {
  if (!num) return '0';
  return num.toLocaleString();
};

const formatManufacturer = (manufacturer) => {
  const manufacturerMap = {
    'hikvision': '海康威视',
    'dahua': '大华',
    'uniview': '宇视'
  };
  return manufacturerMap[manufacturer] || manufacturer;
};

const getManufacturerType = (manufacturer) => {
  const typeMap = {
    'hikvision': 'primary',
    'dahua': 'success',
    'uniview': 'warning'
  };
  return typeMap[manufacturer] || 'info';
};

const getRowClassName = ({ row }) => {
  return 'clickable-row';
};

// 解析功能支持
const parseCapabilities = (capability) => {
  if (!capability) return [];
  return capability.split('@').filter(cap => cap.trim() && cap.startsWith('support_'));
};

const formatCapability = (capability) => {
  const capabilityMap = {
    'support_485': 'RS485通信',
    'support_antisneak': '反潜回',
    'support_card': '卡片识别',
    'support_face': '人脸识别',
    'support_finger': '指纹识别',
    'support_doorstatus': '门状态检测',
    'support_doorlock': '门锁控制',
    'support_multicard': '多卡认证',
    'support_leadercard': '首卡开门',
    'support_m1cardEncrypt': 'M1卡加密',
    'support_person': '人员管理',
    'support_cardtype': '卡类型管理',
    'support_eventlink': '事件联动',
    'support_publish': '信息发布',
    'support_readerverify': '读卡器验证',
    'support_biosignature': '生物特征',
    'support_snapcapcfg': '抓拍配置',
    'support_async_importModelDatas': '异步导入模型',
    'support_async_importPicDatas': '异步导入图片'
  };
  return capabilityMap[capability] || capability.replace('support_', '');
};
</script>

<style scoped>
.door-access-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

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

.header-left {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.title-icon {
  font-size: 32px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 8px;
}

.page-subtitle {
  font-size: 16px;
  opacity: 0.9;
  font-weight: 400;
}

.header-right {
  display: flex;
  gap: 12px;
}

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

.stats-card {
  display: flex;
  align-items: center;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

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

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

.stats-icon.hikvision {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stats-icon.capacity {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stats-icon.doors {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-content {
  flex: 1;
}

.stats-number {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 4px;
}

.stats-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

/* 搜索卡片 */
.search-card {
  margin-bottom: 2px;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.08);
}

.search-card :deep(.el-card__body) {
  padding: 15px 20px 2px 20px !important;
}

/* 表格卡片 */
.table-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.table-card :deep(.el-card__header) {
  padding: 24px;
  border-bottom: 1px solid #f0f2f5;
}

.table-card :deep(.el-card__body) {
  padding: 0;
}

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

.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

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

/* 表格样式 */
:deep(.el-table) {
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

:deep(.el-table .clickable-row) {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

:deep(.el-table .clickable-row:hover) {
  background-color: #f8f9ff !important;
}

.device-info {
  padding: 8px 0;
}

.device-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.device-icon {
  color: #667eea;
  font-size: 16px;
}

.name-text {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
}

.device-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.serial-num {
  font-size: 12px;
  color: #7f8c8d;
  font-family: 'Courier New', monospace;
}

.network-info {
  text-align: center;
}

.ip-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.port {
  font-size: 12px;
  color: #7f8c8d;
}

.region-info {
  text-align: center;
}

.capacity-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.capacity-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #7f8c8d;
}

.capacity-item .el-icon {
  font-size: 14px;
  color: #667eea;
}

.time-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: #7f8c8d;
}

/* 卡片视图 */
.card-view {
  padding: 24px;
}

.device-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.device-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #667eea;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.device-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #27ae60;
  font-weight: 600;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #27ae60;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
  }
}

.card-content {
  margin-bottom: 16px;
}

.card-content .device-name {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.card-content .device-model {
  font-size: 14px;
  color: #667eea;
  margin-bottom: 4px;
}

.card-content .device-ip {
  font-size: 12px;
  color: #7f8c8d;
  font-family: 'Courier New', monospace;
  margin-bottom: 4px;
}

.card-content .device-region {
  font-size: 12px;
  color: #e67e22;
  font-weight: 500;
}

.card-footer {
  border-top: 1px solid #f0f2f5;
  padding-top: 12px;
}

.capacity-summary {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #7f8c8d;
}

/* 分页 */
.pagination-wrapper {
  padding: 24px;
  display: flex;
  justify-content: flex-end;
  background: #fafbfc;
  border-radius: 0 0 16px 16px;
}

/* 详情弹窗 */
.device-detail :deep(.el-tabs__content) {
  padding: 24px;
}

.capacity-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: 12px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.capacity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}

.capacity-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 16px;
  color: white;
}

.capacity-icon.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.capacity-icon.face {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.capacity-icon.finger {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.capacity-icon.door {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.capacity-icon.algorithm {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.capacity-number {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 4px;
}

.capacity-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

/* 功能支持 */
.capability-list {
  padding: 16px;
}

.capability-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8f9ff;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.capability-item:hover {
  background: #e8f4fd;
  transform: translateX(4px);
}

.capability-icon {
  color: #27ae60;
  font-size: 16px;
}

/* 时间信息 */
.time-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #2c3e50;
}

.time-item .el-icon {
  color: #667eea;
}

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

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .door-access-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px;
  }

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

  .stats-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

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

  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .capacity-summary {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 24px;
  }

  .stats-number {
    font-size: 28px;
  }

  .device-card {
    padding: 16px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-right: 0;
    margin-bottom: 16px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .door-access-container {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }

  .stats-card,
  .search-card,
  .table-card,
  .device-card {
    background: #34495e;
    color: #ecf0f1;
  }

  .stats-number,
  .table-title,
  .name-text {
    color: #ecf0f1;
  }

  .capacity-card {
    background: linear-gradient(135deg, #3a4a5c 0%, #2c3e50 100%);
  }

  .capability-item {
    background: #3a4a5c;
  }

  .capability-item:hover {
    background: #4a5a6c;
  }
}

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

  .table-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  .door-access-container {
    background: white;
    padding: 0;
  }
}

/* 加载动画优化 */
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}

:deep(.el-loading-spinner) {
  margin-top: -25px;
}

:deep(.el-loading-text) {
  color: #667eea;
  font-weight: 500;
}

/* 按钮组优化 */
:deep(.el-button-group) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-button-group .el-button) {
  border: none;
  padding: 8px 12px;
}

:deep(.el-button-group .el-button:hover) {
  background-color: #667eea;
  color: white;
}

/* 标签优化 */
:deep(.el-tag) {
  border: none;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
}

:deep(.el-tag--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

:deep(.el-tag--success) {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

:deep(.el-tag--info) {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #2c3e50;
}

/* 输入框优化 */
:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
  border-color: #667eea;
}

/* 选择器优化 */
:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
}

:deep(.el-select-dropdown) {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: none;
}

/* 分页器优化 */
:deep(.el-pagination) {
  gap: 8px;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 8px;
  margin: 0 2px;
  transition: all 0.3s ease;
}

:deep(.el-pagination .el-pager li:hover) {
  background-color: #667eea;
  color: white;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  background-color: #667eea;
  color: white;
}

/* 对话框优化 */
:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 20px;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 24px;
  background-color: #fafbfc;
}

/* 描述列表优化 */
:deep(.el-descriptions) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-descriptions__header) {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

:deep(.el-descriptions__body) {
  background: white;
}

:deep(.el-descriptions-item__label) {
  background-color: #f8f9ff;
  font-weight: 600;
  color: #2c3e50;
}

/* 标签页优化 */
:deep(.el-tabs--border-card) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:deep(.el-tabs--border-card .el-tabs__header) {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-bottom: 1px solid #e8f4fd;
}

:deep(.el-tabs--border-card .el-tabs__item) {
  border: none;
  color: #7f8c8d;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-tabs--border-card .el-tabs__item.is-active) {
  background: white;
  color: #667eea;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
}

:deep(.el-tabs--border-card .el-tabs__item:hover) {
  color: #667eea;
}

/* 表单优化 */
:deep(.el-form-item__label) {
  font-weight: 600;
  color: #2c3e50;
}

:deep(.el-form-item__error) {
  color: #e74c3c;
  font-size: 12px;
  font-weight: 500;
}

/* 数字输入框优化 */
:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__wrapper) {
  border-radius: 8px;
}

/* 下拉菜单优化 */
:deep(.el-dropdown-menu) {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 8px;
}

:deep(.el-dropdown-menu__item) {
  border-radius: 6px;
  margin: 2px 0;
  transition: all 0.2s ease;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: #667eea;
  color: white;
}

/* 消息框优化 */
:deep(.el-message) {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: none;
}

:deep(.el-message--success) {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

:deep(.el-message--error) {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

:deep(.el-message--info) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

:deep(.el-message--warning) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

/* 确认框优化 */
:deep(.el-message-box) {
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

:deep(.el-message-box__header) {
  padding: 24px 24px 16px;
}

:deep(.el-message-box__title) {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

:deep(.el-message-box__content) {
  padding: 0 24px 16px;
}

:deep(.el-message-box__btns) {
  padding: 16px 24px 24px;
}

/* 滚动条优化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from {
  transform: translateX(-100%);
}

.slide-leave-to {
  transform: translateX(100%);
}

/* 骨架屏效果 */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* 无数据状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
}

.empty-state .empty-icon {
  font-size: 64px;
  color: #bdc3c7;
  margin-bottom: 16px;
}

.empty-state .empty-text {
  font-size: 16px;
  margin-bottom: 8px;
}

.empty-state .empty-description {
  font-size: 14px;
  color: #95a5a6;
}

/* 加载状态优化 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #667eea;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e8f4fd;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 14px;
  font-weight: 500;
}
</style>
