<!-- 智能仓储管理系统 -->
<template>
  <div class="home-page">
    <!-- 背景 -->
    <div class="bg-layer" :style="{ backgroundImage: `url(${bgImg})` }" />

    <!-- 飞机图片 - 作为背景层 -->
    <div class="airplane-layer">
      <img :src="airplaneImg" alt="飞机模型" class="airplane-img" />
    </div>

    <!-- 顶部标题区域 - 全宽 -->
    <div class="header-section">
      <img :src="headerImg" alt="" class="header-bg" />
      <h1 class="title">无人线边库</h1>
      <!-- 左侧用户信息 -->
      <div class="user-badge">
        <i class="fas fa-user user-icon" />
        <span class="username">{{ username }}</span>
      </div>
      <!-- 右侧操作按钮 -->
      <div class="header-actions">
        <div ref="settingsDropdown" class="settings-dropdown">
          <button class="icon-btn" @click="toggleSettings">
            <img :src="settingsIcon" alt="设置" class="settings-icon" />
          </button>
          <div v-if="showSettings" class="dropdown-menu">
            <div class="dropdown-item" @click="goToFingerprintEnroll">
              <i class="fas fa-fingerprint mr-2" />
              <span>指纹录入</span>
            </div>
            <!-- <div class="dropdown-item" @click="goReturnManagement">
              <i class="fas fa-box mr-2" />
              <span>还料区管理</span>
            </div> -->
            <!-- <div class="dropdown-item" @click="goDeliveryManagement">
              <i class="fas fa-box mr-2" />
              <span>送料区管理</span>
            </div> -->
            <div v-if="isAdmin" class="dropdown-item" @click="goRfidRecord">
              <i class="fas fa-barcode mr-2" />
              <span>AGV校验</span>
            </div>
            <div v-if="isAdmin" class="dropdown-item" @click="goAbnormalArea">
              <i class="fas fa-exclamation-triangle mr-2" />
              <span>异常停泊区</span>
            </div>
            <div v-if="isAdmin" class="dropdown-item" @click="goControlGate">
              <i class="fas fa-door-open mr-2" />
              <span>闸机控制</span>
            </div>

            <!-- 调试使用 -->
            <div v-if="isOutMenu" class="dropdown-item" @click="toggleMenu">
              <i class="fas fa-bars-staggered" />
              <span>内侧菜单</span>
            </div>
            <div v-else class="dropdown-item" @click="toggleMenu">
              <i class="fas fa-bars-staggered" />
              <span>外侧菜单</span>
            </div>
          </div>
        </div>
        <button class="exit-btn" @click="handleLogout">退出</button>
      </div>
    </div>

    <!-- 页面内容容器 -->
    <div class="page-container">
      <!-- 统计卡片区域 -->
      <div class="stats-section">
        <div
          v-for="stat in statistics" :key="stat.title" class="stat-card"
          :style="{ backgroundImage: `url(${stat.bg})` }"
        >
          <div class="stat-info">
            <div class="stat-label">{{ stat.title }}</div>
            <div class="stat-value">{{ stat.value }}</div>
            <!-- <div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
              <img :src="stat.trend > 0 ? arrowUpIcon : arrowDownIcon" alt="" class="trend-icon" />
              {{ stat.changeText }}
            </div> -->
          </div>
        </div>
      </div>

      <!-- 异常停泊区提示卡片 -->
      <div v-if="showAbnormalCard" class="abnormal-card">
        <div class="abnormal-card-header">
          <h3>异常停泊区提示</h3>
        </div>
        <div class="abnormal-card-content">
          <p>{{ abnormalMessage }}</p>
        </div>
        <div class="abnormal-card-footer">
          <button class="abnormal-btn know-btn" @click="closeAbnormalCard">我已知晓</button>
          <button class="abnormal-btn go-btn" @click="goToAbnormalArea">去看看</button>
        </div>
      </div>

      <!-- 操作按钮区域 -->
      <div v-if="isOutMenu" class="buttons-section">
        <!-- <template v-if="isOut"> -->
        <!-- 调试使用 -->
        <div v-for="action in outButtons" :key="action.label" class="action-btn" @click="handleAction(action.action)">
          <img :src="buttonBg" alt="" class="btn-bg" />
          <span class="btn-text">{{ action.label }}</span>
        </div>
      </div>
      <div v-else class="buttons-section buttons-section2">
        <div v-for="action in inButtons" :key="action.label" class="action-btn" @click="handleAction(action.action)">
          <img :src="buttonBg" alt="" class="btn-bg" />
          <span class="btn-text">{{ action.label }}</span>
        </div>
      </div>



      <!-- 表格区域 -->
      <div class="table-section">
        <dv-scroll-board ref="scrollBoard" :config="config" style="width:1080px;height:780px" />
      </div>
    </div>

    <!-- 底部装饰 -->
    <div class="divider-section">
      <img :src="bottomImg" alt="" class="divider-img" />
    </div>
    <!-- 拣货确认弹窗 - 科技感风格 -->
    <div v-if="pickingConfirmVisible" class="tech-modal-overlay" @click.self="pickingConfirmVisible = false">
      <div class="tech-modal">
        <div class="modal-content-row">
          <div class="modal-text">
            <h3>请确认您要进行的操作</h3>
            <p>您是否需要先领料（如果已经有领料单可以直接拣货），如果是的话请先点击【先领料】按钮，否则直接点击【直接拣货】按钮。</p>
          </div>
          <div class="modal-icon">
            <div class="icon-box">
              <i class="fas fa-clipboard-check" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn cancel-btn" @click="handlePickingNo">先领料</button>
          <button class="modal-btn confirm-btn" @click="handlePickingYes">直接拣货</button>
        </div>
      </div>
    </div>
    <div v-if="isUpdatePassword" class="tech-modal-overlay" @click.self="closePasswordModal">
      <div class="tech-modal result-modal">
        <!-- 弹窗标题 -->
        <div class="modal-header">
          <h3>修改密码</h3>
          <button class="close-btn" @click="closePasswordModal">
            <i class="fas fa-times" />
          </button>
        </div>

        <div class="dialog-content">
          <!-- 表单内容 -->
          <div class="dialog-body">
            <div class="password-form">
              <div class="form-group">
                <label for="oldPassword">原密码</label>
                <div class="password-input-container">
                  <input
                    id="oldPassword" 
                    v-model="passwordForm.oldPassword" 
                    :type="passwordVisibility.oldPassword ? 'text' : 'password'" 
                    class="form-input"
                    placeholder="请输入原密码"
                  />
                  <span class="password-toggle" @click="togglePasswordVisibility('oldPassword')">
                    <i :class="passwordVisibility.oldPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" />
                  </span>
                </div>
              </div>
              <div class="form-group">
                <label for="newPassword">新密码</label>
                <div class="password-input-container">
                  <input
                    id="newPassword" 
                    v-model="passwordForm.newPassword" 
                    :type="passwordVisibility.newPassword ? 'text' : 'password'" 
                    class="form-input"
                    placeholder="请输入新密码（不少于8位）"
                    @input="validateNewPassword"
                  />
                  <span class="password-toggle" @click="togglePasswordVisibility('newPassword')">
                    <i :class="passwordVisibility.newPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" />
                  </span>
                </div>
                <div v-if="passwordErrors.newPassword" class="input-error">
                  {{ passwordErrors.newPassword }}
                </div>
              </div>
              <div class="form-group">
                <label for="newPassword2">确认密码</label>
                <div class="password-input-container">
                  <input
                    id="newPassword2" 
                    v-model="passwordForm.newPassword2" 
                    :type="passwordVisibility.newPassword2 ? 'text' : 'password'" 
                    class="form-input"
                    placeholder="请再次输入新密码"
                    @input="validateConfirmPassword"
                  />
                  <span class="password-toggle" @click="togglePasswordVisibility('newPassword2')">
                    <i :class="passwordVisibility.newPassword2 ? 'fas fa-eye-slash' : 'fas fa-eye'" />
                  </span>
                </div>
                <div v-if="passwordErrors.newPassword2" class="input-error">
                  {{ passwordErrors.newPassword2 }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="dialog-footer">
          <div class="footer-buttons">
            <button class="modal-btn close-action-btn" @click="closePasswordModal">
              取消
            </button>
            <button class="modal-btn primary-btn" @click="handleUpdatePassword">
              <i class="fas fa-key" />
              确认修改
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 大件运输选项弹窗 -->
    <div v-if="bigProductTransportVisible" class="tech-modal-overlay" @click.self="closeBigTransportModal">
      <div class="tech-modal">
        <div class="modal-content-row">
          <div class="modal-text">
            <h3>请选择大件运输操作</h3>
            <p>请选择您要进行的大件运输操作类型</p>
          </div>
          <div class="modal-icon">
            <div class="icon-box">
              <i class="fas fa-truck" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeBigTransportModal">取消</button>
          <button v-if="!gateOpen" class="modal-btn confirm-btn" @click="selectTransportType('OPEN')">大件运输常开</button>
          <button v-if="gateOpen" class="modal-btn confirm-btn" @click="selectTransportType('CLOSE')">关闭常开</button>
        </div>
      </div>
    </div>

    <!-- 大件运输确认弹窗 -->
    <div v-if="bigTransportConfirmVisible" class="tech-modal-overlay" @click.self="closeBigTransportConfirmModal">
      <div class="tech-modal confirmation-modal">
        <div class="modal-content-row">
          <div class="modal-text">
            <h3>大件运输确认</h3>
            <div class="confirmation-content">
              <p>尊敬的用户，您好</p>
              <p>进行大件运输会记录您的信息，请务必遵守管理制度。</p>
              <p v-if="bigType === 'OPEN'">大件运输完成以后，请务必手工关门。</p>
              <p v-if="bigType === 'CLOSE'">大件运输关闭常开时，请务必远离闸机。</p>
              <p class="confirm-text">您同意的话，请点击【确认】按钮，否则点击【取消】按钮。</p>
            </div>
          </div>
          <div class="modal-icon">
            <div class="icon-box">
              <i class="fas fa-exclamation-triangle" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeBigTransportConfirmModal">取消</button>
          <button class="modal-btn confirm-btn" @click="confirmBigTransport">确认</button>
        </div>
      </div>
    </div>
  </div>
  <div v-if="loading" class="loading-overlay">
    <div class="loading-dots">
      <div class="dot" />
      <div class="dot" />
      <div class="dot" />
    </div>
    <span class="loading-text">执行中...</span>
  </div>
</template>

<script setup>
import { showNotify } from 'vant';
import { useRouter } from 'vue-router';
import { getQueryString } from '../util/common.js';
import { controlGateByBigInv} from '../api/gate.js';
import { ref, reactive, onMounted, onUnmounted,nextTick } from 'vue';
import { getWarehouseId, updateUserPassword, queryRemindTime } from '../api/login.js';

// 图片资源 - 从 assets/images 目录加载
import cardIcon1 from '../assets/images/card1.png';
import cardIcon2 from '../assets/images/card2.png';
import cardIcon3 from '../assets/images/card3.png';
import airplaneImg from '../assets/images/9898.png';
import buttonBg from '../assets/images/buttonBg.png';
import bgImg from '../assets/images/bj.png';
import settingsIcon from '../assets/images/setting.png';
import arrowUpIcon from '../assets/images/up.png';
import arrowDownIcon from '../assets/images/down.png';
import headerImg from '../assets/images/header.png';
import bottomImg from '../assets/images/bottom.png';
import { gateController, isGateOpen } from '../hardware/GateOperate.js';

import { getStaticInfo, getUserRole } from '../api/login.js';

const router = useRouter();
const username = ref('admin');

// 是否为外侧屏幕
const isOut = ref(true);
const isOutMenu = ref(true);

// 是否为管理员
const isAdmin = ref(false);
const loading = ref(false);

// 是否需要更新密码
const isUpdatePassword = ref(false);

// 密码表单数据
const passwordForm = reactive({
    oldPassword: '',
    newPassword: '',
    newPassword2: '',
});

// 密码表单错误信息
const passwordErrors = reactive({
    newPassword: '',
    newPassword2: '',
});

// 密码可见性状态
const passwordVisibility = reactive({
    oldPassword: false,
    newPassword: false,
    newPassword2: false,
});

// 切换密码可见性
const togglePasswordVisibility = field => {
    passwordVisibility[field] = !passwordVisibility[field];
};

// 大件运输相关状态
const bigProductTransportVisible = ref(false);
const bigTransportConfirmVisible = ref(false);
const bigType = ref('');

// 设置下拉菜单状态
const showSettings = ref(false);

// 拣货确认弹窗
const pickingConfirmVisible = ref(false);
const settingsDropdown = ref(null);

const scrollBoard = ref(null);
const config = ref({
    header: ['名称', '图号', '类型', '操作', '时间', '操作人员'],
    data: [],
    index: true,
    columnWidth: [50, 230, 230, 90, 90, 190, 110],
    align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
    rowNum: 14,
    headerBGC: '#0c5897',
    oddRowBGC: '#0c3367',
    evenRowBGC: '#153d75',
});

let infoTimer = null;

let gateStatusTimer = null;


// 门禁打开的状态
const gateOpen = ref(false);

// 从 localStorage 获取用户名和isOut状态
onMounted(() => {
    const loginInfo = localStorage.getItem('#LoginInfo');
    if (loginInfo) {
        const loginInfoObj = JSON.parse(loginInfo);
        username.value = loginInfoObj.userName;
    }

    // 读取isOut状态
    // const storedIsOut = localStorage.getItem('isOut');
    // if (storedIsOut !== null) {
    //     isOut.value = storedIsOut === 'true';
    // }

    getNowUserRole();
    getWarehouseInfo();

    checkPasswordReminder();

    infoTimer = setInterval(() => {
        getInfo();
    }, 1000 * 60);

    // 添加点击外部关闭下拉菜单的事件监听
    document.addEventListener('click', handleClickOutside);

    // 延时1秒检查异常信息，确保异常信息已经存储到localStorage
    setTimeout(() => {
        checkAbnormalMessage();
    }, 1000);


    // 每隔1秒查询一次大门的状态isGateOpen

    gateStatusTimer = window.setInterval(() => {
        gateOpen.value = isGateOpen();
        // console.log('gateOpen.value:', gateOpen.value);
    }, 1000);


});

onUnmounted(() => {
    // 移除事件监听
    document.removeEventListener('click', handleClickOutside);
    clearInterval(infoTimer);
    infoTimer = null;

    // 清除查询大门状态的定时器
    clearInterval(gateStatusTimer);
    gateStatusTimer = null;
});

// 统计数据
const statistics = ref([
    {
        title: '总库存量',
        value: '-',
        bg: cardIcon1,
        trend: 1,
        changeText: '',
    },
    {
        title: '今日归还',
        value: '-',
        bg: cardIcon2,
        trend: 1,
        changeText: '',
    },
    {
        title: '今日借用',
        value: '-',
        bg: cardIcon3,
        trend: -1,
        changeText: '',
    },
]);

// 异常停泊区提示卡片
const showAbnormalCard = ref(false);
const abnormalMessage = ref('');

// 检查异常信息
const checkAbnormalMessage = () => {
    const message = localStorage.getItem('abnormalCarMessage');
    if (message) {
        abnormalMessage.value = message;
        showAbnormalCard.value = true;
    }
};

// 关闭异常提示卡片
const closeAbnormalCard = () => {
    showAbnormalCard.value = false;
    localStorage.removeItem('abnormalCarMessage');
};

// 跳转到异常停泊区页面
const goToAbnormalArea = () => {
    showAbnormalCard.value = false;
    localStorage.removeItem('abnormalCarMessage');
    router.push('/abnormal-anchorage-area');
};

// 外侧屏幕操作按钮
const outButtons = reactive([
    // { label: '领料', action: 'materialOut' },
    { label: '领料', action: 'materialReturn' },
    { label: '归还', action: 'materialIn' },
    // { label: 'AGV RFID\n校验', action: 'agvRfidRecognition' },
    { label: '成品\n入库', action: 'finishedProductIn' },
    { label: '大件\n运输', action: 'bigProductTransport' },
]);

// 内侧屏幕操作按钮
const inButtons = reactive([
    { label: '借用', action: 'materialOutLeave' },
    // { label: '入库\n离开', action: 'materialInLeave' },
    // { label: '离开', action: 'materialInOutLeave' },
    { label: '成品\n出库', action: 'finishedProductOut' },
    { label: '大件\n运输', action: 'bigProductTransport' },
    // { label: '料箱\n上架', action: 'feedingArea' },
    // { label: '异常\n停泊区', action: 'abnormalAnchorageArea' },
    // { label: '还料区\n管理', action: 'returnManagement' },
    // { label: '取料区\n管理', action: 'deliverManagement' },
]);


// 切换设置下拉菜单
const toggleSettings = event => {
    event.stopPropagation();
    showSettings.value = !showSettings.value;
};

// 点击外部关闭下拉菜单
const handleClickOutside = event => {
    if (settingsDropdown.value && !settingsDropdown.value.contains(event.target)) {
        showSettings.value = false;
    }
};

// 跳转到指纹录入页面
const goToFingerprintEnroll = () => {
    showSettings.value = false;
    router.push('/fingerprint-enroll');
};

// 跳转到还料区管理页面
const goReturnManagement = () => {
    showSettings.value = false;
    router.push('/return-management');
};

// 跳转到送料区管理页面
const goDeliveryManagement = () => {
    showSettings.value = false;
    router.push('/delivery-management');
};

// 跳转到闸机控制页面
const goControlGate = () => {
    showSettings.value = false;
    router.push('/control-gate');
};

// 跳转到异常停泊区页面
const goAbnormalArea = () => {
    showSettings.value = false;
    router.push('/abnormal-anchorage-area');
};

// 跳转到RFID记录页面
const goRfidRecord = () => {
    showSettings.value = false;
    router.push('/agv-rfid-recognition');
};

// 切换菜单
const toggleMenu = () => {
    // isOut.value = !isOut.value;
    // localStorage.setItem('isOut', isOut.value);
    isOutMenu.value = !isOutMenu.value;
};

// 处理退出
const handleLogout = () => {
    localStorage.removeItem('#LoginInfo');
    localStorage.removeItem('#token');
    localStorage.removeItem('#accountId');
    localStorage.removeItem('#warehouseId');

    // 检查localStorage中的isOut值，如果为true则在登录页面添加isOut参数
    // const isOutValue = localStorage.getItem('isOut') === 'true';
    // if (isOutValue) {
    //     router.push({ path: '/fingerprint-login', query: { isOut: 'true' } });
    // } else {
    //     router.push('/fingerprint-login');
    // }
    router.push('/fingerprint-login');
};

// 处理按钮操作
const handleAction = action => {
    console.log('Action clicked:', action);
    switch (action) {
    // 外侧屏幕操作
    case 'materialOut':
        router.push('/stock-requisition');
        break;
    case 'materialReturn':
        // pickingConfirmVisible.value = true;
        router.push('/apply-material');
        break;
    case 'materialIn':
        router.push('/in-confirm');
        break;
    case 'agvRfidRecognition':
        router.push('/agv-rfid-recognition');
        break;
    case 'finishedProductIn':
        router.push('/finish-product-in');
        break;
    // 内侧屏幕操作
    case 'materialOutLeave':
        router.push('/outbound-confirm');
        break;
    // case 'materialInLeave':
    //     router.push('/returned-leave');
    //     break;
    case 'materialInOutLeave':
        router.push('/material-in-out-leave');
        break;
        
    case 'finishedProductOut':
        router.push('/finish-product-out');
        break;
    case 'feedingArea':
        router.push('/feeding-area');
        break;
    case 'abnormalAnchorageArea':
        router.push('/abnormal-anchorage-area');
        break;
    case 'returnManagement':
        router.push('/return-management');
        break;
    case 'deliverManagement':
        router.push('/delivery-management');
        break;
    case 'bigProductTransport':
        bigProductTransportVisible.value = true;
        break;
    }
};

// 拣货确认弹窗 - 点击"否"跳转到领料页
const handlePickingNo = () => {
    pickingConfirmVisible.value = false;
    router.push('/stock-requisition');
};

// 拣货确认弹窗 - 点击"是"跳转到拣货页
const handlePickingYes = () => {
    pickingConfirmVisible.value = false;
    router.push('/order-picking');
};

// 获取数据
const getInfo = async () => {

    try {
        const res = await getStaticInfo();
        if (res.errorCode === 0) {
            const { inventoryQuantity, stockInQuantity, stockOutQuantity, cfInAndOutResponses } = res.data;
            statistics.value[0].value = inventoryQuantity;
            statistics.value[1].value = stockInQuantity;
            statistics.value[2].value = stockOutQuantity;
            if (cfInAndOutResponses && cfInAndOutResponses.length > 0) {
                config.value.data = cfInAndOutResponses.map(item => {
                    let typeEl = '';
                    // const type = item.type === '借用' ? '<span style="color:#FF4D4F;">借用</span>' :
                    //     '<span style="color:#25EC87;">归还</span>';
                    if(item.type === '借用') {
                        typeEl = '<span style="color:#FF4D4F;">借用</span>';
                    } else if(item.type === '入库') {
                        typeEl = '<span style="color:#25EC87;">入库</span>';
                    } else if(item.type === '出库') {
                        typeEl = '<span style="color:#FF4D4F;">出库</span>';
                    } else if(item.type === '归还') {
                        typeEl = '<span style="color:#25EC87;">归还</span>';
                    }
                    return [item.name, item.no, item.inventoryType, typeEl, item.time, item.userName];
                });
                // nextTick(() => { 
                //     if(scrollBoard.value) {
                //         scrollBoard.value.updateRows(config.value.data);
                //     }
                // });
            }
        } else {
            console.log(res.errorMessage);
        }
    } catch (error) {
        console.error('获取数据API调用失败:', error);
    }

};

// 获取当前用户是否为超级管理员权限
const getNowUserRole = async () => {
    try {
        const loginInfo = localStorage.getItem('#LoginInfo');
        if (!loginInfo) {
            isAdmin.value = false;
            return;
        }
        const loginInfoObj = JSON.parse(loginInfo);
        const currentUserId = loginInfoObj.userId;

        const res = await getUserRole();

        if (res.errorCode === 0 && res.datas && res.datas.length > 0) {
            const hasAdminRole = res.datas.some(
                item => item.userId === currentUserId && item.roleOrTemplateName === '超级管理员',
            );
            isAdmin.value = hasAdminRole;
        } else {
            isAdmin.value = false;
        }
    } catch (error) {
        console.error('获取用户权限失败:', error);
        isAdmin.value = false;
    }
};

// 如果不是设备从URL中获取，否则从设备中获取，并判断是内侧还是外侧设备
const getWarehouseInfo = async () => {
    let deviceId = null;
    if (!plugin.settingConfig.getImei()) {
        deviceId = getQueryString().deviceId;
    } else {
        deviceId = plugin.settingConfig.getImei();
    }
    try {
        const res = await getWarehouseId(deviceId);
        if (res.errorCode === 0 && res.data) {
            localStorage.setItem('#warehouseId', res.data.warehouseId);
            isOut.value = !res.data.inGate;
            isOutMenu.value = !res.data.inGate;
            getInfo();
        } else {
            console.log('获取仓库ID异常:', res.errorMessage);
        }
    } catch (error) {
        console.error('获取仓库ID失败:', error);
    }
};

const handleControl = async (command, actionName) => {
    console.log('handleControl:', command, actionName);
    loading.value = true;
    try {
        const res = await controlGateByBigInv(command);
        
        if (res.errorCode === 0) {
            showNotify({ type: 'success', message: `${actionName}操作成功`, duration: 2000 });
            if (actionName.includes('关闭')) {
                gateController('CLOSE');
                // 后端调用了
                // plugin.soundPlay.playClose();
            } else if (actionName.includes('开')) {
                // 打开闸机
                gateController('OPEN');
                // 后端调用了
                // plugin.soundPlay.playOpen();
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage || `${actionName}操作失败`, duration: 3000 });
        }
    } catch (error) {
        console.error('闸机控制失败:', error);
        showNotify({ type: 'danger', message: `${actionName}操作失败`, duration: 3000 });
    } finally {
        loading.value = false;
    }
};

const checkPasswordReminder = async () => {
    try {
        const res = await queryRemindTime();
        if (res.errorCode === 0) {
            if (res.data === true) {
                setTimeout(() => {
                    showNotify({ type: 'danger', message: res.errorMessage });
                    // 显示修改密码弹窗
                    isUpdatePassword.value = true;
                }, 4000);
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage });
        }
    } catch (error) {
        console.error('提示修改密码Api调用失败', error);
        showNotify({ type: 'danger', message: '修改密码Api调用失败' });
    }
};

// 关闭密码修改弹窗
const closePasswordModal = () => {
    isUpdatePassword.value = false;
    // 重置表单
    passwordForm.oldPassword = '';
    passwordForm.newPassword = '';
    passwordForm.newPassword2 = '';
    passwordErrors.newPassword = '';
    passwordErrors.newPassword2 = '';
};

// 验证密码
const validatePasswordForm = () => {
    let isValid = true;

    // 重置错误信息
    passwordErrors.newPassword = '';
    passwordErrors.newPassword2 = '';

    // 验证新密码长度
    if (passwordForm.newPassword && passwordForm.newPassword.length < 8) {
        passwordErrors.newPassword = '新密码长度不得小于8位';
        isValid = false;
    }

    // 验证两次密码输入是否一致
    if (passwordForm.newPassword2 && passwordForm.newPassword !== passwordForm.newPassword2) {
        passwordErrors.newPassword2 = '两次输入的密码不一致';
        isValid = false;
    }

    return isValid;
};

// 实时验证新密码
const validateNewPassword = () => {
    passwordErrors.newPassword = '';
    if (passwordForm.newPassword && passwordForm.newPassword.length < 8) {
        passwordErrors.newPassword = '新密码长度不得小于8位';
    }
};

// 实时验证确认密码
const validateConfirmPassword = () => {
    passwordErrors.newPassword2 = '';
    if (passwordForm.newPassword2 && passwordForm.newPassword !== passwordForm.newPassword2) {
        passwordErrors.newPassword2 = '两次输入的密码不一致';
    }
};

// 处理密码更新
const handleUpdatePassword = async () => {
    // 验证表单
    if (!validatePasswordForm()) {
        return;
    }

    try {
        const res = await updateUserPassword({
            oldPassword: passwordForm.oldPassword,
            newPassword: passwordForm.newPassword,
            newPassword2: passwordForm.newPassword2,
        });

        if (res === '修改密码成功') {
            closePasswordModal();
            showNotify({ type: 'success', message: '密码修改成功' });
            router.push('/login');
        } else {
            showNotify({ type: 'danger', message: res || res.errorMessage || '密码修改失败' });
        }
    } catch (error) {
        console.error('密码修改失败:', error);
        showNotify({ type: 'danger', message:  '密码修改失败' });
    }
};

// 关闭大件运输选项弹窗
const closeBigTransportModal = () => {
    bigProductTransportVisible.value = false;
    bigType.value = '';
};

// 关闭大件运输确认弹窗
const closeBigTransportConfirmModal = () => {
    bigTransportConfirmVisible.value = false;
    bigType.value = '';
};

// 选择运输类型
const selectTransportType = type => {
    bigType.value = type;
    console.log('selectTransportType:', type);
    bigProductTransportVisible.value = false;
    bigTransportConfirmVisible.value = true;
};

// 确认大件运输操作
const confirmBigTransport = async () => {
    const actionName = bigType.value === 'OPEN' ? '大件运输常开' : '关闭大件运输常开';

    await handleControl(bigType.value, actionName);
  
    // 关闭确认弹窗
    closeBigTransportConfirmModal();

};






</script>

<style scoped>
/* 基础样式 - 1080x1920 竖屏优化，支持横屏滚动 */
.home-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 自定义滚动条样式 - WebKit */
.home-page::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.home-page::-webkit-scrollbar-track {
  background: rgba(4, 28, 61, 0.9);
  border-radius: 5px;
}

.home-page::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1e90ff 0%, #00bfff 100%);
  border-radius: 5px;
  border: 2px solid rgba(4, 28, 61, 0.9);
}

.home-page::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00bfff 0%, #1e90ff 100%);
}

/* 自定义滚动条样式 - Firefox */
.home-page {
  scrollbar-width: thin;
  scrollbar-color: #1e90ff rgba(4, 28, 61, 0.9);
}

/* 背景层 */
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #041c3d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* 飞机图片 - 背景层，位于内容下方 */
.airplane-layer {
  position: fixed;
  top: 64px;
  left: -290px;
  width: 160%;
  /* height: 55%; */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.airplane-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ========== 顶部标题区域 - 全宽无边距 ========== */
.header-section {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  z-index: 10;
  padding: 0 !important
}

.header-bg {
  width: 100%;
  height: 100px;
  display: block;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 6px;
  margin: 0;
  white-space: nowrap;
}

.user-badge {
  position: absolute;
  top: 62px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #1a4a7a 0%, #0d3a6a 100%);
  border: 1px solid #2a7fff;
  border-radius: 20px;
  padding: 6px 15px;
}

.user-icon {
  font-size: 14px;
  color: #00bfff;
}

.username {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.header-actions {
  position: absolute;
  top: 74px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
}

.icon-btn:hover {
  transform: scale(1.1);
}

.settings-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 密码修改弹窗样式 */
.tech-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.tech-modal {
  background: linear-gradient(135deg, rgba(13, 58, 106, 0.95) 0%, rgba(9, 45, 82, 0.95) 100%);
  border: 1px solid #2a7fff;
  border-radius: 12px;
  width: 90%;
  max-width: 500px !important;
  box-shadow: 0 0 30px rgba(0, 191, 255, 0.3);
  overflow: hidden;
  animation: modalFadeIn 0.3s ease;
}

.result-modal {
  width: 90%;
  max-width: 500px;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(42, 127, 255, 0.3);
}

.modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: transparent;
  border: none;
  color: #7ec8ff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-btn:hover {
  background: rgba(126, 200, 255, 0.2);
  color: #ffffff;
}

.dialog-content {
  padding: 20px;
}

.verification-status {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  gap: 6px;
}

.status-tag.success {
  background: rgba(37, 236, 135, 0.2);
  color: #25EC87;
  border: 1px solid rgba(37, 236, 135, 0.3);
}

.status-tag.danger {
  background: rgba(255, 77, 79, 0.2);
  color: #FF4D4F;
  border: 1px solid rgba(255, 77, 79, 0.3);
}

.dialog-body {
  display: flex;
  gap: 20px;
}

.password-form {
  width: 100%;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #7ec8ff;
}

.password-input-container {
  position: relative;
  width: 100%;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 44, 81, 0.5);
  border: 1px solid rgba(42, 127, 255, 0.5);
  border-radius: 4px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s;
  padding-right: 40px; /* Space for the eye icon */
}

.form-input:focus {
  outline: none;
  border-color: #2a7fff;
  box-shadow: 0 0 0 2px rgba(42, 127, 255, 0.2);
}

.form-input::placeholder {
  color: rgba(126, 200, 255, 0.5);
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #7ec8ff;
  font-size: 16px;
  transition: all 0.2s;
}

.password-toggle:hover {
  color: #ffffff;
}

.input-error {
  color: #FF4D4F;
  font-size: 12px;
  margin-top: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid rgba(42, 127, 255, 0.3);
}

.footer-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: flex-end;
}

.modal-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.close-action-btn {
  background: rgba(126, 200, 255, 0.1);
  color: #7ec8ff;
  border: 1px solid rgba(126, 200, 255, 0.3);
}

.close-action-btn:hover {
  background: rgba(126, 200, 255, 0.2);
}

.primary-btn {
  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
  color: #ffffff;
}

.primary-btn:hover {
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.4);
  transform: translateY(-1px);
}

/* 大件运输弹窗特殊样式 */
.confirmation-modal .modal-content-row {
  align-items: flex-start;
}

.confirmation-content {
  text-align: left;
  line-height: 1.6;
}

.confirmation-content p {
  margin: 8px 0;
  color: #ffffff;
}

.confirm-text {
  margin-top: 16px !important;
  font-weight: 500;
  color: #7ec8ff !important;
}

/* 大件运输选项按钮布局 */
.modal-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  flex-wrap: wrap;
}

.modal-footer .modal-btn {
  min-width: 120px;
  padding: 10px 16px;
}

/* 设置下拉菜单样式 */
.settings-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: linear-gradient(135deg, rgba(13, 58, 106, 0.95) 0%, rgba(9, 45, 82, 0.95) 100%);
  border: 1px solid #2a7fff;
  border-radius: 8px;
  min-width: 160px;
  z-index: 1000000;
  overflow: hidden;
  animation: dropdownFadeIn 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.dropdown-item:hover {
  background: rgba(30, 144, 255, 0.3);
}

.dropdown-item i {
  color: #00bfff;
  font-size: 16px;
  margin-right: 8px;
}

.exit-btn {
  padding: 6px 18px;
  border-radius: 20px;
  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.exit-btn:hover {
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
}

/* 页面容器 - 内容区域 */
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 0 30px;
  box-sizing: border-box;
  position: relative;
  z-index: 9;
  margin-top: 66px;
  gap: 20px;
}

/* ========== 统计卡片区域 ========== */
.stats-section {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 120px;
  padding: 10px;
  box-sizing: border-box;
}

.stat-info {
  margin-left: clamp(80px, 15vw, 166px);
}

.stat-label {
  font-family: 'Alibaba PuHuiTi 2.0', 'Microsoft YaHei', sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #FFFFFF;
}

.stat-value {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 28px;
  color: #FFFFFF;
}

.stat-trend {
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
}

.stat-label,
.stat-value,
.stat-trend {
  margin-top: 0px;
}

.stat-trend.up {
  color: #00ff88;
}

.stat-trend.down {
  color: #ff6b6b;
}

.trend-icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

/* 异常停泊区提示卡片样式 */
.abnormal-card {
  position: absolute;
  top: 150px;
  width: 1030px;
  background: linear-gradient(135deg, rgba(9, 45, 82, 0.95) 0%, rgba(5, 30, 60, 0.95) 100%);
  border: 1px solid rgba(30, 144, 255, 0.5);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(30, 144, 255, 0.2);
  animation: fadeInUp 0.5s ease-out;
  z-index: 10;
  box-sizing: border-box;
}

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

.abnormal-card-header h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
}

.abnormal-card-content {
  margin-bottom: 24px;
}

.abnormal-card-content p {
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

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

.abnormal-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
}

.know-btn {
  background: rgba(30, 144, 255, 0.2);
  color: #7ec8ff;
  border: 1px solid rgba(30, 144, 255, 0.3);
}

.know-btn:hover {
  background: rgba(30, 144, 255, 0.3);
  color: #00bfff;
}

.go-btn {
  background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
  color: #fff;
}

.go-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(30, 144, 255, 0.4);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 操作按钮区域 ========== */
.buttons-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  background: rgba(9, 61, 140, 0.5);
  border-radius: 12px;
  border: 1px solid #049FD8;
  padding: 15px 20px;
  flex-shrink: 0;
  margin-top: 516px;
}

.action-btn {
  width: clamp(100px, 12vw, 160px);
  height: clamp(100px, 12vw, 160px);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-btn:hover {
  transform: scale(1.05);
}

.btn-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.btn-text {
  font-size: clamp(14px, 2vw, 24px);
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  white-space: pre-line;
  position: relative;
  z-index: 1;
  line-height: 1.3;
}

/* ========== 分隔装饰 ========== */
.divider-section {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  margin-top: auto;
}

.divider-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 80px;
  object-fit: contain;
}

/* ========== 表格区域 ========== */
.table-section {
  display: flex;
  flex-direction: column;
  background: rgba(5, 20, 50, 0.6);
  border: 1px solid rgba(30, 144, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background: rgba(30, 144, 255, 0.15);
  border-bottom: 1px solid rgba(30, 144, 255, 0.3);
  padding: 12px 10px;
  flex-shrink: 0;
}

.table-header .table-col {
  font-size: 14px;
  color: #7ec8ff;
  font-weight: 600;
  text-align: center;
}

.table-body {
  flex: 1;
  overflow-y: auto;
}

.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-track {
  background: rgba(30, 144, 255, 0.1);
}

.table-body::-webkit-scrollbar-thumb {
  background: rgba(30, 144, 255, 0.3);
  border-radius: 3px;
}

.table-row {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid rgba(30, 144, 255, 0.1);
  transition: background 0.2s;
}

.table-row:nth-child(odd) {
  background: rgba(0, 44, 81, 0.2);
}

.table-row:hover {
  background: rgba(30, 144, 255, 0.15);
}

.table-col {
  flex: 1;
  font-size: 13px;
  color: #a0d2ff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-col:nth-child(1) {
  flex: 0.5;
}

.table-col:nth-child(2) {
  flex: 1.8;
}

.cell-out {
  color: #ff9500 !important;
}

.cell-in {
  color: #00ff88 !important;
}

/* ========== 响应式 - 小屏幕手机 ========== */
@media screen and (max-width: 480px) {
  .page-container {
    max-width: 100%;
    padding: 0 10px 20px;
    margin-top: 40px;
  }

  .title {
    font-size: 18px;
    letter-spacing: 2px;
  }

  .user-badge {
    padding: 4px 8px;
    top: 40px;
    left: 5px;
  }

  .username {
    font-size: 11px;
  }

  .header-actions {
    top: 40px;
    right: 5px;
  }

  .exit-btn {
    padding: 4px 10px;
    font-size: 11px;
  }

  .stats-section {
    flex-direction: column;
    gap: 8px;
  }

  .stat-card {
    height: 70px;
  }

  .stat-info {
    margin-left: 80px;
  }

  .stat-value {
    font-size: 20px;
  }

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

  .buttons-section {
    margin-top: 280px;
    gap: 8px;
    padding: 10px;
  }

  .action-btn {
    width: 56px;
    height: 56px;
  }

  .btn-text {
    font-size: 9px;
  }

  .table-col {
    font-size: 10px;
  }

  .table-header .table-col {
    font-size: 10px;
  }

  .airplane-layer {
    height: 35%;
    top: 120px;
  }
}

/* ========== 响应式 - 中等屏幕 ========== */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .page-container {
    max-width: 100%;
    padding: 0 15px 0 20px;
    margin-top: 50px;
  }

  .title {
    font-size: 24px;
  }

  .stat-card {
    height: 90px;
  }

  .stat-info {
    margin-left: 100px;
  }

  .stat-value {
    font-size: 22px;
  }

  .buttons-section {
    margin-top: 350px;
    gap: 12px;
    padding: 12px;
  }

  .action-btn {
    width: 80px;
    height: 80px;
  }

  .btn-text {
    font-size: 12px;
  }

  .airplane-layer {
    height: 40%;
    top: 100px;
  }
}

/* ========== 响应式 - 横屏模式 (如1920x1080) - 保持与1080x1920竖屏一致的布局 ========== */
@media screen and (orientation: landscape) {
  .home-page {
    min-height: 100vh;
    height: auto;
  }

  .header-section {
    display: flex;
    justify-content: center;
  }

  .header-bg {
    max-width: 1080px;
  }

  .title {
    left: 50%;
    top: 44%;
    font-size: 48px !important;
  }

  .user-badge {
    left: calc(50% - 540px + 22px);
  }

  .header-actions {
    right: calc(50% - 540px + 6px);
  }

  .page-container {
    max-width: 1080px;
    padding: 0 15px 0 30px;
    margin: 0 auto;
    margin-top: 66px;
    gap: 20px;
  }

  .airplane-layer {
    position: absolute;
    width: 1080px;
    left: 50%;
    transform: translateX(-50%);
    height: 680px;
    top: 216px;
    opacity: 0.8;
  }

  .stats-section {
    gap: 12px;
  }

  .stat-card {
    height: 120px;
    padding: 10px;
  }

  .stat-info {
    margin-left: 166px;
  }

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

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

  .stat-trend {
    font-size: 12px;
  }

  .buttons-section {
    margin-top: 516px;
    gap: 42px;
    padding: 15px;
  }

  .buttons-section2 {
    gap: 86px;
  }

  .action-btn {
    width: 160px;
    height: 160px;
  }

  .btn-text {
    font-size: 24px;
  }

  .table-row {
    padding: 10px;
  }

  .table-col {
    font-size: 13px;
  }

  .table-header .table-col {
    font-size: 14px;
  }

  .divider-section {
    max-width: 1080px;
    margin: 20px auto 0;
  }
}

/* ========== 响应式 - 大屏竖屏 (1080x1920) ========== */
@media screen and (orientation: portrait) and (min-width: 900px) {
  .page-container {
    max-width: 1080px;
  }

  .title {
    top: 44%;
    font-size: 50px;
    letter-spacing: 10px;
  }

  .user-badge {
    padding: 12px 20px;
    top: 62px;
    left: 22px;
  }

  .username {
    font-size: 18px;
  }

  .user-icon {
    font-size: 18px;
  }

  .header-actions {
    top: 86px;
    right: 22px;
    gap: 20px;
  }

  .exit-btn {
    padding: 10px 25px;
    font-size: 18px;
  }

  .settings-icon {
    width: 32px;
    height: 32px;
  }

  .stat-card {
    height: 140px;
  }

  .stat-info {
    margin-left: 150px;
  }

  .stat-value {
    font-size: 36px;
  }

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

  .stat-trend {
    font-size: 14px;
  }

  .airplane-layer {
    height: 50%;
  }

  .buttons-section {
    gap: 42px;
    padding: 20px;
  }

  .buttons-section2 {
    gap: 86px;
  }

  .action-btn {
    width: 160px;
    height: 160px;
  }

  .btn-text {
    font-size: 24px;
  }

  .table-header .table-col {
    font-size: 16px;
  }

  .table-col {
    font-size: 14px;
  }

  .table-row {
    padding: 12px 10px;
  }
}

:deep(.dv-scroll-board .header) {
  font-size: 22px !important;
  color: #52dff5 !important;
  background: linear-gradient(90deg, rgba(4, 253, 255, 0) 0%, rgba(10, 115, 241, 0.5) 50%, rgba(4, 244, 246, 0) 100%) !important
}

:deep(.dv-scroll-board .rows .row-item) {
  font-size: 17px !important;
  color: #ffffff !important;
}

/* ========== 科技感弹窗样式 ========== */
.tech-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 28, 61, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.tech-modal {
  background: linear-gradient(135deg, rgba(9, 45, 82, 0.98) 0%, rgba(5, 30, 60, 0.98) 100%);
  border: 1px solid #2a7fff;
  border-radius: 16px;
  padding: 30px;
  min-width: 620px !important;
  max-width: 90%;
  box-shadow: 0 0 40px rgba(30, 144, 255, 0.3), 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-content-row {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.modal-text {
  flex: 1;
}

.modal-text h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 15px 0;
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

.modal-text p {
  font-size: 18px;
  color: #7ec8ff;
  margin: 0;
  line-height: 1.6;
}

.modal-icon {
  flex-shrink: 0;
}

.icon-box {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #1e90ff 0%, #00bfff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(30, 144, 255, 0.4);
}

.icon-box i {
  font-size: 36px;
  color: #fff;
}

.modal-footer {
  display: flex;
  gap: 20px;
}

.modal-btn {
  flex: 1;
  padding: 16px 0;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-btn {
  background: rgba(13, 58, 106, 0.8);
  border: 1px solid #2a7fff;
  color: #7ec8ff;
}

.cancel-btn:hover {
  background: rgba(26, 74, 122, 0.9);
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.3);
}

.confirm-btn {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  color: #fff;
}

.confirm-btn:hover {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
}
</style>
