<template>
  <div class="control-command-system">
    <!-- 查询条件区域 -->
    <el-card class="filter-card">
      <el-form :model="queryParams" ref="searchForm" :inline="true" class="search-form">
        <!-- 控制指令条件 -->
        <el-form-item label="指令ID">
          <el-input v-model="queryParams.cmdId" placeholder="请输入指令ID" clearable />
        </el-form-item>

        <el-form-item label="指令类型">
          <el-select v-model="queryParams.cmdType" placeholder="请选择指令类型" clearable style="width: 180px;">
            <el-option label="全部" value="" />
            <el-option label="参数设置" value="SET_PARAM" />
            <el-option label="报警触发" value="TRIGGER_ALARM" />
            <el-option label="设备启停" value="START_STOP" />
            <el-option label="校准操作" value="CALIBRATE" />
            <el-option label="设备重置" value="RESET" />
          </el-select>
        </el-form-item>

        <!-- 执行状态条件 -->
        <el-form-item label="指令状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 180px;">
            <el-option label="全部" value="" />
            <el-option label="待执行" value="PENDING" />
            <el-option label="执行中" value="PROCESSING" />
            <el-option label="成功" value="SUCCESS" />
            <el-option label="失败" value="FAILED" />
            <el-option label="重试中" value="RETRYING" />
            <el-option label="已取消" value="CANCELED" />
          </el-select>
        </el-form-item>

        <!-- 操作审计条件 -->
        <el-form-item label="操作员ID">
          <el-input v-model="queryParams.operatorId" placeholder="请输入操作员ID" clearable />
        </el-form-item>

        <!-- 响应监控条件 -->
        <el-form-item label="设备反馈">
          <el-select v-model="queryParams.feedbackStatus" placeholder="请选择反馈状态" clearable style="width: 180px;">
            <el-option label="全部" value="" />
            <el-option label="正常" value="OK" />
            <el-option label="超时" value="TIMEOUT" />
            <el-option label="错误" value="ERROR" />
          </el-select>
        </el-form-item>

        <!-- 时间范围选择 -->
        <el-form-item label="执行时间">
          <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleDateChange"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
          <el-button type="success" :icon="Download" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <el-statistic title="今日指令总数" :value="stats.todayTotal">
            <template #prefix>
              <el-icon><DocumentCopy /></el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card success-card">
          <el-statistic title="执行成功" :value="stats.successCount">
            <template #prefix>
              <el-icon><CircleCheck /></el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card error-card">
          <el-statistic title="执行失败" :value="stats.failedCount">
            <template #prefix>
              <el-icon><CircleClose /></el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <el-statistic title="平均响应时间" :value="stats.avgResponseTime" suffix="ms">
            <template #prefix>
              <el-icon><Timer /></el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据表格区域 -->
    <el-card class="data-table">
      <el-table
          :data="commandList"
          border
          v-loading="isLoading"
          row-key="cmdId"
          @row-click="handleRowClick"
          :row-class-name="tableRowClassName"
      >
        <el-table-column label="指令ID" prop="cmdId" align="center" width="140" fixed="left" />
        <el-table-column label="目标设备" align="center" >
          <template #default="scope">
            <div class="device-tags">
              <el-tag
                  v-for="device in scope.row.targetDevices"
                  :key="device"
                  size="small"
                  type="info"
                  class="device-tag"
              >
                {{ device }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="指令类型" prop="cmdType" align="center" width="280">
          <template #default="scope">
            <el-tag :type="getCmdTypeColor(scope.row.cmdType)">
              {{ mapCmdType(scope.row.cmdType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="指令状态" prop="status" align="center" width="120">
          <template #default="scope">
            <el-tag
                :type="getStatusColor(scope.row.status)"
                :effect="scope.row.status === 'PROCESSING' ? 'dark' : 'light'"
            >
              <span v-if="scope.row.status === 'PROCESSING'" class="processing-dot"></span>
              {{ mapStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="设备反馈" align="center" width="120">
          <template #default="scope">
            <el-tag :type="getFeedbackColor(scope.row.feedbackStatus)" size="small">
              {{ mapFeedbackStatus(scope.row.feedbackStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作员" prop="operatorId" align="center" width="100" />
        <el-table-column label="执行时间" prop="timestamp" align="center" width="180" sortable />
        <el-table-column label="执行耗时" align="center" width="120" sortable>
          <template #default="scope">
            <span :class="getTimeClass(scope.row.executionTime)">
              {{ scope.row.executionTime }} ms
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template #default="scope">
            <el-button
                v-if="scope.row.status === 'FAILED'"
                type="primary"
                size="small"
                link
                @click.stop="handleRetry(scope.row)"
            >
              重试
            </el-button>
            <el-button
                v-if="scope.row.status === 'PENDING' || scope.row.status === 'PROCESSING'"
                type="danger"
                size="small"
                link
                @click.stop="handleCancel(scope.row)"
            >
              取消
            </el-button>
            <el-button
                type="info"
                size="small"
                link
                @click.stop="handleViewDetail(scope.row)"
            >
              详情
            </el-button>
          </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="handlePageChange"
          class="pagination"
      />
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogOpen" title="指令详情" width="1000px" top="5vh">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="指令ID" span="1">{{ detailCommand.cmdId }}</el-descriptions-item>
        <el-descriptions-item label="指令类型" span="1">
          <el-tag :type="getCmdTypeColor(detailCommand.cmdType)">
            {{ mapCmdType(detailCommand.cmdType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="目标设备" span="2">
          <el-tag
              v-for="device in detailCommand.targetDevices"
              :key="device"
              size="small"
              type="info"
              class="device-tag"
          >
            {{ device }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="指令状态" span="1">
          <el-tag
              :type="getStatusColor(detailCommand.status)"
          >
            {{ mapStatus(detailCommand.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="执行时间" span="1">{{ detailCommand.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="操作员" span="1">{{ detailCommand.operatorId }}</el-descriptions-item>
        <el-descriptions-item label="IP地址" span="1">{{ detailCommand.ipAddress }}</el-descriptions-item>
        <el-descriptions-item label="操作详情" span="2">{{ detailCommand.operationDetail }}</el-descriptions-item>
      </el-descriptions>

      <!-- 响应监控信息 -->
      <el-card class="mt-4">
        <template #header>
          <span>设备响应与执行详情</span>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="response-card">
              <div class="card-title">反馈状态</div>
              <div class="status-icon" :class="getStatusClass(detailCommand.feedbackStatus)">
                <el-icon v-if="detailCommand.feedbackStatus === 'OK'"><CircleCheck /></el-icon>
                <el-icon v-else-if="detailCommand.feedbackStatus === 'TIMEOUT'"><Clock /></el-icon>
                <el-icon v-else><CircleClose /></el-icon>
              </div>
              <div class="status-text">{{ mapFeedbackStatus(detailCommand.feedbackStatus) }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="execution-card">
              <div class="card-title">执行耗时</div>
              <div class="time-value">{{ detailCommand.executionTime }} ms</div>
              <el-progress
                  :percentage="getTimePercentage(detailCommand.executionTime)"
                  :color="getProgressColor(detailCommand.executionTime)"
              />
              <div v-if="detailCommand.errorCode && detailCommand.errorCode !== 'NONE'" class="error-info">
                <div class="error-title">异常代码</div>
                <div class="error-code">{{ detailCommand.errorCode }}</div>
                <el-button
                    type="primary"
                    size="small"
                    link
                    @click="showErrorDialog"
                >
                  查看详情
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 策略配置信息 -->
      <el-card class="mt-4">
        <template #header>
          <span>策略配置与联动规则</span>
        </template>
        <el-row :gutter="16">
          <el-col :span="12">
            <h4>定时任务</h4>
            <p>{{ detailCommand.scheduleTask || "无定时任务" }}</p>
          </el-col>
          <el-col :span="12">
            <h4>场景模式</h4>
            <p>{{ detailCommand.sceneMode || "无场景模式" }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="16" class="mt-4">
          <el-col :span="24">
            <h4>联动规则</h4>
            <p>{{ detailCommand.linkageRule || "无联动配置" }}</p>
          </el-col>
        </el-row>
      </el-card>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogOpen = false">关闭</el-button>
          <el-button type="primary" @click="handlePrintDetail">打印</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 错误详情弹窗 -->
    <el-dialog
        v-model="errorDialogOpen"
        title="错误详情"
        width="500px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="异常代码">
          <el-tag type="danger">{{ detailCommand.errorCode }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="错误描述">
          {{ getErrorDescription(detailCommand.errorCode) }}
        </el-descriptions-item>
        <el-descriptions-item label="处理建议">
          {{ getErrorSuggestion(detailCommand.errorCode) }}
        </el-descriptions-item>
        <el-descriptions-item label="相关文档">
          <el-link type="primary" :underline="false" @click="openErrorDoc(detailCommand.errorCode)">
            查看解决方案
          </el-link>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="errorDialogOpen = false">关闭</el-button>
          <el-button type="primary" @click="copyErrorInfo">复制错误信息</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Search,
  Refresh,
  Download,
  DocumentCopy,
  CircleCheck,
  CircleClose,
  Timer,
  Clock
} from '@element-plus/icons-vue';
import {
  getBuildingEquipmentMonitoringCommandsList,
  retryCommand,
  cancelCommand,
  exportCommands,
  getCommandStats
} from "@/api/buildingEquipmentMonitoring/buildingEquipmentMonitoring";

// 查询参数
const queryParams = reactive({
  cmdId: '',
  cmdType: '',
  status: '',
  operatorId: '',
  feedbackStatus: '',
  startTime: '',
  endTime: '',
  pageNum: 1,
  pageSize: 10,
});

// 数据状态
const commandList = ref([]);
const total = ref(0);
const isLoading = ref(false);
const detailDialogOpen = ref(false);
const detailCommand = ref({});
const errorDialogOpen = ref(false);
const dateRange = ref([]);

// 统计数据
const stats = reactive({
  todayTotal: 0,
  successCount: 0,
  failedCount: 0,
  avgResponseTime: 0
});

// 指令状态映射
const mapStatus = (status) => {
  const statusMap = {
    'PENDING': '待执行',
    'PROCESSING': '执行中',
    'SUCCESS': '成功',
    'FAILED': '失败',
    'RETRYING': '重试中',
    'CANCELED': '已取消'
  };
  return statusMap[status] || status;
};

// 状态颜色映射
const getStatusColor = (status) => {
  const colorMap = {
    'PENDING': 'warning',
    'PROCESSING': 'primary',
    'SUCCESS': 'success',
    'FAILED': 'danger',
    'RETRYING': 'info',
    'CANCELED': 'info'
  };
  return colorMap[status] || 'info';
};

// 反馈状态映射
const mapFeedbackStatus = (status) => {
  const feedbackMap = {
    'OK': '正常响应',
    'TIMEOUT': '响应超时',
    'ERROR': '响应错误',
  };
  return feedbackMap[status] || status;
};

// 反馈状态颜色
const getFeedbackColor = (status) => {
  const colorMap = {
    'OK': 'success',
    'TIMEOUT': 'warning',
    'ERROR': 'danger'
  };
  return colorMap[status] || 'info';
};

// 指令类型映射
const mapCmdType = (type) => {
  const typeMap = {
    'SET_PARAM': '参数设置',
    'TRIGGER_ALARM': '报警触发',
    'START_STOP': '设备启停',
    'CALIBRATE': '校准操作',
    'RESET': '设备重置',
  };
  return typeMap[type] || type;
};

// 指令类型颜色
const getCmdTypeColor = (type) => {
  const colorMap = {
    'SET_PARAM': 'primary',
    'TRIGGER_ALARM': 'danger',
    'START_STOP': 'success',
    'CALIBRATE': 'warning',
    'RESET': 'info'
  };
  return colorMap[type] || '';
};

// 状态样式类
const getStatusClass = (status) => {
  const classMap = {
    'OK': 'status-ok',
    'TIMEOUT': 'status-timeout',
    'ERROR': 'status-error',
  };
  return classMap[status] || 'status-unknown';
};

// 执行时间样式
const getTimeClass = (time) => {
  if (time < 100) return 'time-fast';
  if (time < 500) return 'time-normal';
  if (time < 1000) return 'time-slow';
  return 'time-very-slow';
};

// 时间百分比计算
const getTimePercentage = (time) => {
  const maxTime = 2000; // 最大时间2秒
  return Math.min((time / maxTime) * 100, 100);
};

// 进度条颜色
const getProgressColor = (time) => {
  if (time < 100) return '#67c23a';
  if (time < 500) return '#409eff';
  if (time < 1000) return '#e6a23c';
  return '#f56c6c';
};

// 错误描述
const getErrorDescription = (errorCode) => {
  const descriptions = {
    'ALARM_MODULE_FAILURE': '报警模块无法正常工作，可能是硬件故障或配置错误',
    'COMMUNICATION_ERROR': '设备通信中断，无法建立有效连接',
    'TIMEOUT': '指令执行超时，设备未在规定时间内响应',
    'PARAMETER_ERROR': '参数设置错误，请检查输入值是否符合要求',
    'DEVICE_OFFLINE': '目标设备离线，无法执行指令',
    'PERMISSION_DENIED': '权限不足，当前操作员无权执行此指令',
    'DEFAULT_ERROR': '未知错误，请联系技术支持',
  };
  return descriptions[errorCode] || descriptions['DEFAULT_ERROR'];
};

// 错误处理建议
const getErrorSuggestion = (errorCode) => {
  const suggestions = {
    'ALARM_MODULE_FAILURE': '1. 检查报警模块连接状态\n2. 重启报警模块\n3. 检查模块配置参数',
    'COMMUNICATION_ERROR': '1. 检查网络连接\n2. 重启通信设备\n3. 验证通信协议配置',
    'TIMEOUT': '1. 增加指令超时时间设置\n2. 检查设备响应性能\n3. 优化网络延迟',
    'PARAMETER_ERROR': '1. 核对参数格式要求\n2. 检查参数取值范围\n3. 参考设备手册',
    'DEVICE_OFFLINE': '1. 检查设备电源\n2. 验证设备网络连接\n3. 查看设备状态日志',
    'PERMISSION_DENIED': '1. 联系管理员授权\n2. 使用具有相应权限的账号\n3. 查看权限配置',
    'DEFAULT_ERROR': '请联系系统管理员或技术支持团队',
  };
  return suggestions[errorCode] || suggestions['DEFAULT_ERROR'];
};

// 表格行样式
const tableRowClassName = ({ row }) => {
  if (row.status === 'FAILED') return 'error-row';
  if (row.status === 'PROCESSING') return 'processing-row';
  return '';
};

// 获取统计数据
const getStats = async () => {
  try {
    const response = await getCommandStats();
    Object.assign(stats, response.data);
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

// 获取数据
const getList = async () => {
  isLoading.value = true;
  try {
    const response = await getBuildingEquipmentMonitoringCommandsList(queryParams);
    commandList.value = response.data.list || [];
    total.value = response.data.total || 0;
  } catch (error) {
    ElMessage.error('获取指令数据失败');
    console.error(error);
  } finally {
    isLoading.value = false;
  }
};

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

// 重置
const resetSearch = () => {
  Object.assign(queryParams, {
    cmdId: '',
    cmdType: '',
    status: '',
    operatorId: '',
    feedbackStatus: '',
    startTime: '',
    endTime: '',
    pageNum: 1,
    pageSize: 10,
  });
  dateRange.value = [];
  getList();
  getStats();
};

// 日期范围变化
const handleDateChange = (value) => {
  if (value) {
    queryParams.startTime = value[0];
    queryParams.endTime = value[1];
  } else {
    queryParams.startTime = '';
    queryParams.endTime = '';
  }
};

// 分页
const handlePageChange = (newPage) => {
  queryParams.pageNum = newPage;
  getList();
};

const handleSizeChange = (newSize) => {
  queryParams.pageSize = newSize;
  queryParams.pageNum = 1;
  getList();
};

// 查看详情
const handleViewDetail = (row) => {
  detailCommand.value = { ...row };
  detailDialogOpen.value = true;
};

// 行点击事件
const handleRowClick = (row) => {
  handleViewDetail(row);
};

// 重试指令
const handleRetry = async (row) => {
  try {
    await ElMessageBox.confirm(
        `确定要重试指令 ${row.cmdId} 吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    );

    await retryCommand(row.cmdId);
    ElMessage.success('重试指令已发送');
    getList();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('重试失败');
    }
  }
};

// 取消指令
const handleCancel = async (row) => {
  try {
    await ElMessageBox.confirm(
        `确定要取消指令 ${row.cmdId} 吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    );

    await cancelCommand(row.cmdId);
    ElMessage.success('指令已取消');
    getList();
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('取消失败');
    }
  }
};

// 导出数据
const handleExport = async () => {
  try {
    isLoading.value = true;
    await exportCommands(queryParams);
    ElMessage.success('导出成功');
  } catch (error) {
    ElMessage.error('导出失败');
  } finally {
    isLoading.value = false;
  }
};

// 打印详情
const handlePrintDetail = () => {
  window.print();
};

// 显示错误详情
const showErrorDialog = () => {
  errorDialogOpen.value = true;
};

// 复制错误信息
const copyErrorInfo = () => {
  const errorInfo = `错误代码: ${detailCommand.value.errorCode}\n错误描述: ${getErrorDescription(detailCommand.value.errorCode)}\n处理建议: ${getErrorSuggestion(detailCommand.value.errorCode)}`;
  navigator.clipboard.writeText(errorInfo).then(() => {
    ElMessage.success('错误信息已复制到剪贴板');
  });
};

// 打开错误文档
const openErrorDoc = (errorCode) => {
  window.open(`/docs/error/${errorCode}`, '_blank');
};

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

<style scoped>
.control-command-system {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  text-align: center;
  transition: all 0.3s;
}

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

.success-card :deep(.el-statistic__number) {
  color: #67c23a;
}

.error-card :deep(.el-statistic__number) {
  color: #f56c6c;
}

.data-table {
  min-height: 500px;
}

.device-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.device-tag {
  margin: 2px;
}

.processing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #409eff;
  border-radius: 50%;
  margin-right: 5px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.time-fast {
  color: #67c23a;
  font-weight: bold;
}

.time-normal {
  color: #409eff;
}

.time-slow {
  color: #e6a23c;
}

.time-very-slow {
  color: #f56c6c;
  font-weight: bold;
}

:deep(.error-row) {
  background-color: #fef0f0;
}

:deep(.processing-row) {
  background-color: #ecf5ff;
}

.response-card, .execution-card {
  padding: 20px;
  text-align: center;
  background: #f5f7fa;
  border-radius: 8px;
  min-height: 200px;
}

.status-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
}

.status-ok {
  background-color: #67c23a;
}

.status-timeout {
  background-color: #e6a23c;
}

.status-error {
  background-color: #f56c6c;
}

.status-unknown {
  background-color: #909399;
}

.status-text {
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
}

.time-value {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
  margin: 20px 0;
}

.error-info {
  margin-top: 20px;
  padding: 15px;
  background: #fef0f0;
  border-radius: 4px;
  border: 1px solid #fde2e2;
}

.error-title {
  color: #f56c6c;
  font-weight: 500;
  margin-bottom: 5px;
}

.error-code {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 15px;
}

.mt-4 {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

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

/* 打印样式 */
@media print {
  .filter-card,
  .stats-row,
  .el-table__column-filter-trigger,
  .pagination,
  .dialog-footer {
    display: none !important;
  }

  .data-table {
    box-shadow: none !important;
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .search-form {
    display: block;
  }

  .search-form .el-form-item {
    margin-bottom: 10px;
  }

  .stats-row .el-col {
    margin-bottom: 10px;
  }

  .el-dialog {
    width: 95% !important;
  }
}

/* 加载动画 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 自定义滚动条 */
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>
