<!--
  农机监控详情页
  注意事项：
  1. 需要申请高德地图API Key并在loadAmapScript方法中替换YOUR_AMAP_KEY
  2. 确保项目域名已在高德开放平台白名单中
  3. 生产环境需要替换模拟数据为真实API调用
-->
<template>
  <div class="machine-monitor-container">
    <!-- 顶部信息卡 -->
    <div class="info-header">
      <div class="machine-info-card">
        <div class="machine-header">
          <div class="machine-avatar">
            <i class="el-icon-truck"></i>
          </div>
          <div class="machine-title">
            <h2 class="machine-name">{{ machineData.machineName || '东方红-LX1000' }}</h2>
            <span class="machine-id">设备编号: {{ machineData.machineCode || 'M20230001' }}</span>
          </div>
          <el-button 
            type="primary" 
            icon="el-icon-refresh" 
            @click="refreshData"
            :loading="refreshing"
            class="refresh-btn"
          >
            刷新数据
          </el-button>
        </div>
        
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">
              <i class="el-icon-map-location"></i>
              所属地块
            </div>
            <div class="info-value">{{ machineData.fieldArea || '东区A-12' }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">
              <i class="el-icon-circle-check"></i>
              当前状态
            </div>
            <div class="info-value">
              <el-tag 
                :type="getStatusType(machineData.onlineStatus)" 
                effect="light"
                size="small"
              >
                {{ getStatusText(machineData.onlineStatus) }}
              </el-tag>
            </div>
          </div>
          <div class="info-item">
            <div class="info-label">
              <i class="el-icon-s-operation"></i>
              当前任务
            </div>
            <div class="info-value">{{ machineData.currentTask || '稻田耕种' }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">
              <i class="el-icon-location"></i>
              定位状态
            </div>
            <div class="info-value">
              <el-tag 
                :type="getLocationStatusType(machineData.locationStatus)" 
                effect="light"
                size="small"
              >
                {{ getLocationStatusText(machineData.locationStatus) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      
      <div class="status-overview">
        <h3 class="status-title">
          <i class="el-icon-data-analysis"></i>
          实时状态
        </h3>
        <div class="status-grid">
          <div class="status-item">
            <span class="status-label">在线状态</span>
            <el-tag :type="machineData.onlineStatus == 1 ? 'success' : 'danger'" size="small">
              {{ machineData.onlineStatus == 1 ? '在线' : '离线' }}
            </el-tag>
          </div>
          <div class="status-item">
            <span class="status-label">信号强度</span>
            <span class="status-value" :style="{ color: getSignalColor(realtimeData.signalStrength) }">
              {{ getSignalText(realtimeData.signalStrength) }}
            </span>
          </div>
          <div class="status-item">
            <span class="status-label">最后通信</span>
            <span class="status-value">{{ realtimeData.lastCommunication }}</span>
          </div>
          <div class="status-item">
            <span class="status-label">作业时长</span>
            <span class="status-value">{{ realtimeData.workingTime }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 状态信息区域 -->
    <div class="status-section">
      <div class="status-cards">
        <el-card class="status-card" shadow="hover">
          <div slot="header" class="card-title">
            <i class="el-icon-s-operation"></i>
            运行参数
          </div>
          <div class="metrics-grid">
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-s-operation"></i>
                工作模式
              </div>
              <div class="metric-value" style="color: #67C23A;">{{ realtimeData.workMode }}</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-lightning"></i>
                电量
              </div>
              <div class="metric-value" style="color: #67C23A;">{{ realtimeData.battery }}%</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-s-tools"></i>
                保养状态
              </div>
              <div class="metric-value" :style="{ color: getMaintenanceColor(machineData.maintenanceStatus) }">
                {{ getMaintenanceText(machineData.maintenanceStatus) }}
              </div>
            </div>

          </div>
        </el-card>
        
        <el-card class="status-card" shadow="hover">
          <div slot="header" class="card-title">
            <i class="el-icon-monitor"></i>
            设备状态
          </div>
          <div class="metrics-grid">
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-sunny"></i>
                发动机温度
              </div>
              <div class="metric-value">{{ realtimeData.engineTemp }}°C</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-odometer"></i>
                液压压力
              </div>
              <div class="metric-value">{{ realtimeData.hydraulicPressure }}MPa</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-goods"></i>
                燃油余量
              </div>
              <div class="metric-value" style="color: #E6A23C;">{{ realtimeData.fuelLevel }}%</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-time"></i>
                累计工时
              </div>
              <div class="metric-value">{{ realtimeData.totalWorkTime }}h</div>
            </div>
          </div>
        </el-card>
        
        <el-card class="status-card" shadow="hover">
          <div slot="header" class="card-title">
            <i class="el-icon-s-tools"></i>
            维护信息
          </div>
          <div class="metrics-grid">
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-date"></i>
                上次保养
              </div>
              <div class="metric-value">{{ realtimeData.lastMaintenance }}</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-alarm-clock"></i>
                下次保养
              </div>
              <div class="metric-value" style="color: #E6A23C;">{{ realtimeData.nextMaintenance }}</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-odometer"></i>
                保养里程
              </div>
              <div class="metric-value">{{ realtimeData.maintenanceMileage }}km</div>
            </div>
            <div class="metric-item">
              <div class="metric-label">
                <i class="el-icon-circle-check"></i>
                保养状态
              </div>
              <div class="metric-value" style="color: #67C23A;">正常</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 监控视图 -->
      <el-card class="monitor-view" shadow="hover">
        <div slot="header" class="monitor-header">
          <h3 class="monitor-title">
            <i class="el-icon-video-camera"></i>
            实时监控
          </h3>
          <el-button type="primary" size="small" @click="toggleFullscreen" class="fullscreen-btn">
            <i class="el-icon-full-screen"></i>
            全屏
          </el-button>
        </div>
        
        <!-- 视频预览区域 -->
        <div class="monitor-display" ref="monitorDisplay">
          <div class="monitor-status">
            <div class="signal-status">
              <i class="el-icon-connection"></i>
              信号强度: {{ getSignalText(realtimeData.signalStrength) }}
            </div>
            <div class="monitor-time">
              {{ currentTime }}
            </div>
          </div>
          
          <!-- 加载动画 -->
          <div v-if="cameraLoading" class="camera-loading">
            <div class="loading-spinner">
              <div class="spinner-ring"></div>
            </div>
            <p class="loading-text">摄像头画面加载中，请稍候...</p>
          </div>
          
          <!-- 正常显示内容 -->
          <div v-else class="monitor-placeholder">
            <i class="el-icon-video-camera"></i>
            <h4>{{ getCurrentCameraInfo().title }}</h4>
            <p class="monitor-description">{{ getCurrentCameraInfo().description }}</p>
          </div>
        </div>
        
        <!-- 操作控制栏 -->
        <div class="monitor-controls-bar">
          <div class="camera-controls">
            <span class="control-label">摄像头:</span>
            <el-button-group class="camera-buttons">
              <el-button 
                v-for="camera in cameraList" 
                :key="camera.value"
                :type="currentCamera === camera.value ? 'primary' : ''"
                size="small"
                @click="switchCamera(camera.value)"
                class="camera-btn"
              >
                {{ camera.shortLabel }}
              </el-button>
            </el-button-group>
          </div>
          <div class="camera-info-bar">
            <span class="info-item">
              <i class="el-icon-circle-check"></i>
              状态: {{ getCurrentCameraInfo().status }}
            </span>
            <span class="info-item">
              <i class="el-icon-monitor"></i>
              {{ getCurrentCameraInfo().resolution }}
            </span>
            <el-popover
              placement="top"
              width="200"
              trigger="hover"
              :content="getCurrentCameraInfo().description"
            >
              <el-button slot="reference" type="text" size="mini" class="help-btn">
                <i class="el-icon-question"></i>
              </el-button>
            </el-popover>
          </div>
        </div>
      </el-card>
      
      <!-- 地图轨迹卡片 -->
      <el-card class="map-track-card" shadow="hover">
        <div slot="header" class="map-header">
          <h4 class="map-title">
            <i class="el-icon-location-outline"></i>
            作业轨迹
          </h4>
          <div class="map-controls">
            <el-radio-group v-model="mapViewMode" size="small" @change="updateMapView">
              <el-radio-button label="realtime">实时轨迹</el-radio-button>
              <el-radio-button label="history">历史轨迹</el-radio-button>
            </el-radio-group>
            <el-button type="primary" size="small" @click="toggleMapFullscreen" class="map-fullscreen-btn">
              <i class="el-icon-full-screen"></i>
              全屏
            </el-button>
          </div>
        </div>
        
        <!-- 地图容器 -->
        <div class="map-container" ref="mapContainer">
          <!-- 地图加载动画 -->
          <div v-if="mapLoading" class="map-loading">
            <div class="map-loading-spinner">
              <div class="spinner-ring"></div>
            </div>
            <p class="map-loading-text">地图加载中...</p>
          </div>
          
          <!-- 高德地图容器 -->
          <div v-show="!mapLoading" id="amapContainer" class="amap-container"></div>
          
          <!-- 历史轨迹悬浮查询条件 -->
          <div v-show="mapViewMode === 'history' && !mapLoading" class="history-query-overlay">
            <div class="query-panel" :class="{ 'collapsed': queryPanelCollapsed }">
              <div class="query-header">
                <div class="query-title">
                  <i class="el-icon-date"></i>
                  <span>历史轨迹查询</span>
                </div>
                <el-button 
                  type="text" 
                  size="mini" 
                  @click="toggleQueryPanel"
                  class="collapse-btn"
                >
                  <i :class="queryPanelCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
                </el-button>
              </div>
              <div v-show="!queryPanelCollapsed" class="query-content">
                <div class="date-picker-wrapper">
                  <el-date-picker
                    v-model="historyDateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small"
                    @change="loadHistoryTrack"
                    :picker-options="datePickerOptions"
                    class="history-date-picker"
                  />
                </div>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="loadHistoryTrack" 
                  :loading="mapLoading"
                  class="query-btn"
                >
                  <i class="el-icon-search"></i>
                  查询轨迹
                </el-button>
              </div>
            </div>
          </div>
          
          <!-- 无数据提示 -->
          <div v-if="!mapLoading && !hasTrackData" class="no-track-data">
            <i class="el-icon-map-location"></i>
            <h5>暂无作业轨迹数据</h5>
            <p>{{ mapViewMode === 'realtime' ? '设备可能离线或未开始作业' : '选择的时间范围内无轨迹记录' }}</p>
          </div>
          
          <!-- 地图控制按钮组 -->
          <div v-show="!mapLoading && hasTrackData" class="map-control-buttons">
            <el-tooltip content="定位到农机" placement="left">
              <el-button circle size="small" @click="locateToMachine">
                <i class="el-icon-position"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip content="适应轨迹范围" placement="left">
              <el-button circle size="small" @click="fitTrackBounds">
                <i class="el-icon-zoom-in"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip content="重新加载" placement="left">
              <el-button circle size="small" @click="reloadMapData" :loading="mapLoading">
                <i class="el-icon-refresh"></i>
              </el-button>
            </el-tooltip>
          </div>
        </div>
        
        <!-- 底部统计信息 -->
        <div class="track-info">
          <div class="track-stats">
            <div class="track-stat">
              <div class="track-label">
                <i class="el-icon-odometer"></i>
                今日里程
              </div>
              <div class="track-value primary">{{ trackData.todayDistance }}km</div>
            </div>
            <div class="track-stat">
              <div class="track-label">
                <i class="el-icon-crop"></i>
                作业面积
              </div>
              <div class="track-value primary">{{ trackData.workArea }}亩</div>
            </div>
            <div class="track-stat">
              <div class="track-label">
                <i class="el-icon-odometer"></i>
                平均速度
              </div>
              <div class="track-value">{{ trackData.avgSpeed }}km/h</div>
            </div>
            <div class="track-stat">
              <div class="track-label">
                <i class="el-icon-map-location"></i>
                当前位置
              </div>
              <div class="track-value">{{ trackData.currentLocation }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    

    
    <!-- 底部快捷按钮 -->
    <div class="action-buttons">
      <el-button type="primary" icon="el-icon-document">
        查看保养记录
      </el-button>
      <el-button type="primary" icon="el-icon-time">
        查看作业历史
      </el-button>
      <el-button type="success" icon="el-icon-monitor" @click="goToMonitorOverview">
        监控汇总
      </el-button>
    </div>
  </div>
</template>

<script>
import { getMachines } from "@/api/base/machines"

export default {
  name: "MachineMonitor",
  data() {
    return {
      // 农机基础数据
      machineData: {},
      // 实时数据
      realtimeData: {
        signalStrength: 'strong',
        lastCommunication: '2分钟前',
        workingTime: '3小时22分',
        workMode: '自动',
        battery: 87,
        engineTemp: 85,
        hydraulicPressure: 16.5,
        fuelLevel: 65,
        totalWorkTime: 1245,
        lastMaintenance: '7天前',
        nextMaintenance: '23天后',
        maintenanceMileage: 850
      },
      // 轨迹数据
      trackData: {
        todayDistance: 12.8,
        workArea: 45.2,
        avgSpeed: 3.8,
        currentLocation: '东区A-12'
      },
      // 当前时间
      currentTime: '',
      // 刷新状态
      refreshing: false,
      // 当前摄像头
      currentCamera: 'front',
      // 摄像头加载状态
      cameraLoading: false,
      // 摄像头列表
      cameraList: [
        { value: 'front', label: '前置摄像头', shortLabel: '前', online: true },
        { value: 'rear', label: '后置摄像头', shortLabel: '后', online: true },
        { value: 'left', label: '左侧摄像头', shortLabel: '左', online: true },
        { value: 'right', label: '右侧摄像头', shortLabel: '右', online: true },
        { value: 'work', label: '作业区摄像头', shortLabel: '作业', online: true }
      ],
      // 地图视图模式
      mapViewMode: 'realtime',
      // 地图加载状态
      mapLoading: false,
      // 是否有轨迹数据
      hasTrackData: true,
      // 历史轨迹日期范围
      historyDateRange: [],
      // 查询面板折叠状态
      queryPanelCollapsed: false,
      // 日期选择器配置
      datePickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 高德地图实例
      amapInstance: null,
      // 农机标记点
      machineMarker: null,
      // 轨迹线
      trackPolyline: null,
      // 当前农机位置
      currentPosition: [117.065029, 34.227274], // 默认作业区域坐标
      // 轨迹点数据
      trackPoints: [],
      // 定时器
      timers: [],
      // 原始背景设置
      originalBodyBg: '',
      originalBodyColor: '',
      originalAppBg: ''
    }
  },
  created() {
    this.loadMachineData()
    this.startRealTimeUpdates()
    this.initializeCamera()
  },
  mounted() {
    // 保存原始背景色并设置页面背景
    this.originalBodyBg = document.body.style.background || ''
    this.originalBodyColor = document.body.style.color || ''
    this.originalAppBg = document.getElementById('app')?.style.background || ''
    
    // 应用渐变背景到整个页面
    document.body.style.background = 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)'
    document.body.style.color = '#1f2937'
    const appEl = document.getElementById('app')
    if (appEl) {
      appEl.style.background = 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)'
    }
    
    // 初始化地图
    this.loadAmapScript()
  },
  beforeDestroy() {
    // 恢复原始背景色
    document.body.style.background = this.originalBodyBg
    document.body.style.color = this.originalBodyColor
    const appEl = document.getElementById('app')
    if (appEl) {
      appEl.style.background = this.originalAppBg
    }
    
    // 清理地图资源
    if (this.amapInstance) {
      this.amapInstance.destroy()
      this.amapInstance = null
    }
    
    // 清理定时器
    this.timers.forEach(timer => clearInterval(timer))
  },
  methods: {
    // 加载农机数据
    async loadMachineData() {
      const machineId = this.$route.params.id || this.$route.query.id
      if (machineId) {
        try {
          const response = await getMachines(machineId)
          this.machineData = response.data
        } catch (error) {
          this.$message.error('加载农机数据失败')
          console.error(error)
        }
      }
    },
    

    
    // 初始化摄像头
    initializeCamera() {
      // 初始加载时显示loading
      this.cameraLoading = true
      
      // 模拟初始摄像头加载时间
      setTimeout(() => {
        this.cameraLoading = false
      }, 1500 + Math.random() * 1000)
    },

    // 刷新数据
    async refreshData() {
      this.refreshing = true
      // 刷新时也重新加载摄像头
      this.cameraLoading = true
      
      try {
        await this.loadMachineData()
        this.updateRealtimeData()
        
        // 模拟摄像头重新连接
        setTimeout(() => {
          this.cameraLoading = false
        }, 800 + Math.random() * 700)
        
        this.$message.success('数据已刷新')
      } catch (error) {
        this.cameraLoading = false
        this.$message.error('刷新失败')
      } finally {
        setTimeout(() => {
          this.refreshing = false
        }, 1000)
      }
    },
    

    
    // 开始实时更新
    startRealTimeUpdates() {
      // 更新时间
      this.updateCurrentTime()
      const timeTimer = setInterval(() => {
        this.updateCurrentTime()
      }, 1000)
      this.timers.push(timeTimer)
      
      // 模拟数据更新
      const dataTimer = setInterval(() => {
        this.updateRealtimeData()
      }, 30000)
      this.timers.push(dataTimer)
    },
    
    // 更新当前时间
    updateCurrentTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    
    // 更新实时数据
    updateRealtimeData() {
      // 随机更新电量
      this.realtimeData.battery = Math.max(this.realtimeData.battery - Math.floor(Math.random() * 3), 0)
      
      // 随机更新里程
      this.trackData.todayDistance = (this.trackData.todayDistance + Math.random() * 0.5).toFixed(1)
      
      // 随机更新作业面积
      this.trackData.workArea = (this.trackData.workArea + Math.random() * 0.3).toFixed(1)
      
      // 随机更新发动机温度
      this.realtimeData.engineTemp = this.realtimeData.engineTemp + Math.floor(Math.random() * 5) - 2
    },
    
    // 切换摄像头
    switchCamera(cameraType) {
      // 如果切换到相同摄像头，不执行操作
      if (this.currentCamera === cameraType) return
      
      // 显示加载动画
      this.cameraLoading = true
      
      // 模拟摄像头切换加载时间
      setTimeout(() => {
        this.currentCamera = cameraType
        
        // 模拟视频流加载时间（1-2秒）
        const loadTime = 1000 + Math.random() * 1000
        setTimeout(() => {
          this.cameraLoading = false
          this.$message.success(`已切换到${this.getCurrentCameraInfo().title}`)
        }, loadTime)
      }, 300) // 先显示300ms的切换动画
    },
    
    // 获取当前摄像头信息
    getCurrentCameraInfo() {
      const cameraInfo = {
        'front': {
          title: '前置摄像头',
          label: '前置摄像头',
          description: '显示农机前方视角，用于导航和障碍物检测',
          status: '正常',
          resolution: '1920×1080'
        },
        'rear': {
          title: '后置摄像头',
          label: '后置摄像头', 
          description: '显示农机后方视角，用于倒车和监控拖拽设备',
          status: '正常',
          resolution: '1920×1080'
        },
        'left': {
          title: '左侧摄像头',
          label: '左侧摄像头',
          description: '显示农机左侧视角，监控左侧作业区域',
          status: '正常',
          resolution: '1280×720'
        },
        'right': {
          title: '右侧摄像头',
          label: '右侧摄像头',
          description: '显示农机右侧视角，监控右侧作业区域',
          status: '正常',
          resolution: '1280×720'
        },
        'work': {
          title: '作业区摄像头',
          label: '作业区摄像头',
          description: '监控农机作业区域，观察耕种、播种、收割等作业过程',
          status: '正常',
          resolution: '1920×1080'
        }
      }
      return cameraInfo[this.currentCamera] || cameraInfo['front']
    },
    
    // 全屏切换
    toggleFullscreen() {
      const element = this.$refs.monitorDisplay
      if (document.fullscreenElement) {
        document.exitFullscreen()
        this.$message.success('已退出全屏')
      } else {
        element.requestFullscreen().then(() => {
          this.$message.success('已进入全屏模式')
        }).catch(() => {
          this.$message.error('全屏功能不支持')
        })
      }
    },
    
    // 加载高德地图脚本
    loadAmapScript() {
      // 检查是否已加载高德地图API
      if (window.AMap) {
        this.initMap()
        return
      }
      
      // 动态加载高德地图API
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_KEY&plugin=AMap.PolyLine,AMap.Marker' // 需要替换为实际的API Key
      script.onload = () => {
        this.initMap()
      }
      script.onerror = () => {
        console.error('高德地图加载失败')
        this.$message.error('地图加载失败，请检查网络连接')
        this.mapLoading = false
      }
      document.head.appendChild(script)
    },

    // 初始化地图
    initMap() {
      this.mapLoading = true
      
      setTimeout(() => {
        try {
          // 创建地图实例
          this.amapInstance = new AMap.Map('amapContainer', {
            zoom: 15,
            center: this.currentPosition,
            mapStyle: 'amap://styles/light', // 浅色简洁风格
            viewMode: '2D'
          })
          
          // 添加地图控件
          this.amapInstance.addControl(new AMap.Scale())
          
          // 生成模拟轨迹数据
          this.generateMockTrackData()
          
          // 绘制轨迹和标记
          this.drawTrackLine()
          this.createMachineMarker()
          
          // 适应轨迹范围
          this.fitTrackBounds()
          
          this.mapLoading = false
          
          // 开始实时更新农机位置
          this.startMachinePositionUpdate()
          
        } catch (error) {
          console.error('地图初始化失败:', error)
          this.$message.error('地图初始化失败')
          this.mapLoading = false
        }
      }, 1000) // 模拟加载时间
    },

    // 生成模拟轨迹数据
    generateMockTrackData() {
      const basePosition = this.currentPosition
      const trackPointCount = this.mapViewMode === 'realtime' ? 20 : 50
      
      this.trackPoints = []
      for (let i = 0; i < trackPointCount; i++) {
        // 生成围绕当前位置的随机轨迹点
        const deltaLng = (Math.random() - 0.5) * 0.01
        const deltaLat = (Math.random() - 0.5) * 0.01
        this.trackPoints.push([
          basePosition[0] + deltaLng,
          basePosition[1] + deltaLat
        ])
      }
      
      // 更新农机当前位置为轨迹的最后一点
      if (this.trackPoints.length > 0) {
        this.currentPosition = this.trackPoints[this.trackPoints.length - 1]
      }
      
      this.hasTrackData = this.trackPoints.length > 0
    },

    // 绘制轨迹线
    drawTrackLine() {
      if (!this.amapInstance || this.trackPoints.length === 0) return
      
      // 移除现有轨迹线
      if (this.trackPolyline) {
        this.amapInstance.remove(this.trackPolyline)
      }
      
      // 创建新的轨迹线
      this.trackPolyline = new AMap.Polyline({
        path: this.trackPoints,
        strokeColor: '#10b981', // 绿色轨迹线
        strokeWeight: 4,
        strokeOpacity: 0.8,
        strokeStyle: 'solid',
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round'
      })
      
      this.amapInstance.add(this.trackPolyline)
    },

    // 创建农机标记点
    createMachineMarker() {
      if (!this.amapInstance) return
      
      // 移除现有标记
      if (this.machineMarker) {
        this.amapInstance.remove(this.machineMarker)
      }
      
      // 创建农机图标
      const machineIcon = new AMap.Icon({
        size: new AMap.Size(32, 32),
        image: 'data:image/svg+xml;base64,' + btoa(`
          <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16" r="14" fill="#10b981" stroke="#ffffff" stroke-width="2"/>
            <path d="M10 12h12v8H10z" fill="#ffffff"/>
            <circle cx="12" cy="22" r="2" fill="#ffffff"/>
            <circle cx="20" cy="22" r="2" fill="#ffffff"/>
            <rect x="14" y="8" width="4" height="4" fill="#ffffff"/>
          </svg>
        `),
        imageSize: new AMap.Size(32, 32)
      })
      
      // 创建标记点
      this.machineMarker = new AMap.Marker({
        position: this.currentPosition,
        icon: machineIcon,
        anchor: 'center',
        animation: 'AMAP_ANIMATION_NONE'
      })
      
      // 添加点击事件
      this.machineMarker.on('click', () => {
        const infoWindow = new AMap.InfoWindow({
          content: `
            <div style="padding: 10px;">
              <h4 style="margin: 0 0 8px 0; color: #10b981;">${this.machineData.machineName || '东方红-LX1000'}</h4>
              <p style="margin: 0; font-size: 12px; color: #666;">当前位置: ${this.trackData.currentLocation}</p>
              <p style="margin: 4px 0 0 0; font-size: 12px; color: #666;">状态: ${this.getStatusText(this.machineData.onlineStatus)}</p>
            </div>
          `,
          anchor: 'bottom-center',
          offset: new AMap.Pixel(0, -30)
        })
        infoWindow.open(this.amapInstance, this.currentPosition)
      })
      
      this.amapInstance.add(this.machineMarker)
    },

    // 更新地图视图
    updateMapView() {
      this.mapLoading = true
      
      // 切换到历史模式时，确保查询面板展开
      if (this.mapViewMode === 'history') {
        this.queryPanelCollapsed = false
        this.trackData = {
          todayDistance: 156.4,
          workArea: 312.8,
          avgSpeed: 4.2,
          currentLocation: '多地块'
        }
      } else {
        this.trackData = {
          todayDistance: 12.8,
          workArea: 45.2,
          avgSpeed: 3.8,
          currentLocation: '东区A-12'
        }
      }
      
      // 重新生成轨迹数据
      setTimeout(() => {
        this.generateMockTrackData()
        this.drawTrackLine()
        this.createMachineMarker()
        this.fitTrackBounds()
        this.mapLoading = false
      }, 1000)
    },

    // 加载历史轨迹
    loadHistoryTrack() {
      if (!this.historyDateRange || this.historyDateRange.length !== 2) {
        this.$message.warning('请选择查询日期范围')
        return
      }
      
      this.mapLoading = true
      
      // 模拟API调用
      setTimeout(() => {
        this.generateMockTrackData()
        this.drawTrackLine()
        this.createMachineMarker()
        this.fitTrackBounds()
        this.mapLoading = false
        
        const startDate = this.historyDateRange[0].toLocaleDateString()
        const endDate = this.historyDateRange[1].toLocaleDateString()
        this.$message.success(`已加载 ${startDate} 至 ${endDate} 的轨迹数据`)
      }, 1500)
    },
    
    // 获取状态类型
    getStatusType(status) {
      const statusMap = { '0': 'info', '1': 'success', '2': 'warning', '3': 'danger', 0: 'info', 1: 'success', 2: 'warning', 3: 'danger' }
      return statusMap[status] || 'info'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = { '0': '离线', '1': '作业中', '2': '忙碌', '3': '故障', 0: '离线', 1: '作业中', 2: '忙碌', 3: '故障' }
      return statusMap[status] || '离线'
    },
    
    // 获取定位状态类型
    getLocationStatusType(status) {
      const statusMap = { '0': 'info', '1': 'success', '2': 'warning', '3': 'danger', 0: 'info', 1: 'success', 2: 'warning', 3: 'danger' }
      return statusMap[status] || 'info'
    },
    
    // 获取定位状态文本
    getLocationStatusText(status) {
      const statusMap = { '0': '未定位', '1': '良好', '2': '信号弱', '3': '定位异常', 0: '未定位', 1: '良好', 2: '信号弱', 3: '定位异常' }
      return statusMap[status] || '未定位'
    },
    
    // 获取信号颜色
    getSignalColor(strength) {
      const colorMap = { 'strong': '#67C23A', 'medium': '#E6A23C', 'weak': '#F56C6C' }
      return colorMap[strength] || '#909399'
    },
    
    // 获取信号文本
    getSignalText(strength) {
      const textMap = { 'strong': '强', 'medium': '中', 'weak': '弱' }
      return textMap[strength] || '未知'
    },
    
    // 获取保养状态颜色
    getMaintenanceColor(status) {
      const colorMap = { '0': '#67C23A', '1': '#E6A23C', '2': '#F56C6C', '3': '#409EFF', 0: '#67C23A', 1: '#E6A23C', 2: '#F56C6C', 3: '#409EFF' }
      return colorMap[status] || '#909399'
    },
    
    // 获取保养状态文本
    getMaintenanceText(status) {
      const textMap = { '0': '正常', '1': '需要保养', '2': '过期', '3': '保养中', 0: '正常', 1: '需要保养', 2: '过期', 3: '保养中' }
      return textMap[status] || '正常'
    },
    


    // 地图全屏切换
    toggleMapFullscreen() {
      const mapContainer = this.$refs.mapContainer
      if (document.fullscreenElement) {
        document.exitFullscreen()
        this.$message.success('已退出全屏')
      } else {
        mapContainer.requestFullscreen().then(() => {
          this.$message.success('已进入全屏模式')
          // 全屏后重新调整地图大小
          setTimeout(() => {
            if (this.amapInstance) {
              this.amapInstance.getSize()
            }
          }, 100)
        }).catch(() => {
          this.$message.error('全屏功能不支持')
        })
      }
    },

    // 定位到农机
    locateToMachine() {
      if (!this.amapInstance || !this.currentPosition) {
        this.$message.warning('无法获取农机位置')
        return
      }
      
      this.amapInstance.setCenter(this.currentPosition)
      this.amapInstance.setZoom(16)
      
      // 添加农机位置闪烁动效
      if (this.machineMarker) {
        this.machineMarker.setAnimation('AMAP_ANIMATION_BOUNCE')
        setTimeout(() => {
          this.machineMarker.setAnimation('AMAP_ANIMATION_NONE')
        }, 2000)
      }
      
      this.$message.success('已定位到农机位置')
    },

    // 适应轨迹范围
    fitTrackBounds() {
      if (!this.amapInstance || !this.trackPoints || this.trackPoints.length === 0) return
      
      try {
        const bounds = new AMap.Bounds()
        this.trackPoints.forEach(point => {
          bounds.extend(point)
        })
        
        // 添加当前农机位置
        if (this.currentPosition) {
          bounds.extend(this.currentPosition)
        }
        
        this.amapInstance.setBounds(bounds, false, [50, 50, 50, 50])
      } catch (error) {
        console.error('适应轨迹范围失败:', error)
      }
    },

    // 重新加载地图数据
    reloadMapData() {
      this.mapLoading = true
      
      setTimeout(() => {
        this.generateMockTrackData()
        this.drawTrackLine()
        this.createMachineMarker()
        this.fitTrackBounds()
        this.mapLoading = false
        this.$message.success('地图数据已刷新')
      }, 1000)
    },

    // 开始农机位置实时更新
    startMachinePositionUpdate() {
      if (this.mapViewMode !== 'realtime') return
      
      // 每30秒更新一次农机位置
      const positionTimer = setInterval(() => {
        this.updateMachinePosition()
      }, 30000)
      
      this.timers.push(positionTimer)
    },

    // 更新农机位置
    updateMachinePosition() {
      if (!this.amapInstance || !this.machineMarker || this.mapViewMode !== 'realtime') return
      
      // 模拟位置微调（实际项目中从API获取）
      const currentPos = this.machineMarker.getPosition()
      const newLng = currentPos.lng + (Math.random() - 0.5) * 0.001
      const newLat = currentPos.lat + (Math.random() - 0.5) * 0.001
      const newPosition = [newLng, newLat]
      
      // 更新农机标记位置
      this.machineMarker.setPosition(newPosition)
      this.currentPosition = newPosition
      
      // 添加新轨迹点
      this.trackPoints.push(newPosition)
      
      // 重新绘制轨迹线
      this.drawTrackLine()
      
      // 更新里程数据
      this.trackData.todayDistance = (parseFloat(this.trackData.todayDistance) + Math.random() * 0.1).toFixed(1)
      this.trackData.workArea = (parseFloat(this.trackData.workArea) + Math.random() * 0.05).toFixed(1)
    },

    // 切换查询面板展开/折叠
    toggleQueryPanel() {
      this.queryPanelCollapsed = !this.queryPanelCollapsed
    },
    
    // 跳转到监控汇总页面
    goToMonitorOverview() {
      this.$router.push('/base/machines/machines-monitor')
    }
  }
}
</script>

<style scoped>
.machine-monitor-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
  background: transparent;
  color: #1f2937;
  min-height: 100vh;
  position: relative;
}



/* 顶部信息卡 */
.info-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.machine-info-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.machine-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
  border-color: #10b981;
}

.machine-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.machine-avatar {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3BB44A 0%, #66C574 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
}

.machine-title {
  flex: 1;
}

.machine-name {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.machine-id {
  font-size: 16px;
  color: #6B7280;
  background: #F9FAFB;
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
}

.refresh-btn {
  background: #10b981;
  border-color: #10b981;
}

.refresh-btn:hover {
  background: #059669;
  border-color: #059669;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.info-item {
  text-align: left;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info-label {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.info-label i {
  color: #10b981;
  font-size: 14px;
}

.info-value {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  text-align: left;
}

/* 状态快览卡 */
.status-overview {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.status-overview:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
  border-color: #10b981;
}

.status-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-title i {
  color: #10b981;
  font-size: 20px;
}

.status-grid {
  display: grid;
  gap: 16px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F0F4F1;
}

.status-item:last-child {
  border-bottom: none;
}

.status-label {
  font-size: 14px;
  color: #6B7280;
}

.status-value {
  font-weight: 600;
}

/* 状态信息区域 */
.status-section {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.status-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.status-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
  border-color: #10b981;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i {
  color: #10b981;
  font-size: 18px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.metric-item {
  text-align: center;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
}

.metric-label {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-label i {
  color: #10b981;
  font-size: 14px;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}

/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

/* 监控视图 */
.monitor-view {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.monitor-view:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
  border-color: #10b981;
}

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

.monitor-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitor-title i {
  color: #10b981;
  font-size: 20px;
}

.fullscreen-btn {
  background: #10b981;
  border-color: #10b981;
}

.fullscreen-btn:hover {
  background: #059669;
  border-color: #059669;
}

.monitor-display {
  position: relative;
  height: 360px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 8px;
  margin: 0;
}

.monitor-placeholder {
  text-align: center;
}

.monitor-placeholder i {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.monitor-placeholder h4 {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 600;
}

.monitor-description {
  font-size: 14px;
  opacity: 0.8;
  max-width: 300px;
  line-height: 1.4;
}

/* 摄像头加载动画 */
.camera-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loading-spinner {
  margin-bottom: 20px;
}

.spinner-ring {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0;
  opacity: 0.8;
  animation: pulse 2s ease-in-out infinite;
}

/* 旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.monitor-status {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.signal-status, .monitor-time {
  background: rgba(255,255,255,0.2);
  padding: 8px 16px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  font-size: 13px;
}

/* 操作控制栏 */
.monitor-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  min-height: 60px;
}

.camera-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.control-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.camera-buttons {
  display: flex;
  gap: 4px;
}

.camera-btn {
  border-radius: 6px;
  font-weight: 500;
  min-width: 45px;
  padding: 6px 12px;
}

.camera-info-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #6b7280;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.info-item i {
  color: #10b981;
  font-size: 14px;
}

.help-btn {
  color: #6b7280;
  padding: 4px;
}

.help-btn:hover {
  color: #10b981;
}

/* 全屏模式样式 */
.monitor-display:fullscreen {
  height: 100vh;
  border-radius: 0;
  margin: 0;
}

.monitor-display:fullscreen .monitor-placeholder {
  transform: scale(1.2);
}

.monitor-display:fullscreen .monitor-status {
  top: 30px;
  left: 30px;
  right: 30px;
}

.monitor-display:fullscreen .camera-loading {
  transform: scale(1.5);
}

.monitor-display:fullscreen .spinner-ring {
  width: 80px;
  height: 80px;
  border-width: 5px;
}

.monitor-display:fullscreen .loading-text {
  font-size: 16px;
}

/* 地图轨迹卡片 */
.map-track-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-track-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
  border-color: #10b981;
}

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

.map-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-title i {
  color: #10b981;
  font-size: 20px;
}

.map-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-fullscreen-btn {
  background: #10b981;
  border-color: #10b981;
}

.map-fullscreen-btn:hover {
  background: #059669;
  border-color: #059669;
}

/* 历史轨迹悬浮查询面板 */
.history-query-overlay {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  min-width: 300px;
  max-width: 90%;
}

.query-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: all 0.3s ease;
}

.query-panel.collapsed .query-content {
  max-height: 0;
  padding: 0 16px;
  opacity: 0;
}

.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.1);
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.query-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #10b981;
  font-size: 14px;
}

.query-title i {
  font-size: 16px;
}

.collapse-btn {
  color: #10b981;
  padding: 4px;
  min-width: auto;
  transition: all 0.2s ease;
}

.collapse-btn:hover {
  background: rgba(16, 185, 129, 0.1);
}

.query-content {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-height: 200px;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 1;
}

.date-picker-wrapper {
  flex: 1;
  min-width: 200px;
}

.history-date-picker {
  width: 100%;
}

.query-btn {
  background: #10b981;
  border-color: #10b981;
  flex-shrink: 0;
}

.query-btn:hover {
  background: #059669;
  border-color: #059669;
}

/* 地图容器 */
.map-container {
  position: relative;
  height: 360px;
  background: #f8fafc;
  overflow: hidden;
}

.amap-container {
  width: 100%;
  height: 100%;
}

/* 地图加载动画 */
.map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.9);
  z-index: 10;
}

.map-loading-spinner {
  margin-bottom: 16px;
}

.map-loading-text {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

/* 无数据提示 */
.no-track-data {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b7280;
  z-index: 5;
}

.no-track-data i {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
  color: #10b981;
}

.no-track-data h5 {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: #374151;
}

.no-track-data p {
  font-size: 14px;
  margin: 0;
  max-width: 300px;
  line-height: 1.4;
}

/* 地图控制按钮组 */
.map-control-buttons {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
}

.map-control-buttons .el-button {
  background: rgba(255, 255, 255, 0.9);
  border-color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 50% !important;
}

.map-control-buttons .el-button i {
  font-size: 16px;
  line-height: 1;
  margin: 0 !important;
}

.map-control-buttons .el-button:hover {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

/* 全屏模式下的地图样式 */
.map-container:fullscreen {
  height: 100vh;
}

.map-container:fullscreen .map-control-buttons {
  top: 40px;
  right: 40px;
}

.map-container:fullscreen .map-control-buttons .el-button {
  width: 44px !important;
  height: 44px !important;
}

.map-container:fullscreen .map-control-buttons .el-button i {
  font-size: 18px;
}

.map-container:fullscreen .amap-container {
  height: 100vh;
}

.map-container:fullscreen .history-query-overlay {
  top: 40px;
  min-width: 400px;
  max-width: 80%;
}

.map-container:fullscreen .query-panel {
  font-size: 16px;
}

.map-container:fullscreen .query-header {
  padding: 16px 20px;
}

.map-container:fullscreen .query-content {
  padding: 20px;
}

.track-info {
  padding: 20px 24px;
  background: #F9FAFB;
  border-top: 1px solid #e5f4e8;
}

.track-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.track-stat {
  text-align: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #F0F4F1;
}

.track-label {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.track-label i {
  color: #10b981;
  font-size: 14px;
}

.track-value {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.track-value.primary {
  color: #3BB44A;
}



/* 底部快捷按钮 */
.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* 自定义状态徽章样式 (覆盖Element UI默认样式) */
.el-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  gap: 3px !important;
  border: none !important;
}

.el-tag--success {
  background: #d1fae5 !important;
  color: #065f46 !important;
}

.el-tag--warning {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.el-tag--danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

.el-tag--info {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .machine-monitor-container {
    max-width: 1200px;
    padding: 18px;
  }
}

@media (max-width: 1200px) {
  .machine-monitor-container {
    max-width: 1000px;
    padding: 16px;
  }
  
  .info-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .main-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .status-cards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .track-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .monitor-display {
    height: 300px;
  }
  
  .map-container {
    height: 300px;
  }
  
  .map-control-buttons {
    top: 15px;
    right: 15px;
    gap: 6px;
  }
  
  /* 中等屏幕优化查询面板 */
  .history-query-overlay {
    min-width: 280px;
    max-width: 95%;
  }
  
  .query-content {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .date-picker-wrapper {
    min-width: auto;
  }
  
  /* 中等屏幕优化加载动画 */
  .spinner-ring {
    width: 50px;
    height: 50px;
    border-width: 3px;
  }
  
  .loading-text {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .machine-monitor-container {
    padding: 12px;
    max-width: 100%;
  }
  
  .machine-info-card {
    padding: 20px;
    border-radius: 12px;
  }
  
  .machine-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .info-item {
    padding: 12px 8px;
  }
  
  .info-label {
    font-size: 11px;
    margin-bottom: 3px;
  }
  
  .info-value {
    font-size: 18px;
  }
  
  .status-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .track-stats {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .monitor-display {
    height: 250px;
  }
  
  .monitor-controls-bar {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 16px;
  }
  
  .camera-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  /* 移动端优化加载动画 */
  .spinner-ring {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }
  
  .loading-text {
    font-size: 12px;
    max-width: 200px;
    line-height: 1.3;
  }
  
  .loading-spinner {
    margin-bottom: 16px;
  }
  
  /* 移动端地图优化 */
  .map-container {
    height: 220px;
  }
  
  .map-control-buttons {
    top: 10px;
    right: 10px;
    gap: 4px;
  }
  
  .map-control-buttons .el-button {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    min-width: 36px !important;
  }
  
  .map-control-buttons .el-button i {
    font-size: 14px;
  }
  
  /* 移动端优化查询面板 */
  .history-query-overlay {
    top: 10px;
    min-width: 260px;
    max-width: 96%;
  }
  
  .query-panel {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .query-header {
    padding: 10px 12px;
  }
  
  .query-title {
    font-size: 13px;
  }
  
  .query-content {
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .date-picker-wrapper {
    min-width: auto;
  }
  
  .history-date-picker {
    font-size: 12px;
  }
  

  
  .no-track-data i {
    font-size: 48px;
  }
  
  .no-track-data h5 {
    font-size: 16px;
  }
  
  .no-track-data p {
    font-size: 12px;
    max-width: 250px;
  }
  
  .status-card,
  .monitor-view,
  .map-track-card {
    border-radius: 12px;
  }
}
</style> 