<template>
  <div class="access-device-container">

    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="设备名称" prop="name">
              <el-input
                  v-model="queryParams.name"
                  placeholder="请输入门禁设备名称"
                  clearable
                  :prefix-icon="Search"
                  @keyup.enter="handleQuery"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
              <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="never">
<!--      <div class="table-header">
        <span class="table-title">门禁设备列表</span>
        <div class="table-tools">
          <el-tooltip content="批量控制" placement="top">
            <el-button
                type="warning"
                :icon="Operation"
                size="small"
                @click="handleBatchControl"
                :disabled="selectedDevices.length === 0"
            >
              批量控制 ({{ selectedDevices.length }})
            </el-button>
          </el-tooltip>
          <el-tooltip content="刷新数据" placement="top">
            <el-button :icon="Refresh" circle size="small" @click="getList" />
          </el-tooltip>
        </div>
      </div>-->

      <el-table
          v-loading="loading"
          :data="deviceList"
          border
          stripe
          highlight-current-row
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />

        <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="设备信息" align="left" min-width="250">
          <template #default="scope">
            <div class="device-info">
              <div class="device-icon">
                <el-icon size="24" color="#409eff"><Lock /></el-icon>
              </div>
              <div class="device-details">
                <div class="device-name">{{ scope.row.name }}</div>
                <div class="device-code">{{ scope.row.indexCode }}</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="门号/通道" align="center" width="120">
          <template #default="scope">
            <div class="door-info">
              <el-tag size="small" type="primary">门{{ scope.row.doorNo }}</el-tag>
              <el-tag size="small" type="info" style="margin-top: 4px;">通道{{ scope.row.channelNo }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="所属区域" align="left" min-width="200" show-overflow-tooltip>
          <template #default="scope">
            <div class="region-info">
              <el-icon><Location /></el-icon>
              <span>{{ scope.row.regionPathName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="设备状态" align="center" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.state)" effect="dark">
              <el-icon v-if="scope.row.state === 0"><Minus /></el-icon>
              <el-icon v-else-if="scope.row.state === 1"><Unlock /></el-icon>
              <el-icon v-else-if="scope.row.state === 2"><Lock /></el-icon>
              <el-icon v-else><Close /></el-icon>
              {{ getStatusText(scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="协议类型" align="center" width="120">
          <template #default="scope">
            <el-tag size="small" type="warning">{{ scope.row.treatyType }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" width="180" sortable>
          <template #default="scope">
            <div class="time-info">
              <el-icon><Clock /></el-icon>
              {{ formatDateTime(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-dropdown
                  trigger="click"
                  @command="(command) => handleControl(scope.row, command)"
                  :disabled="scope.row.state === 3"
              >
                <el-button
                    type="primary"
                    size="small"
                    :icon="Operation"
                    :disabled="scope.row.state === 3"
                    :loading="controlLoading[scope.row.indexCode]"
                >
                  控制
                  <el-icon class="el-icon--right">
                    <ArrowDown/>
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <!-- 移除 :icon 属性，只保留内容中的图标 -->
                    <el-dropdown-item command="0">
                      <span class="control-item">
                        <el-icon color="#67c23a"><Unlock/></el-icon>
                        常开
                      </span>
                    </el-dropdown-item>
                    <el-dropdown-item command="1">
                      <span class="control-item">
                        <el-icon color="#409eff"><Lock/></el-icon>
                        门闭
                      </span>
                    </el-dropdown-item>
                    <el-dropdown-item command="2">
                      <span class="control-item">
                        <el-icon color="#e6a23c"><Unlock/></el-icon>
                        门开
                      </span>
                    </el-dropdown-item>
                    <el-dropdown-item command="3">
                      <span class="control-item">
                        <el-icon color="#f56c6c"><Lock/></el-icon>
                        常闭
                      </span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

              <el-button
                  link
                  type="primary"
                  :icon="View"
                  @click="handleView(scope.row)"
                  size="small"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <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="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备名称">{{ currentDevice.name }}</el-descriptions-item>
        <el-descriptions-item label="设备编码">{{ currentDevice.indexCode }}</el-descriptions-item>
        <el-descriptions-item label="门号">{{ currentDevice.doorNo }}</el-descriptions-item>
        <el-descriptions-item label="通道号">{{ currentDevice.channelNo }}</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <el-tag :type="getStatusType(currentDevice.state)">
            {{ getStatusText(currentDevice.state) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="协议类型">{{ currentDevice.treatyType }}</el-descriptions-item>
        <el-descriptions-item label="所属区域" :span="2">{{ currentDevice.regionPathName }}</el-descriptions-item>
        <el-descriptions-item label="父级设备">{{ currentDevice.parentIndexCode || '无' }}</el-descriptions-item>
        <el-descriptions-item label="控制器ID">{{ currentDevice.controlOneId || '无' }}</el-descriptions-item>
        <el-descriptions-item label="读卡器(进)">{{ currentDevice.readerInId || '无' }}</el-descriptions-item>
        <el-descriptions-item label="读卡器(出)">{{ currentDevice.readerOutId || '无' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDateTime(currentDevice.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDateTime(currentDevice.updateTime) }}</el-descriptions-item>
        <el-descriptions-item label="安装位置" :span="2">{{ currentDevice.installLocation || '未设置' }}</el-descriptions-item>
        <el-descriptions-item label="设备描述" :span="2">{{ currentDevice.description || '无' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 批量控制对话框 -->
    <el-dialog v-model="batchControlDialog" title="批量控制设备" width="600px">
      <div class="batch-control-content">
        <div class="selected-devices">
          <h4>已选择设备 ({{ selectedDevices.length }}台)</h4>
          <div class="device-list">
            <el-tag
                v-for="device in selectedDevices"
                :key="device.indexCode"
                size="small"
                closable
                @close="removeSelectedDevice(device)"
                style="margin: 4px;"
            >
              {{ device.name }}
            </el-tag>
          </div>
        </div>

        <el-divider />

        <div class="control-options">
          <h4>选择控制类型</h4>
          <el-radio-group v-model="batchControlType" size="large">
            <el-radio-button label="0">
              <el-icon color="#67c23a"><Unlock /></el-icon>
              常开
            </el-radio-button>
            <el-radio-button label="1">
              <el-icon color="#409eff"><Lock /></el-icon>
              门闭
            </el-radio-button>
            <el-radio-button label="2">
              <el-icon color="#e6a23c"><Unlock /></el-icon>
              门开
            </el-radio-button>
            <el-radio-button label="3">
              <el-icon color="#f56c6c"><Lock /></el-icon>
              常闭
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="batchControlDialog = false">取消</el-button>
          <el-button
              type="primary"
              @click="confirmBatchControl"
              :loading="batchControlLoading"
              :disabled="!batchControlType"
          >
            确认控制
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 控制结果对话框 -->
    <el-dialog v-model="controlResultDialog" title="控制结果" width="500px">
      <div class="control-result">
        <div class="result-header">
          <el-icon
              :size="48"
              :color="controlResult.success ? '#67c23a' : '#f56c6c'"
          >
            <Check v-if="controlResult.success" />
            <Close v-else />
          </el-icon>
          <h3>{{ controlResult.success ? '控制成功' : '控制失败' }}</h3>
        </div>
        <div class="result-content">
          <p>{{ controlResult.message }}</p>
          <div v-if="controlResult.details" class="result-details">
            <el-collapse>
              <el-collapse-item title="详细信息" name="details">
                <pre>{{ controlResult.details }}</pre>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="controlResultDialog = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AccessControljl">
import { ref, reactive, onMounted } from "vue";
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
// 导入图标
import {
  Lock,
  Unlock,
  Minus,
  Check,
  Close,
  DataLine,
  Search,
  Refresh,
  Clock,
  View,
  Location,
  Operation,
  ArrowDown
} from '@element-plus/icons-vue';

// 响应式变量
const queryRef = ref(null);
const deviceList = ref([]);
const loading = ref(false);
const total = ref(0);
const detailDialog = ref(false);
const currentDevice = ref({});

// 控制相关变量
const selectedDevices = ref([]);
const controlLoading = ref({});
const batchControlDialog = ref(false);
const batchControlType = ref('');
const batchControlLoading = ref(false);
const controlResultDialog = ref(false);
const controlResult = ref({
  success: false,
  message: '',
  details: null
});

// 统计数据
const statistics = reactive({
  totalDevices: 0,
  onlineCount: 0,
  offlineCount: 0,
  onlineRate: 0
});

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

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

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

    if (response.data.code === 200) {
      deviceList.value = response.data.data.list || [];
      total.value = response.data.data.total || 0;
      updateStatistics();
    } else {
      ElMessage.error(response.data.message || '获取数据失败');
    }
  } catch (error) {
    console.error('获取数据失败:', error);
    ElMessage.error('网络请求失败，请检查网络连接');
  } finally {
    loading.value = false;
  }
};

// 更新统计数据
const updateStatistics = () => {
  const devices = deviceList.value;
  statistics.totalDevices = total.value;

  // 根据门状态定义更新统计：0 初始状态，1 开门状态，2关门状态，3离线状态
  statistics.onlineCount = devices.filter(d => d.state !== 3).length; // 非离线状态
  statistics.offlineCount = devices.filter(d => d.state === 3).length; // 离线状态
  statistics.onlineRate = statistics.totalDevices > 0
      ? Math.round((statistics.onlineCount / statistics.totalDevices) * 100)
      : 0;
};

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

// 重置按钮操作
const resetQuery = () => {
  queryRef.value?.resetFields();
  queryParams.name = '';
  handleQuery();
};

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

// 表格选择变化
const handleSelectionChange = (selection) => {
  selectedDevices.value = selection.filter(device => device.state !== 3); // 过滤掉离线设备
};

// 移除选中设备
const removeSelectedDevice = (device) => {
  const index = selectedDevices.value.findIndex(d => d.indexCode === device.indexCode);
  if (index > -1) {
    selectedDevices.value.splice(index, 1);
  }
};

// 单个设备控制
const handleControl = async (device, controlType) => {
  try {
    // 确认对话框
    const controlTypeText = getControlTypeText(controlType);
    const result = await ElMessageBox.confirm(
        `确定要对设备 "${device.name}" 执行 "${controlTypeText}" 操作吗？`,
        '确认控制',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'control-confirm-dialog'
        }
    );

    if (result === 'confirm') {
      await executeControl([device.indexCode], controlType);
    }
  } catch (error) {
    // 用户取消操作
    if (error === 'cancel') {
      return;
    }
    console.error('控制操作失败:', error);
    showControlResult(false, '控制操作失败', error.message);
  }
};

// 批量控制
const handleBatchControl = () => {
  if (selectedDevices.value.length === 0) {
    ElMessage.warning('请先选择要控制的设备');
    return;
  }
  batchControlType.value = '';
  batchControlDialog.value = true;
};

// 确认批量控制
const confirmBatchControl = async () => {
  if (!batchControlType.value) {
    ElMessage.warning('请选择控制类型');
    return;
  }

  try {
    const controlTypeText = getControlTypeText(batchControlType.value);
    const result = await ElMessageBox.confirm(
        `确定要对选中的 ${selectedDevices.value.length} 台设备执行 "${controlTypeText}" 操作吗？`,
        '确认批量控制',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'control-confirm-dialog'
        }
    );

    if (result === 'confirm') {
      const doorIndexCodes = selectedDevices.value.map(device => device.indexCode);
      await executeControl(doorIndexCodes, batchControlType.value);
      batchControlDialog.value = false;
    }
  } catch (error) {
    if (error === 'cancel') {
      return;
    }
    console.error('批量控制失败:', error);
    showControlResult(false, '批量控制失败', error.message);
  }
};

// 执行控制操作
const executeControl = async (doorIndexCodes, controlType) => {
  try {
    // 设置加载状态
    if (doorIndexCodes.length === 1) {
      controlLoading.value[doorIndexCodes[0]] = true;
    } else {
      batchControlLoading.value = true;
    }

    // 构建 GET 请求参数
    const params = {
      doorIndexCodes: doorIndexCodes.join(','), // 将数组转换为逗号分隔的字符串
      controlType: parseInt(controlType)
    };

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

    if (response.data.code === 200) {
      const controlTypeText = getControlTypeText(controlType);
      const deviceCount = doorIndexCodes.length;
      const message = deviceCount === 1
          ? `设备控制成功，已执行"${controlTypeText}"操作`
          : `批量控制成功，已对 ${deviceCount} 台设备执行"${controlTypeText}"操作`;

      showControlResult(true, message, response.data.data);

      // 刷新设备列表
      setTimeout(() => {
        getList();
      }, 1000);

      // 清空选择
      if (deviceCount > 1) {
        selectedDevices.value = [];
      }
    } else {
      showControlResult(false, response.data.message || '控制操作失败', response.data);
    }
  } catch (error) {
    console.error('控制请求失败:', error);
    showControlResult(false, '网络请求失败，请检查网络连接', error.response?.data);
  } finally {
    // 清除加载状态
    if (doorIndexCodes.length === 1) {
      controlLoading.value[doorIndexCodes[0]] = false;
    } else {
      batchControlLoading.value = false;
    }
  }
};

// 显示控制结果
const showControlResult = (success, message, details = null) => {
  controlResult.value = {
    success,
    message,
    details: details ? JSON.stringify(details, null, 2) : null
  };
  controlResultDialog.value = true;
};

// 获取控制类型文本
const getControlTypeText = (controlType) => {
  const controlTypeMap = {
    '0': '常开',
    '1': '门闭',
    '2': '门开',
    '3': '常闭'
  };
  return controlTypeMap[controlType] || '未知';
};

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

// 当前页改变
const handleCurrentChange = (val) => {
  queryParams.pageNo = val;
  getList();
};

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-';
  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 获取状态标签类型
const getStatusType = (state) => {
  const statusMap = {
    0: 'info',     // 初始状态 - 灰色
    1: 'success',  // 开门状态 - 绿色
    2: 'primary',  // 关门状态 - 蓝色
    3: 'danger'    // 离线状态 - 红色
  };
  return statusMap[state] || 'info';
};

// 获取状态文本
const getStatusText = (state) => {
  const statusMap = {
    0: '初始状态',
    1: '开门状态',
    2: '关门状态',
    3: '离线状态'
  };
  return statusMap[state] || '未知状态';
};

// 表格行样式
const tableRowClassName = ({ row, rowIndex }) => {
  if (row.state === 3) {
    return 'offline-row';  // 离线状态行
  } else if (row.state === 1) {
    return 'open-row';     // 开门状态行
  }
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
};

// 初始化
onMounted(() => {
  getList();
});
</script>

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

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 8px;
        color: #409eff;
      }
    }
  }

  // 统计卡片样式
  .statistics-cards {
    margin-bottom: 20px;

    .stat-card {
      background: #fff;
      border-radius: 12px;
      padding: 24px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      margin-bottom: 10px;
      border: 1px solid #f0f0f0;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.1);
      }

      .stat-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        flex-shrink: 0;

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

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

        &.green {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          color: white;
        }

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

        &.orange {
          background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
          color: #666;
        }
      }

      .stat-content {
        flex: 1;

        .stat-value {
          font-size: 32px;
          font-weight: 700;
          color: #303133;
          line-height: 1;
          margin-bottom: 8px;
        }

        .stat-label {
          font-size: 14px;
          color: #909399;
          font-weight: 500;
        }
      }
    }
  }

  // 搜索卡片样式
  .search-card {
    margin-bottom: 20px;
    border-radius: 16px;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

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

    .el-form-item {
      margin-bottom: 20px;
      width: 100%;
    }
  }

  // 表格卡片样式
  .table-card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;

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

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;

      .table-title {
        font-size: 18px;
        font-weight: 600;
        color: white;
      }

      .table-tools {
        display: flex;
        gap: 12px;
        align-items: center;

        .el-button {
          background: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.3);
          color: white;
          transition: all 0.3s ease;

          &:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
          }

          &:disabled {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }

    .el-table {
      :deep(.el-table__header) {
        th {
          background-color: #fafbfc;
          color: #303133;
          font-weight: 600;
          border-bottom: 2px solid #e4e7ed;
        }
      }

      :deep(.el-table__body) {
        .el-table__row {
          transition: all 0.3s ease;

          &:hover {
            background-color: #f8f9fa !important;
          }

          &.even-row {
            background-color: #fafbfc;
          }

          &.offline-row {
            background-color: #fef0f0;

            &:hover {
              background-color: #fde2e2 !important;
            }
          }

          &.open-row {
            background-color: #f0f9ff;

            &:hover {
              background-color: #e0f2fe !important;
            }
          }
        }
      }
    }

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

      .device-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        flex-shrink: 0;

        .el-icon {
          color: white;
        }
      }

      .device-details {
        text-align: left;
        flex: 1;

        .device-name {
          font-weight: 600;
          color: #303133;
          margin-bottom: 4px;
          font-size: 14px;
          line-height: 1.4;
        }

        .device-code {
          font-size: 12px;
          color: #909399;
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          background: #f5f7fa;
          padding: 2px 6px;
          border-radius: 4px;
          display: inline-block;
        }
      }
    }

    .door-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;

      .el-tag {
        font-weight: 500;
      }
    }

    .region-info {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #606266;

      .el-icon {
        color: #909399;
        flex-shrink: 0;
        font-size: 16px;
      }

      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        line-height: 1.4;
      }
    }

    .time-info {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #606266;
      font-size: 13px;

      .el-icon {
        color: #909399;
        font-size: 14px;
      }
    }

    // 操作按钮样式
    .action-buttons {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;

      .el-dropdown {
        .el-button {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
          color: white;
          font-weight: 500;
          transition: all 0.3s ease;

          &:hover:not(:disabled) {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
          }

          &:disabled {
            background: #c0c4cc;
            color: #ffffff;
            cursor: not-allowed;
          }
        }
      }

      .el-button.is-link {
        color: #667eea;
        font-weight: 500;

        &:hover {
          color: #5a6fd8;
        }
      }
    }

    // 分页器样式
    .pagination-wrapper {
      padding: 24px;
      display: flex;
      justify-content: flex-end;
      background: #fafbfc;
      border-radius: 0 0 16px 16px;
      border-top: 1px solid #e4e7ed;
    }
  }
}

// 控制下拉菜单样式
:deep(.el-dropdown-menu) {
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border: none;
  padding: 8px 0;

  .el-dropdown-menu__item {
    padding: 12px 20px;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px 8px;

    &:hover {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      transform: translateX(4px);
    }

    .control-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;

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

// 批量控制对话框样式
.batch-control-content {
  .selected-devices {
    margin-bottom: 20px;

    h4 {
      color: #303133;
      margin-bottom: 12px;
      font-weight: 600;
    }

    .device-list {
      max-height: 120px;
      overflow-y: auto;
      padding: 12px;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px solid #e4e7ed;

      &::-webkit-scrollbar {
        width: 6px;
      }

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

      &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;

        &:hover {
          background: #a8abb2;
        }
      }
    }
  }

  .control-options {
    h4 {
      color: #303133;
      margin-bottom: 16px;
      font-weight: 600;
    }

    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      .el-radio-button {
        :deep(.el-radio-button__inner) {
          padding: 12px 20px;
          border-radius: 8px;
          font-weight: 500;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          gap: 6px;

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

        &:first-child {
          :deep(.el-radio-button__inner) {
            border-radius: 8px;
          }
        }

        &:last-child {
          :deep(.el-radio-button__inner) {
            border-radius: 8px;
          }
        }

        :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-color: transparent;
          color: white;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
      }
    }
  }
}

// 控制结果对话框样式
.control-result {
  text-align: center;

  .result-header {
    margin-bottom: 24px;

    .el-icon {
      margin-bottom: 16px;
    }

    h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .result-content {
    p {
      font-size: 16px;
      color: #606266;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .result-details {
      text-align: left;

      pre {
        background: #f8f9fa;
        padding: 16px;
        border-radius: 8px;
        font-size: 12px;
        color: #606266;
        max-height: 200px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }
}

// 确认对话框样式
:deep(.control-confirm-dialog) {
  border-radius: 16px;

  .el-message-box__header {
    padding: 24px 24px 16px;

    .el-message-box__title {
      font-weight: 600;
      font-size: 18px;
    }
  }

  .el-message-box__content {
    padding: 0 24px 24px;

    .el-message-box__message {
      font-size: 16px;
      line-height: 1.6;
    }
  }

  .el-message-box__btns {
    padding: 16px 24px 24px;

    .el-button {
      border-radius: 8px;
      font-weight: 500;
      padding: 12px 24px;

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

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

// 响应式设计
@media (max-width: 1200px) {
  .access-device-container {
    .statistics-cards {
      .stat-card {
        .stat-icon {
          width: 56px;
          height: 56px;

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

        .stat-content {
          .stat-value {
            font-size: 28px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .access-device-container {
    padding: 16px;

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

      .page-title {
        font-size: 20px;
      }
    }

    .statistics-cards {
      .el-col {
        margin-bottom: 12px;
      }

      .stat-card {
        padding: 20px;

        .stat-icon {
          width: 48px;
          height: 48px;
          margin-right: 16px;

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

        .stat-content {
          .stat-value {
            font-size: 24px;
          }

          .stat-label {
            font-size: 13px;
          }
        }
      }
    }

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

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

    .table-card {
      .table-header {
        padding: 20px;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;

        .table-title {
          font-size: 16px;
        }

        .table-tools {
          width: 100%;
          justify-content: space-between;
        }
      }

      .el-table {
        font-size: 12px;

        :deep(.el-table__cell) {
          padding: 8px 0;
        }
      }

      .device-info {
        .device-icon {
          width: 40px;
          height: 40px;
        }

        .device-details {
          .device-name {
            font-size: 13px;
          }
          .device-code {
            font-size: 11px;
          }
        }
      }

      .action-buttons {
        flex-direction: column;
        gap: 4px;

        .el-dropdown {
          .el-button {
            font-size: 12px;
            padding: 6px 12px;
          }
        }
      }

      .pagination-wrapper {
        padding: 20px;
        justify-content: center;
      }
    }

    // 移动端批量控制对话框
    .batch-control-content {
      .control-options {
        .el-radio-group {
          flex-direction: column;

          .el-radio-button {
            width: 100%;

            :deep(.el-radio-button__inner) {
              width: 100%;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}

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

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

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

  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.3s; }
  &:nth-child(4) { animation-delay: 0.4s; }
}

// 控制按钮加载动画
.el-button.is-loading {
  animation: pulse 1.5s infinite;
}

// 标签内图标样式
:deep(.el-tag) {
  .el-icon {
    margin-right: 4px;
    font-size: 12px;
  }

  &.el-tag--dark {
    font-weight: 500;
  }
}

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

// 详情对话框样式
:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;

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

    .el-dialog__title {
      color: white;
      font-weight: 600;
      font-size: 18px;
    }

    .el-dialog__headerbtn {
      top: 24px;
      right: 24px;

      .el-dialog__close {
        color: white;
        font-size: 20px;

        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  .el-dialog__body {
    padding: 32px;
  }
}

// 描述列表样式优化
:deep(.el-descriptions) {
  .el-descriptions__body {
    .el-descriptions__table {
      .el-descriptions__cell {
        padding: 16px;

        &.is-bordered-label {
          background-color: #fafbfc;
          font-weight: 600;
          color: #303133;
        }

        &.is-bordered-content {
          color: #606266;
        }
      }
    }
  }
}

// 表格优化
:deep(.el-table) {
  border-radius: 0;

  .el-table__fixed-right {
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06);
  }

  .el-table__border-left-patch {
    border-top: 1px solid #e4e7ed;
  }

  // 选择框样式
  .el-checkbox {
    .el-checkbox__input {
      .el-checkbox__inner {
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover {
          border-color: #667eea;
        }
      }

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

// 分页器优化
:deep(.el-pagination) {
  .el-pagination__total {
    color: #606266;
    font-weight: 500;
  }

  .el-pagination__sizes {
    .el-select {
      .el-input__wrapper {
        border-radius: 8px;
      }
    }
  }

  .btn-prev, .btn-next {
    border-radius: 8px;
    font-weight: 500;
  }

  .el-pager {
    li {
      border-radius: 8px;
      margin: 0 2px;
      font-weight: 500;

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

// 搜索框优化
:deep(.el-input) {
  .el-input__wrapper {
    border-radius: 8px;
    transition: all 0.3s ease;

    &.is-focus {
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }
  }
}

// 按钮优化
:deep(.el-button) {
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;

  &.is-circle {
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  &.is-link {
    &:hover {
      color: #667eea;
    }
  }
}

// 卡片优化
:deep(.el-card) {
  border: none;
  transition: all 0.3s ease;

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

// 表单优化
:deep(.el-form) {
  .el-form-item__label {
    font-weight: 500;
    color: #303133;
  }
}

// 工具提示优化
:deep(.el-tooltip__popper) {
  border-radius: 8px;
  font-size: 12px;
}

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

  .el-select__popper {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
}

// 滚动条优化
:deep(.el-table__body-wrapper) {
  &::-webkit-scrollbar {
    height: 8px;
  }

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

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

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

// 空状态优化
:deep(.el-table__empty-block) {
  padding: 60px 0;

  .el-table__empty-text {
    color: #909399;
    font-size: 14px;
  }
}

// 加载状态优化
:deep(.el-table) {
  .el-loading-spinner {
    .el-loading-text {
      color: #667eea;
      font-weight: 500;
    }

    .circular {
      stroke: #667eea;
    }
  }
}

// 状态标签特殊样式
.el-tag {
  &.el-tag--success.is-dark {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-color: transparent;
  }

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

  &.el-tag--danger.is-dark {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    border-color: transparent;
  }

  &.el-tag--info.is-dark {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border-color: transparent;
    color: #666;
  }

  &.el-tag--warning {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    border-color: transparent;
    color: #d63031;
  }
}

// 消息提示优化
:deep(.el-message) {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);

  &.el-message--success {
    background: rgba(103, 194, 58, 0.9);
  }

  &.el-message--error {
    background: rgba(245, 108, 108, 0.9);
  }

  &.el-message--warning {
    background: rgba(230, 162, 60, 0.9);
  }
}

// 消息框优化
:deep(.el-message-box) {
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

// 折叠面板优化
:deep(.el-collapse) {
  border: none;

  .el-collapse-item {
    .el-collapse-item__header {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      font-weight: 500;
      color: #303133;
      border: none;
      margin-bottom: 8px;

      &:hover {
        background: #e9ecef;
      }

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

    .el-collapse-item__content {
      padding: 16px 0;
      border: none;
    }
  }
}

// 分割线优化
:deep(.el-divider) {
  margin: 24px 0;
  border-color: #e4e7ed;

  &.el-divider--horizontal {
    &::before,
    &::after {
      border-top-color: #e4e7ed;
    }
  }
}

// 标签关闭按钮优化
:deep(.el-tag) {
  .el-tag__close {
    transition: all 0.3s ease;
    border-radius: 50%;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
      color: white;
    }
  }
}

// 打印样式
@media print {
  .access-device-container {
    .page-header,
    .search-card,
    .table-header .table-tools,
    .pagination-wrapper {
      display: none !important;
    }

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

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

    .action-buttons {
      display: none !important;
    }
  }
}

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

    .stat-card {
      background: #2d2d2d;
      border-color: #404040;
      color: #e0e0e0;

      .stat-content {
        .stat-value {
          color: #ffffff;
        }

        .stat-label {
          color: #b0b0b0;
        }
      }
    }

    .search-card,
    .table-card {
      background: #2d2d2d;
      border-color: #404040;

      :deep(.el-card__body) {
        background: #2d2d2d;
      }
    }

    .table-header {
      background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    }

    :deep(.el-table) {
      background-color: #2d2d2d;
      color: #e0e0e0;

      .el-table__header {
        th {
          background-color: #404040;
          color: #ffffff;
        }
      }

      .el-table__body {
        .el-table__row {
          background-color: #2d2d2d;

          &:hover {
            background-color: #404040 !important;
          }

          &.even-row {
            background-color: #353535;
          }
        }
      }
    }

    .pagination-wrapper {
      background: #353535;
    }
  }
}

// 高对比度模式
@media (prefers-contrast: high) {
  .access-device-container {
    .stat-card {
      border: 2px solid #000;
    }

    .search-card,
    .table-card {
      border: 2px solid #000;
    }

    :deep(.el-table) {
      border: 2px solid #000;

      .el-table__header th,
      .el-table__body td {
        border: 1px solid #000;
      }
    }

    .el-tag {
      border: 1px solid #000;
      font-weight: 600;
    }
  }
}

// 减少动画模式
@media (prefers-reduced-motion: reduce) {
  .access-device-container {
    .stat-card,
    :deep(.el-button),
    :deep(.el-card),
    .el-table :deep(.el-table__row) {
      transition: none;
      animation: none;
    }
  }
}

// 控制状态指示器
.control-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;

  &.controlling {
    background: rgba(230, 162, 60, 0.1);
    color: #e6a23c;
    border: 1px solid rgba(230, 162, 60, 0.3);
  }

  &.success {
    background: rgba(103, 194, 58, 0.1);
    color: #67c23a;
    border: 1px solid rgba(103, 194, 58, 0.3);
  }

  &.error {
    background: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
    border: 1px solid rgba(245, 108, 108, 0.3);
  }
}

// 设备状态呼吸灯效果
@keyframes breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.device-status-breathing {
  animation: breathe 2s ease-in-out infinite;
}

// 控制成功提示动画
@keyframes controlSuccess {
  0% {
    transform: scale(1);
    background: #67c23a;
  }
  50% {
    transform: scale(1.1);
    background: #85ce61;
  }
  100% {
    transform: scale(1);
    background: #67c23a;
  }
}

.control-success-animation {
  animation: controlSuccess 0.6s ease-in-out;
}

// 批量选择提示
.batch-selection-tip {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  z-index: 1000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;

  &.show {
    transform: translateY(0);
    opacity: 1;
  }

  .tip-content {
    display: flex;
    align-items: center;
    gap: 12px;

    .tip-text {
      font-weight: 500;
    }

    .tip-count {
      background: rgba(255, 255, 255, 0.2);
      padding: 4px 8px;
      border-radius: 6px;
      font-weight: 600;
    }
  }
}
</style>
