<template>
  <div class="calibration-container">
    <!-- 地图舞台容器 -->
    <div class="map-stage" ref="mapStage">
      <!-- 地图底层 -->
      <div class="map-canvas-wrapper" ref="mapWrapper">
        <OlMap 
          ref="olmap" 
          :width="olWidth + 'px'" 
          :height="olHeight + 'px'" 
          backgroundColor="#F5F5F5"
          :robotPoseData="laserPositionData" 
          :poseCalibrationIndex="nowCalibId"
          :showDefaultControls="false"
          :mapName="mapName"
        />
      </div>
      <MqttComp ref="mqtt" :topics="topics" @message-received="onMessage" />
      <!-- 地图工具条 -->
      <MapToolbar 
        class="map-toolbar"
        preset="calibration"
        :canAddCalibration="true"
        :hasRobotPosition="true"
        :isFullscreen="isFullscreen"
        :isConnected="true"
        :isBusy="false"
        @zoom-in="handleZoomIn"
        @zoom-out="handleZoomOut"
        @center-robot="handleCenterToRobot"
        @toggle-fullscreen="handleToggleFullscreen"
        @add-calibration-point="addCalibration"
      />

      <!-- 右侧信息面板 (宽屏模式，浮层) -->
      <RightPanel 
        v-if="!isMobileMode"
        mode="calib"
        class="right-panel"
        v-model="isPanelVisible"
        :width="rightPanelWidth"
        :title="'实时标定信息'"
        :subtitle="`(当前地图: ${currentMap.name})`"
        :laserPositionData="laserPositionData"
        :gnssPositionData="gnssPositionData"
        :calibrationList="calibrationList"
        :currentMap="currentMap"
        :panelWidth="rightPanelWidth"
        :mapName="mapName"
        @panel-resize="handlePanelResize"
        @add-calibration="addCalibration"
        @remove-calibration="removeCalibration"
        @execute-calibration="executeCalibration"
      />


      <!-- 右上角信息按钮 (窄屏模式) -->
      <div class="info-toggle-btn" v-if="isMobileMode" @click="showInfoDrawer">
        <el-button type="primary" icon="el-icon-info" circle size="small" />
      </div>
    </div>

    <!-- 抽屉模式 (窄屏) -->
    <el-drawer
      :visible.sync="drawerVisible"
      :direction="'rtl'"
      :modal="false"
      :size="'360px'"
      :with-header="false"
      custom-class="info-drawer"
      :wrapperClosable="false"
      v-if="isMobileMode"
    >
      <div class="drawer-content">
        <div class="drawer-header">
          <div class="drawer-title">
            <h3>实时标定信息</h3>
            <span class="map-name">(当前地图: {{ currentMap.name }})</span>
          </div>
          <el-button 
            @click="drawerVisible = false" 
            type="text" 
            size="mini" 
            icon="el-icon-close"
          />
        </div>
        
        <div class="drawer-body">
          <RightPanel 
            :laserPositionData="laserPositionData"
            :gnssPositionData="gnssPositionData"
            :calibrationList="calibrationList"
            :currentMap="currentMap"
            :isDrawerMode="true"
            @add-calibration="addCalibration"
            @remove-calibration="removeCalibration"
            @execute-calibration="executeCalibration"
            class="drawer-panel"
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import OlMap from "@/components/OlMap";
import MqttComp from "@/components/Mqtt/mqttComp.vue";
import { RightPanel, MapToolbar } from "./components/shared";
import { MapOperations, FullscreenOperations } from "@/utils/map-operations";
import { getCalibrationHistory } from "@/api/map/map";

export default {
  name: "CalibrationPage",
  components: {
    OlMap,
    RightPanel,
    MapToolbar,
    MqttComp
  },
  data() {
    return {
      topics:[
        this.$mqttPrefix + '/localization/pose',
        this.$mqttPrefix + '/settings/multi_coordinates/action/calibrate/reply'
      ],
      // 弹出层标题
      title: "",
      calibrationList: [],
      // 激光定位数据
      laserPositionData: {
        x: 0,
        y: 0,
        angle: 0
      },
      // gnss定位数据
      gnssPositionData: {
        status: '0/0',
        longitude: 0,
        latitude: 0,
        angle: 0,
        satellites: 0 // 卫星颗数
      },
      // 当前地图
    currentMap: {
      // id: 1,
      name: this.$route.query.mapName || 'Unknown'
    },
      olWidth: 0,  // 用于存储宽度的变量
      olHeight: 0,
      nowCalibId: 0, // 当前标定点id
      
      // 布局相关状态
      rightPanelWidth: 360, // 右侧面板宽度
      isPanelVisible: true, // 面板是否可见 (v-model)
      windowWidth: window.innerWidth, // 窗口宽度
    drawerVisible: false, // 抽屉是否可见
    isFullscreen: false, // 是否全屏状态
    mapName: this.$route.query.mapName || 'Unknown', // 当前地图名称
      isRobotFollow: false // 是否跟随机器人
    };
  },
  computed: {
    // 是否为移动模式（窄屏）
    isMobileMode() {
      return this.windowWidth < 1440;
    },
    
    // 是否可以添加标定点
    canAddCalibration() {
      return this.laserPositionData.x !== 0 || this.laserPositionData.y !== 0;
    },
    
    // 是否有机器人位置数据
    hasRobotPosition() {
      return this.laserPositionData.x !== 0 || this.laserPositionData.y !== 0;
    },
    
  },
  created() {
    // 从 localStorage 恢复状态
    const savedPanelWidth = localStorage.getItem('calibration-panel-width');
    const savedPanelCollapsed = localStorage.getItem('calibration-panel-collapsed');
    
    if (savedPanelWidth) {
      this.rightPanelWidth = Math.max(320, Math.min(420, parseInt(savedPanelWidth)));
    }
    if (savedPanelCollapsed) {
      this.isPanelVisible = savedPanelCollapsed !== 'true'; // 注意逻辑反转
    }
  },
  mounted() {
    // const mapId = this.$route.params.mapId;
    // this.updateOlCss();
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleWindowResize);
    
    // 监听全屏状态变化
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
    
    // 初始设置面板宽度
    this.updateRightPanelWidth();
    
    // 加载历史标定数据
    this.loadHistoryCalibrationData();
    
    // 页面初始化完成
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
  },
  methods: {
    onMessage({ topic, message }) {
      // console.log("收到消息:");
      try {
        // 处理定位数据
        if (topic.includes('/localization/pose')) {
          const data = message.args[0];
          const {xyz, rpy, blh, heading} = data.pose;
          // 激光定位实时数据
          this.laserPositionData.x = xyz[0];
          this.laserPositionData.y = xyz[1];
          this.laserPositionData.angle = rpy[2];
          // GNSS定位实时数据
          this.gnssPositionData.longitude = blh[1]; // 经度
          this.gnssPositionData.latitude = blh[0]; // 纬度
          this.gnssPositionData.angle = heading; // 航向角
          this.gnssPositionData.satellites = data.rtk.star; // 卫星颗数
          
          this.gnssPositionData.status = data.rtk.star+ '/' + data.rtk.status; // RTK状态显示
        }
        // 处理标定响应
        else if (topic.includes('/calibrate/reply')) {
          const status = message.status;
          if (status === 'ok') {
            this.$modal.msgSuccess("标定执行成功");
          } else {
            this.$modal.msgError("标定执行失败: " + (message.error || '未知错误'));
          }
        }
      } catch (e) {
        console.error("消息解析失败:", e);
      }
    },
    updateOlCss() {
      this.$nextTick(() => {
        const mapStage = this.$refs.mapStage;
        if (mapStage) {
          this.olWidth = mapStage.offsetWidth;
          this.olHeight = mapStage.offsetHeight;
          
          // 触发地图重绘
          if (this.$refs.olmap && this.$refs.olmap.map) {
            this.$refs.olmap.map.updateSize();
          }
        }
      });
    },
    
    // 处理窗口大小变化
    handleWindowResize() {
      this.windowWidth = window.innerWidth;
      this.updateOlCss();
    },
    
    // 处理全屏状态变化
    handleFullscreenChange() {
      this.isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      );
      
      // 全屏状态变化后触发地图重绘
      setTimeout(() => {
        this.updateOlCss();
      }, 100);
    },
    
    // 更新右侧面板宽度
    updateRightPanelWidth() {
      if (this.isMobileMode) {
        // 移动模式下隐藏面板，使用抽屉
        this.isPanelVisible = false;
      } else {
        const savedWidth = localStorage.getItem('calibration-panel-width');
        const savedCollapsed = localStorage.getItem('calibration-panel-collapsed');
        
        if (savedCollapsed === 'true') {
          this.isPanelVisible = false;
          this.rightPanelWidth = 360; // 保持原宽度，但面板是折叠状态
        } else if (savedWidth) {
          this.rightPanelWidth = Math.max(320, Math.min(420, parseInt(savedWidth)));
          this.isPanelVisible = true;
        } else {
          this.rightPanelWidth = 360;
          this.isPanelVisible = true;
        }
      }
      
      this.updateOlCss();
    },
    
    
    // 处理面板调整大小
    handlePanelResize(newWidth) {
      this.rightPanelWidth = newWidth;
      // 浮层模式下不需要重算地图尺寸
    },
    
    // 显示信息抽屉
    showInfoDrawer() {
      this.drawerVisible = true;
    },
    
    // 地图API适配器
    getMapInstance() {
      return this.$refs.olmap && this.$refs.olmap.map ? this.$refs.olmap.map : null;
    },
    
    // 地图工具条事件处理
    handleZoomIn() {
      try {
        const map = this.getMapInstance();
        if (map) {
          // OpenLayers API
          const view = map.getView();
          const currentZoom = view.getZoom();
          view.animate({
            zoom: currentZoom + 1,
            duration: 250
          });
        } else if (this.$refs.olmap && this.$refs.olmap.zoomIn) {
          // 备用方法
          this.$refs.olmap.zoomIn();
        }
      } catch (error) {
        console.warn('地图放大失败:', error);
        this.$message.warning('地图放大失败');
      }
    },
    
    handleZoomOut() {
      try {
        const map = this.getMapInstance();
        if (map) {
          // OpenLayers API
          const view = map.getView();
          const currentZoom = view.getZoom();
          view.animate({
            zoom: Math.max(currentZoom - 1, 1),
            duration: 250
          });
        } else if (this.$refs.olmap && this.$refs.olmap.zoomOut) {
          // 备用方法
          this.$refs.olmap.zoomOut();
        }
      } catch (error) {
        console.warn('地图缩小失败:', error);
        this.$message.warning('地图缩小失败');
      }
    },
    
    handleCenterToRobot() {
      try {
        // 移除位置检查限制，允许直接操作
        
        const map = this.getMapInstance();
        if (map) {
          // OpenLayers API
          const view = map.getView();
          
          // 如果有真实位置数据则使用，否则使用地图中心点
          let centerPoint = [this.laserPositionData.x, this.laserPositionData.y];
          if (this.laserPositionData.x === 0 && this.laserPositionData.y === 0) {
            // 使用当前地图中心点作为默认位置
            centerPoint = view.getCenter();
          }
          
          view.animate({
            center: centerPoint,
            zoom: Math.max(view.getZoom(), 15),
            duration: 500
          });
          this.$message.success('已定位到机器人位置');
        } else if (this.$refs.olmap && this.$refs.olmap.centerToRobot) {
          // 备用方法
          this.$refs.olmap.centerToRobot();
        }
      } catch (error) {
        console.warn('定位机器人失败:', error);
        this.$message.warning('定位机器人失败');
      }
    },
    
    handleToggleFullscreen() {
      try {
        const mapStage = this.$refs.mapStage;
        if (!mapStage) return;
        
        if (!this.isFullscreen) {
          // 进入全屏
          if (mapStage.requestFullscreen) {
            mapStage.requestFullscreen();
          } else if (mapStage.webkitRequestFullscreen) {
            mapStage.webkitRequestFullscreen();
          } else if (mapStage.mozRequestFullScreen) {
            mapStage.mozRequestFullScreen();
          } else if (mapStage.msRequestFullscreen) {
            mapStage.msRequestFullscreen();
          }
          this.isFullscreen = true;
        } else {
          // 退出全屏
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          this.isFullscreen = false;
        }
        
        // 延迟触发地图重绘
        setTimeout(() => {
          this.updateOlCss();
        }, 100);
        
      } catch (error) {
        console.warn('全屏切换失败:', error);
        this.$message.warning('全屏功能不可用');
      }
    },
    
    // 添加标定
addCalibration() {
  // 检查是否有有效的激光定位数据
  if (this.laserPositionData.x === 0 && this.laserPositionData.y === 0) {
    this.$message.warning('当前没有有效的激光定位数据');
    return;
  }
  
  // 检查是否有有效的GNSS数据
  const hasValidGnss = this.gnssPositionData.longitude !== 0 || this.gnssPositionData.latitude !== 0;
  if (!hasValidGnss) {
    this.$message.warning('当前没有有效的GNSS数据');
    return;
  }
  
  // 每次添加前，先根据现有列表重新排一次 id，保证连续
  this.calibrationList = this.calibrationList.map((item, index) => {
    return { ...item, id: index + 1 };
  });

  // 新的 id 就是当前长度+1
  const newId = this.calibrationList.length + 1;
  const coordinate = `${this.laserPositionData.x},${this.laserPositionData.y}`;
  
  // 获取RTK状态数字部分
  const statusParts = this.gnssPositionData.status.split('/');
  const rtkStatus = parseInt(statusParts[1]) || 0;
  
  const data = { 
    id: newId, 
    coordinate, 
    angle: this.laserPositionData.angle,
    // 保存当前的GNSS数据
    gnss: {
      latitude: this.gnssPositionData.latitude,
      longitude: this.gnssPositionData.longitude,
      heading: this.gnssPositionData.angle,
      status: rtkStatus,
      satellites: this.gnssPositionData.satellites
    }
  };

  this.calibrationList.push(data);
  this.nowCalibId = newId;
  
  this.$message.success(`已添加标定点 ${newId}`);
  
  // 同步更新地图上的标定点显示
  this.$nextTick(() => {
    this.displayCalibrationPointsOnMap();
  });
},

// 移除标定
removeCalibration(id) {
  if (this.calibrationList.length < 1) return;

  // 过滤掉要删除的
  this.calibrationList = this.calibrationList.filter(item => item.id !== id);

  // 删除后重新编号，保证 id 连续
  this.calibrationList = this.calibrationList.map((item, index) => {
    return { ...item, id: index + 1 };
  });

  this.nowCalibId = -1; // 标记无选中
  
  // 同步更新地图上的标定点显示
  this.$nextTick(() => {
    this.displayCalibrationPointsOnMap();
  });
},
/*     // 添加标定
    addCalibration() {
      // 需要获取无人车实时坐标, 现在先写死
      this.nowCalibId = this.calibrationList.length > 0 ? this.calibrationList[this.calibrationList.length - 1].id + 1 : 1;
      let coordinate = `${this.laserPositionData.x},${this.laserPositionData.y}`
      let data = { id: this.nowCalibId, coordinate: coordinate, angle: this.laserPositionData.angle }    
      this.calibrationList.push(data)
    },
    
    // 移除标定
    removeCalibration(id) {
      if (this.calibrationList.length < 1) {
        return;
      }
      this.calibrationList = this.calibrationList.filter(item => item.id !== id);
      // 删除图标
      this.nowCalibId = - id;
    }, */
    
    // 加载历史标定数据
    async loadHistoryCalibrationData() {
      try {
        const response = await getCalibrationHistory(this.mapName);
        console.log('加载历史标定数据响应:', response.calibration);
        
        if (response.calibration && Array.isArray(response.calibration)) {
          // 恢复标定点数据
          this.calibrationList = response.calibration.map((item, index) => ({
            id: index + 1,
            coordinate: `${item.x},${item.y}`,
            angle: item.yaw,
            // 保存完整的GNSS数据以便后续使用
            gnss: {
              latitude: item.b,
              longitude: item.l,
              heading: item.heading,
              status: item.status,
              satellites: item.start
            }
          }));
          
          console.log('成功加载历史标定数据:', this.calibrationList.length, '个点');
          
          // 等待地图组件加载完成后，将标定点显示在地图上
          this.$nextTick(() => {
            this.displayCalibrationPointsOnMap();
          });
        }
      } catch (error) {
        console.log('未找到历史标定数据或加载失败:', error.message);
        // 首次使用时可能没有历史数据，不显示错误
      }
    },
    
    // 将标定点显示在地图上
    displayCalibrationPointsOnMap() {
      if (!this.$refs.olmap || !this.calibrationList.length) {
        return;
      }
      
      // 等待地图完全初始化
      const displayPoints = () => {
        if (!this.$refs.olmap.map) {
          // 如果地图还未初始化，延迟执行
          setTimeout(displayPoints, 100);
          return;
        }
        
        try {
          // 清空 OlMap 组件中的标定点列表
          this.$refs.olmap.calibrationList = [];
          
          // 将标定点数据同步到 OlMap 组件
          this.calibrationList.forEach(item => {
            const coords = item.coordinate.split(',');
            const x = parseFloat(coords[0]);
            const y = parseFloat(coords[1]);
            
            // 添加到 OlMap 的 calibrationList
            this.$refs.olmap.calibrationList.push({
              id: item.id,
              x: x,
              y: y
            });
          });
          
          // 刷新地图上的标定点覆盖物
          if (this.$refs.olmap.refreshCalibrationOverlays) {
            this.$refs.olmap.refreshCalibrationOverlays();
          }
          
          console.log('已在地图上显示', this.calibrationList.length, '个历史标定点');
        } catch (error) {
          console.error('显示标定点失败:', error);
        }
      };
      
      displayPoints();
    },
    
    // 一键标定
    executeCalibration() {
      if (this.calibrationList.length < 1) {
        this.$message.warning('请先添加标定点!');
        return;
      }
      
      // 检查GNSS数据是否有效
      const hasValidGnss = this.gnssPositionData.longitude !== 0 || this.gnssPositionData.latitude !== 0;
      if (!hasValidGnss) {
        this.$message.warning('GNSS数据无效，请确保设备已获取定位信息');
        return;
      }
      
      // 格式化标定数据
      const calibrationData = this.calibrationList.map(item => {
        const coords = item.coordinate.split(',');
        const x = parseFloat(coords[0]);
        const y = parseFloat(coords[1]);
        
        // 获取RTK状态数字部分
        const statusParts = this.gnssPositionData.status.split('/');
        const rtkStatus = parseInt(statusParts[1]) || 0;
        
        return {
          x: x,
          y: y,
          yaw: item.angle,
          b: item.gnss ? item.gnss.latitude : this.gnssPositionData.latitude,  // 纬度
          l: item.gnss ? item.gnss.longitude : this.gnssPositionData.longitude, // 经度
          heading: item.gnss ? item.gnss.heading : this.gnssPositionData.angle, // GNSS航向角
          status: item.gnss ? item.gnss.status : rtkStatus,  // RTK状态
          start: item.gnss ? item.gnss.satellites : this.gnssPositionData.satellites // 卫星颗数
        };
      });
      
      // 构建MQTT消息
      const mqttMessage = {
        args: [
          {
            roadmap: this.mapName,
            calibration: calibrationData
          }
        ]
      };
      
      // 发布MQTT消息
      const topic = this.$mqttPrefix + '/settings/multi_coordinates/action/calibrate';
      
      console.log('发送标定请求:', topic, mqttMessage);
      
      if (this.$refs.mqtt && this.$refs.mqtt.publish) {
        this.$refs.mqtt.publish(topic, JSON.stringify(mqttMessage));
        this.$message.success('标定请求已发送，请等待响应...');
      } else {
        this.$message.error('MQTT连接未就绪，请稍后重试');
      }
    }
  },
  
  watch: {
    // 监听窗口宽度变化，自动切换模式
    windowWidth(newWidth) {
      if (newWidth < 1440 && !this.isMobileMode) {
        // 切换到移动模式时关闭抽屉
        this.drawerVisible = false;
      }
      this.updateRightPanelWidth();
    },
    
    // 监听抽屉开关状态，确保地图重绘
    drawerVisible() {
      this.$nextTick(() => {
        this.updateOlCss();
      });
    },
    
    // 监听面板可见性变化
    isPanelVisible(newVal) {
      localStorage.setItem('calibration-panel-collapsed', String(!newVal));
      this.$nextTick(() => {
        this.updateOlCss();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.calibration-container {
  width: 100%;
  height: calc(100vh - 84px);
  min-height: 600px;
  background: var(--color-bg-secondary);
  position: relative;
  overflow: hidden;

  .map-stage {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);

    .map-canvas-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .map-toolbar {
      position: absolute;
      left: 16px;
      top: 16px;
      z-index: 50;
      pointer-events: auto;
    }

    .right-panel {
      position: absolute;
      right: 16px;
      top: 16px;
      height: calc(100% - 32px);
      z-index: 10;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      background: var(--color-bg-card);
      display: flex;
      flex-direction: column;
      pointer-events: auto;
      transition: all var(--duration-200) var(--ease-out);

      &.panel-collapsed {
        width: 0 !important;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
      }
    }

    .panel-reopen-btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 12;
      width: 36px;
      height: 72px;
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-primary);
      border-radius: 8px 0 0 8px;
      box-shadow: var(--shadow-lg);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-secondary);
      transition: all var(--duration-200) var(--ease-out);
      pointer-events: auto;

      &:hover {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-color: var(--color-primary);
        transform: translateY(-50%) translateX(-2px);
        box-shadow: var(--shadow-xl);
      }

      i {
        font-size: var(--font-size-lg);
        font-weight: bold;
      }
    }

    .info-toggle-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
      pointer-events: auto;
      
      .el-button {
        box-shadow: var(--shadow-lg);
      }
    }
  }
}

/* 抽屉样式 */
.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-tertiary);

    .drawer-title {
      h3 {
        margin: 0;
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        line-height: var(--line-height-tight);
      }

      .map-name {
        font-size: var(--font-size-xs);
        color: var(--color-danger);
        margin-left: var(--spacing-2);
      }
    }
  }

  .drawer-body {
    flex: 1;
    overflow: hidden;

    .drawer-panel {
      height: 100%;
      
      ::v-deep .panel-header {
        display: none; /* 隐藏面板头部，使用抽屉头部 */
      }
      
      ::v-deep .panel-content {
        height: 100%;
        padding: var(--spacing-4);
      }

      ::v-deep .resize-handle {
        display: none; /* 抽屉模式下隐藏调整手柄 */
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 1439px) {
  .calibration-container {
    .map-stage {
      .right-panel {
        display: none; /* 窄屏时隐藏固定面板 */
      }
    }
  }
}

@media (max-width: 768px) {
  .calibration-container {
    height: calc(100vh - 60px);
    
    .map-stage {
      border-radius: 0;

      .map-toolbar {
        left: 12px;
        top: 12px;
      }

      .panel-reopen-btn {
        width: 32px;
        height: 60px;
      }

      .info-toggle-btn {
        top: 12px;
        right: 12px;
      }
    }
  }
}

/* 动画效果 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calibration-container {
  animation: slideInUp 0.3s ease-out;
}

.info-toggle-btn {
  animation: slideInRight 0.3s ease-out 0.2s both;
}

/* 暗色主题适配 */
html.dark {
  .calibration-container {
    .map-stage {
      background: var(--color-bg-tertiary);
      box-shadow: var(--shadow-card);

      .right-panel {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-tertiary);
        box-shadow: var(--shadow-xl);
      }

      .panel-reopen-btn {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-tertiary);

        &:hover {
          background: var(--color-primary);
          border-color: var(--color-primary);
        }
      }
    }
  }

  .drawer-content {
    background: var(--color-bg-tertiary);

    .drawer-header {
      background: var(--color-bg-quaternary);
      border-bottom-color: var(--color-border-tertiary);
    }
  }
}
</style>

<style>
/* 全局抽屉样式 */
.info-drawer {
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.info-drawer .el-drawer__body {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* 暗色主题抽屉样式 */
html.dark .info-drawer {
  background-color: var(--color-bg-tertiary);
  box-shadow: var(--shadow-xl);
}
</style>