<template>
  <div class="app-container alert-console">
    <el-row :gutter="16" class="console-row">
      <!-- 左侧面板 -->
      <el-col :xs="24" :md="5" class="left-panel">
        <CurrentShiftCard />

        <StatsCard ref="statsCard" />

        <RecentAlertsCard ref="recentAlertsCard" @preview="previewAlert" />
      </el-col>

      <!-- 右侧面板 -->
      <el-col :xs="24" :md="19">
        <!-- 地图容器（全高度） -->
          <el-card shadow="never" class="form-card">
          <AlertMap
            ref="alertMap"
            @marker-clicked="handleMapMarkerClicked"
          />
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 位置选择对话框 -->
    <LocationPickerDialog
      :visible.sync="locationPickerVisible"
      :initial-location="{
        longitude: longitude,
        latitude: latitude
      }"
      @confirm="handleLocationConfirm"
    />

    <!-- 警情详情抽屉 -->
    <AlertDetailsDrawer
      ref="alertDetailsDrawer"
      :visible.sync="alertDrawerVisible"
      :alert-id="currentAlertId"
      @edit="handleEditAlert"
      @action="handleDrawerAction"
      @retry="loadAlertDetails"
    />

    <!-- Speed Dial FAB 菜单 -->
    <SpeedDialFAB
      :actions="fabActions"
      @action="handleFabAction"
    />

    <!-- 表单弹窗 -->
    <AlertFormDialog
      ref="alertFormDialog"
      :visible="showFormDialog"
      :form-data="form"
      :source-channels="sourceChannels"
      :alert-levels="alertLevels"
      :editing-alert-id="editingAlertId"
      :editing-alert-status="editingAlertStatus"
      :submitting="submitting"
      @close="handleFormDialogClose"
      @open-location-picker="locationPickerVisible = true"
      @save-draft="handleAction('草稿')"
      @submit="handleAction('提交')"
      @update="handleAction('更新')"
    />

    <!-- Draft Inbox Popup -->
    <DraftInboxPopup
      :visible="showDraftDialog"
      :draft-alerts="draftAlerts"
      @close="showDraftDialog = false"
      @select="openDraftAlert"
    />

    <!-- 历史记录弹窗 -->
    <HistoryPopup
      :visible="showHistoryDialog"
      @close="showHistoryDialog = false"
      @select="handleHistorySelect"
    />

    <!-- 转警表单对话框 -->
    <TransferFormDialog
      :visible="showTransferFormDialog"
      :alert-id="currentAlertForTransfer && currentAlertForTransfer.id"
      :submitting="transferring"
      @close="showTransferFormDialog = false"
      @submit="handleTransferSubmit"
    />

    <!-- 转警管理弹窗 -->
    <TransferManagementPopup
      :visible="showTransferDialog"
      @close="showTransferDialog = false"
    />

    <!-- 转事件表单对话框 -->
    <ConvertFormDialog
      :visible="showConvertFormDialog"
      :alert-id="currentAlertForConvert && currentAlertForConvert.id"
      :alert-initial-level="currentAlertForConvert && currentAlertForConvert.initialLevel"
      :submitting="converting"
      @close="showConvertFormDialog = false"
      @submit="handleConvertSubmit"
    />

    <!-- 转事件管理弹窗 -->
    <ConvertManagementPopup
      :visible="showConversionDialog"
      @close="showConversionDialog = false"
    />

    <!-- 审核工作台弹窗 -->
    <ApprovalWorkbenchPopup
      :visible="showApprovalDialog"
      @close="showApprovalDialog = false"
      @approved="handleApprovalSuccess"
    />
  </div>
</template>

<script>
import CurrentShiftCard from '@/components/shift/CurrentShiftCard.vue'
import StatsCard from './components/StatsCard.vue'
import RecentAlertsCard from './components/RecentAlertsCard.vue'
import AlertForm from './components/AlertForm.vue'
import AlertFormDialog from './components/AlertFormDialog.vue'
import AlertDetailsDrawer from './components/AlertDetailsDrawer.vue'
import DraftInboxPopup from './components/DraftInboxPopup.vue'
import HistoryPopup from './components/HistoryPopup.vue'
import TransferFormDialog from './components/TransferFormDialog.vue'
import ConvertFormDialog from './components/ConvertFormDialog.vue'
import TransferManagementPopup from './components/TransferManagementPopup.vue'
import ConvertManagementPopup from './components/ConvertManagementPopup.vue'
import ApprovalWorkbenchPopup from './components/ApprovalWorkbenchPopup.vue'
import SpeedDialFAB from './components/SpeedDialFAB.vue'
import LocationPickerDialog from '@/components/location/LocationPickerDialog.vue'
import AlertMap from './components/AlertMap.vue'
import FabActionPopup from './components/FabActionPopup.vue'
import { listAlerts, getAlert, transferAlert, convertAlert } from '@/api/duty/alert'
import { formatDateTime, getTodayDateRange } from './utils/dateHelpers'
import { transformAlertData } from './utils/alertTransformers'
import useAlertOperations from './mixins/useAlertOperations'
import useFormHandling from './mixins/useFormHandling'

export default {
  name: 'DutyAlertConsole',
  mixins: [useAlertOperations, useFormHandling],
  components: { 
    CurrentShiftCard,
    StatsCard,
    RecentAlertsCard,
    AlertForm,
    AlertFormDialog,
    AlertDetailsDrawer,
    DraftInboxPopup,
    HistoryPopup,
    TransferFormDialog,
    ConvertFormDialog,
    TransferManagementPopup,
    ConvertManagementPopup,
    ApprovalWorkbenchPopup,
    SpeedDialFAB,
    LocationPickerDialog,
    AlertMap,
    FabActionPopup
  },
  data() {
    return {
      // 自动刷新定时器
      refreshTimer: null,
      sourceChannels: [
        { label: '122电话', value: 'phone_122' },
        { label: '12345热线', value: 'phone_12345' },
        { label: '110报警', value: 'phone_110' },
        { label: '转办渠道', value: 'transfer' },
        { label: '监测渠道', value: 'monitoring' },
        { label: '媒体渠道', value: 'media' },
        { label: '其他', value: 'other' }
      ],
      alertLevels: [
        { label: '一级（红色）', value: 'level1' },
        { label: '二级（橙色）', value: 'level2' },
        { label: '三级（黄色）', value: 'level3' },
        { label: '四级（绿色）', value: 'level4' }
      ],
      form: {
        summary: '',
        sourceChannel: undefined,
        callerNumber: '',
        initialLevel: undefined,
        occurredAt: '',
        location: '',
        remark: '',
        sourceExtInfo: {} // 来源扩展信息（JSON对象）
      },
      longitude: null,
      latitude: null,
      selectedLocation: null,
      // 位置选择器相关
      locationPickerVisible: false,
      submitting: false, // 提交状态，防止重复提交
      // 警情详情抽屉
      alertDrawerVisible: false,
      currentAlertId: null,
      // 编辑模式
      editingAlertId: null, // null = create mode, number = edit mode
      editingAlertStatus: null, // 当前编辑的警情状态，用于控制按钮显示
      draftAlerts: [], // 草稿警情列表
      showDraftDialog: false, // 是否显示草稿箱对话框
      showFormDialog: false, // 是否显示表单弹窗
      // Speed Dial FAB 菜单
      fabActions: [
        {
          id: 'draft',
          label: '草稿箱',
          icon: 'el-icon-document',
          type: 'primary',
          badge: 0
        },
        {
          id: 'history',
          label: '历史记录',
          icon: 'el-icon-time',
          type: 'info',
          badge: 0
        },
        {
          id: 'create',
          label: '登记警情',
          icon: 'el-icon-plus',
          type: 'success',
          badge: 0
        },
        {
          id: 'transfer',
          label: '转警管理',
          icon: 'el-icon-share',
          type: 'warning',
          badge: 0
        },
        {
          id: 'convert',
          label: '转事件管理',
          icon: 'el-icon-s-promotion',
          type: 'warning',
          badge: 0
        },
        {
          id: 'approval',
          label: '审核工作台',
          icon: 'el-icon-s-check',
          type: 'danger',
          badge: 0
        }
      ],
      // 弹窗状态（暂时为空弹窗占位符）
      showHistoryDialog: false,
      showTransferDialog: false,
      showConversionDialog: false,
      showApprovalDialog: false,
      // 转警表单对话框
      showTransferFormDialog: false,
      currentAlertForTransfer: null,
      transferring: false,
      // 转事件表单对话框
      showConvertFormDialog: false,
      currentAlertForConvert: null,
      converting: false
    }
  },
  watch: {
    // 当对话框打开时，确保表单被重置（新建模式）
    showFormDialog(newVal) {
      if (newVal && !this.editingAlertId) {
        // 新建模式：确保表单验证状态也被重置
        this.$nextTick(() => {
          const formRef = this.$refs.alertFormDialog?.$refs?.alertForm || null
          if (formRef) {
            formRef.resetFields()
          }
        })
      }
    }
  },
  methods: {
    async handleAction(action) {
      const result = await this.handleAlertAction(
        action,
        this.form,
        this.editingAlertId,
        this.longitude,
        this.latitude
      )
      
      // 添加防御性检查
      if (result && result.success) {
        // 如果是提交、保存草稿或更新操作，关闭弹窗
        if (action === '提交' || action === '草稿' || action === '更新') {
          // 使用 $nextTick 确保在 DOM 更新后关闭
          await this.$nextTick()
          this.showFormDialog = false
          // 提交或更新操作时重置编辑状态，保存草稿时保留（可以从草稿箱重新打开）
          if (action === '提交' || action === '更新') {
            this.editingAlertId = null
            this.editingAlertStatus = null
          }
        }
        
        // 重置表单（不显示消息）
        this.resetForm(false)
        
        // 刷新草稿列表
        await this.loadDraftAlerts()
        // 刷新最近警情列表
        if (this.$refs.recentAlertsCard) {
          this.$refs.recentAlertsCard.loadTodayAlerts()
        }
        // 刷新统计卡片
        if (this.$refs.statsCard) {
          this.$refs.statsCard.loadTodayStats()
        }
        // 刷新地图标记
        if (this.$refs.alertMap) {
          this.$refs.alertMap.refresh()
        }
        // 更新 FAB 徽章
        this.updateFabBadges()
      } else {
        // 调试：记录失败情况
        console.warn('Action failed or result is invalid:', action, result)
      }
    },
    resetForm(showMessage = true) {
      // 直接重置 form 对象的所有字段为初始值（确保数据被清空）
      this.form = {
        summary: '',
        sourceChannel: undefined,
        callerNumber: '',
        initialLevel: undefined,
        occurredAt: '',
        location: '',
        remark: '',
        sourceExtInfo: {} // 来源扩展信息（JSON对象）
      }
      
      // 重置位置相关数据
      this.longitude = null
      this.latitude = null
      this.selectedLocation = null
      
      // 重置编辑状态
      this.editingAlertId = null
      this.editingAlertStatus = null
      
      // 延迟重置表单验证状态（等对话框打开后，如果有的话）
      this.$nextTick(() => {
        const formRef = this.$refs.alertFormDialog?.$refs?.alertForm || null
        if (formRef) {
          formRef.resetFields()
        }
      })
      
      // 可选：显示重置消息（目前所有调用都传入 false，不显示消息）
      if (showMessage) {
        this.$message.info('表单已重置')
      }
    },
    
    /**
     * 加载草稿警情列表
     */
    async loadDraftAlerts() {
      try {
        // 获取今天的开始和结束时间
        const { startOfDay, endOfDay } = getTodayDateRange()
        
        // 查询今天的草稿警情
        const res = await listAlerts({
          beginOccurredAt: formatDateTime(startOfDay),
          endOccurredAt: formatDateTime(endOfDay)
        })
        
        if (res.code === 200) {
          const alerts = res.rows || []
          // Filter only drafts
          const drafts = alerts.filter(alert => alert.status === 'draft')
          this.draftAlerts = drafts.map(alert => transformAlertData(alert))
        }
      } catch (error) {
        console.error('获取草稿警情失败:', error)
      }
    },
    
    /**
     * 打开草稿警情（编辑模式）
     */
    async openDraftAlert(alert) {
      // 关闭草稿箱弹窗
      this.showDraftDialog = false
      
      // 加载警情详情
      try {
        const response = await getAlert(alert.id)
        if (response.code === 200 && response.data) {
          const alertData = response.data
          
          // 填充表单数据
          const locationData = {
            longitude: this.longitude,
            latitude: this.latitude,
            selectedLocation: this.selectedLocation
          }
          
          // 使用 mixin 方法填充表单数据（使用返回值）
          const result = this.fillFormFromAlertData(alertData, null, locationData)
          
          // 更新组件数据（这是关键！）
          this.form = result.formData
          this.longitude = result.locationData.longitude
          this.latitude = result.locationData.latitude
          this.selectedLocation = result.locationData.selectedLocation
          
          // 设置编辑状态
          this.editingAlertId = alertData.id
          this.editingAlertStatus = alertData.status
          
          // 打开表单弹窗
          this.showFormDialog = true
        }
      } catch (error) {
        console.error('加载草稿失败:', error)
        this.$message.error('加载草稿失败，请稍后重试')
      }
    },
    
    /**
     * 处理 FAB 按钮点击
     */
    handleFabAction(action) {
      // 根据 action.id 调用不同的处理方法
      switch (action.id) {
        case 'draft':
          this.handleDraftAction()
          break
        case 'history':
          this.handleHistoryAction()
          break
        case 'create':
          this.handleCreateAction()
          break
        case 'transfer':
          this.handleTransferAction()
          break
        case 'convert':
          this.handleConvertAction()
          break
        case 'approval':
          this.handleApprovalAction()
          break
      }
    },
    
    /**
     * 草稿箱操作（保留现有逻辑）
     */
    handleDraftAction() {
      this.showDraftDialog = true
    },
    
    /**
     * 历史记录操作
     */
    handleHistoryAction() {
      this.showHistoryDialog = true
    },
    
    /**
     * 处理历史记录选择（打开详情抽屉）
     */
    handleHistorySelect(alert) {
      // 关闭历史记录弹窗
      this.showHistoryDialog = false
      // 打开详情抽屉
      this.currentAlertId = alert.id
      this.alertDrawerVisible = true
    },
    
    /**
     * 登记警情操作（打开表单弹窗，新建模式）
     */
    handleCreateAction() {
      // 重置表单和编辑状态（不显示消息）
      this.resetForm(false)
      this.editingAlertId = null
      this.editingAlertStatus = null
      // 打开表单弹窗
      this.showFormDialog = true
    },
    
    /**
     * 转警管理操作（暂时显示空弹窗）
     */
    handleTransferAction() {
      this.showTransferDialog = true
    },
    
    /**
     * 转事件管理操作（暂时显示空弹窗）
     */
    handleConvertAction() {
      this.showConversionDialog = true
    },
    
    /**
     * 审核工作台操作（暂时显示空弹窗）
     */
    handleApprovalAction() {
      this.showApprovalDialog = true
    },
    
    /**
     * 更新 FAB 按钮徽章数量
     */
    updateFabBadges() {
      // 更新草稿箱徽章
      const draftAction = this.fabActions.find(a => a.id === 'draft')
      if (draftAction) {
        draftAction.badge = this.draftAlerts.length
      }
      
      // 其他按钮的徽章数量暂时为0，后续阶段2会实现
      // TODO: 从后端获取待处理数量
    },
    
    async previewAlert(alert) {
      this.currentAlertId = alert.id
      this.alertDrawerVisible = true
    },
    
    /**
     * 加载警情详情（用于重试）
     */
    async loadAlertDetails() {
      // 触发组件重新加载
      if (this.$refs.alertDetailsDrawer) {
        await this.$refs.alertDetailsDrawer.loadDetails()
      }
    },
    
    handleEditAlert(alertData) {
      if (!alertData) return
      
      // 关闭详情抽屉
      this.alertDrawerVisible = false
      
      // 填充表单数据
      const locationData = {
        longitude: this.longitude,
        latitude: this.latitude,
        selectedLocation: this.selectedLocation
      }
      
      // 使用 mixin 方法填充表单数据
      const result = this.fillFormFromAlertData(alertData, null, locationData)
      
      // 更新组件数据
      this.form = result.formData
      this.longitude = result.locationData.longitude
      this.latitude = result.locationData.latitude
      this.selectedLocation = result.locationData.selectedLocation
      
      // 设置编辑状态
      this.editingAlertId = alertData.id
      this.editingAlertStatus = alertData.status
      
      // 打开表单弹窗
      this.showFormDialog = true
    },
    
    /**
     * 关闭表单弹窗
     */
    handleFormDialogClose() {
      this.showFormDialog = false
      // 注意：不重置表单，保留用户输入（用户可以通过关闭弹窗后重新打开来清空表单）
    },
    
    /**
     * 处理抽屉操作菜单命令
     */
    async handleDrawerAction(command, alertData) {
      if (!alertData) return
      
      switch (command) {
        case 'submit':
          await this.handleSubmitFromDrawer(alertData)
          break
        case 'transfer':
          await this.handleTransferFromDrawer(alertData)
          break
        case 'convert':
          await this.handleConvertFromDrawer(alertData)
          break
        case 'close':
          await this.handleCloseFromDrawer(alertData)
          break
      }
    },
    
    /**
     * 从抽屉直接提交草稿警情
     */
    async handleSubmitFromDrawer(alertData) {
      if (!alertData || alertData.status !== 'draft') {
        return
      }
      
      const result = await this.submitDraftAlert(alertData.id)
      
      if (result.success) {
        // Refresh drawer data
        if (this.$refs.alertDetailsDrawer) {
          await this.$refs.alertDetailsDrawer.loadDetails()
        }
        // Refresh draft list
        await this.loadDraftAlerts()
        // Refresh recent alerts list
        if (this.$refs.recentAlertsCard) {
          this.$refs.recentAlertsCard.loadTodayAlerts()
        }
      }
    },
    
    /**
     * 从抽屉直接关闭警情
     */
    async handleCloseFromDrawer(alertData) {
      if (!alertData || alertData.status === 'closed' || alertData.status === 'draft') {
        return
      }
      
      const result = await this.closeAlertById(alertData.id)
      
      if (result.success) {
        // Refresh drawer data
        if (this.$refs.alertDetailsDrawer) {
          await this.$refs.alertDetailsDrawer.loadDetails()
        }
        // Refresh draft list
        await this.loadDraftAlerts()
        // Refresh recent alerts list
        if (this.$refs.recentAlertsCard) {
          this.$refs.recentAlertsCard.loadTodayAlerts()
        }
        // Refresh stats card
        if (this.$refs.statsCard) {
          this.$refs.statsCard.loadTodayStats()
        }
      }
    },
    
    /**
     * 从抽屉发起转警
     */
    handleTransferFromDrawer(alertData) {
      if (!alertData || alertData.status !== 'received') {
        return
      }
      // 关闭抽屉
      this.alertDrawerVisible = false
      // 打开转警表单对话框
      this.currentAlertForTransfer = alertData
      this.showTransferFormDialog = true
    },
    
    /**
     * 从抽屉发起转事件
     */
    handleConvertFromDrawer(alertData) {
      if (!alertData || alertData.status !== 'received') {
        return
      }
      // 关闭抽屉
      this.alertDrawerVisible = false
      // 打开转事件表单对话框
      this.currentAlertForConvert = alertData
      this.showConvertFormDialog = true
    },
    
    /**
     * 提交转事件申请
     */
    async handleConvertSubmit(convertData) {
      if (!this.currentAlertForConvert) {
        return
      }
      
      this.converting = true
      try {
        const res = await convertAlert(this.currentAlertForConvert.id, convertData)
        
        if (res.code === 200) {
          const message = convertData.reviewRequired 
            ? '转事件申请已提交，等待审核'
            : '转事件申请已提交'
          this.$message.success(message)
          // 关闭转事件表单对话框
          this.showConvertFormDialog = false
          this.currentAlertForConvert = null
          
          // 刷新详情抽屉
          if (this.$refs.alertDetailsDrawer) {
            await this.$refs.alertDetailsDrawer.loadDetails()
          }
          
          // 刷新左侧列表
          if (this.$refs.recentAlertsCard) {
            this.$refs.recentAlertsCard.loadTodayAlerts()
          }
          if (this.$refs.statsCard) {
            this.$refs.statsCard.loadTodayStats()
          }
        } else {
          this.$message.error(res.msg || '转事件申请提交失败')
        }
      } catch (error) {
        console.error('转事件申请提交失败:', error)
        this.$message.error('转事件申请提交失败，请稍后重试')
      } finally {
        this.converting = false
      }
    },
    
    /**
     * 提交转警申请
     */
    async handleTransferSubmit(transferData) {
      if (!this.currentAlertForTransfer) {
        return
      }
      
      this.transferring = true
      try {
        const res = await transferAlert(this.currentAlertForTransfer.id, transferData)
        
        if (res.code === 200) {
          this.$message.success('转警申请已提交，等待审核')
          // 关闭转警表单对话框
          this.showTransferFormDialog = false
          this.currentAlertForTransfer = null
          
          // 刷新详情抽屉
          if (this.$refs.alertDetailsDrawer) {
            await this.$refs.alertDetailsDrawer.loadDetails()
          }
          
          // 刷新左侧列表
          if (this.$refs.recentAlertsCard) {
            this.$refs.recentAlertsCard.loadTodayAlerts()
          }
          if (this.$refs.statsCard) {
            this.$refs.statsCard.loadTodayStats()
          }
        } else {
          this.$message.error(res.msg || '转警申请提交失败')
        }
      } catch (error) {
        console.error('转警申请提交失败:', error)
        this.$message.error('转警申请提交失败，请稍后重试')
      } finally {
        this.transferring = false
      }
    },
    /**
     * 处理审核成功事件
     */
    async handleApprovalSuccess({ alertId, type, itemType }) {
      // 刷新最近警情列表（显示状态标签的地方）
      if (this.$refs.recentAlertsCard) {
        this.$refs.recentAlertsCard.loadTodayAlerts()
      }
      // 刷新统计卡片
      if (this.$refs.statsCard) {
        this.$refs.statsCard.loadTodayStats()
      }
      // 刷新地图标记
      if (this.$refs.alertMap) {
        this.$refs.alertMap.refresh()
      }
      // 如果详情抽屉打开且是同一个警情，刷新详情抽屉
      if (this.alertDrawerVisible && this.currentAlertId === alertId) {
        if (this.$refs.alertDetailsDrawer) {
          await this.$refs.alertDetailsDrawer.loadDetails()
        }
      }
    },
    
    /**
     * 处理地图标记点击（从 AlertMap 组件触发）
     */
    handleMapMarkerClicked(alertId) {
      // 打开详情抽屉
      this.currentAlertId = alertId
      this.alertDrawerVisible = true
    },
    
    /**
     * 处理位置选择确认
     */
    handleLocationConfirm(location) {
      // 更新表单数据
      this.form.location = location.address
      this.longitude = location.lng
      this.latitude = location.lat
      
      // 刷新地图标记（如果地图组件已加载）
      if (this.$refs.alertMap) {
        this.$refs.alertMap.refresh()
      }
    }
  },
  mounted() {
    // 页面加载时获取草稿警情列表
    this.loadDraftAlerts()
    
    // 初始化 FAB 徽章数量
    this.updateFabBadges()
    
    // 监听草稿列表变化，更新徽章
    this.$watch('draftAlerts', () => {
      this.updateFabBadges()
    }, { deep: true })
    
    // 设置自动刷新（每60秒刷新一次）
    this.refreshTimer = setInterval(() => {
      // 刷新草稿列表和最近警情列表
      this.loadDraftAlerts()
      if (this.$refs.recentAlertsCard) {
        this.$refs.recentAlertsCard.loadTodayAlerts()
      }
    }, 60000) // 60秒
  },
  beforeDestroy() {
    // 清除定时器
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
      this.refreshTimer = null
    }
  }
}
</script>

<style lang="scss" scoped>
.left-panel {
  height: 100%;
  overflow-y: auto;
}

.left-panel > * {
  margin-bottom: 16px;
}

.left-panel > *:last-child {
  margin-bottom: 0;
}

/* 最后一个卡片（RecentAlertsCard）要撑开并设置最小高度 */
.left-panel ::v-deep .info-card.recent-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 525px);
}

.left-panel ::v-deep .info-card.recent-card .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 允许 flex 子元素正确计算高度 */
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
}


.form-card {
  height: 100%; /* Fill parent column */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  /* 确保 el-card 本身是 flex 容器并占满高度 */
  ::v-deep {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }
  
  /* 隐藏 header（如果存在）或确保它不占用空间 */
  ::v-deep .el-card__header {
    display: none; /* 如果没有 header，隐藏它 */
    flex-shrink: 0; /* 如果有 header，不让它收缩 */
  }
  
  /* 确保 body 占满剩余空间 */
  ::v-deep .el-card__body {
    flex: 1 1 auto !important; /* 占满剩余空间 */
    padding: 0 !important; /* 移除内边距，让地图占满 */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important; /* 允许 flex 子元素正确计算高度 */
    overflow: hidden !important; /* 防止内容溢出 */
  }
}

.form-actions-inline {
  margin-top: 6px;
}


/* 控制台行布局 */
.console-row {
  height: calc(100vh - 135px);
  overflow: hidden;
}

.console-row .el-col {
  height: 100%;
}


</style>
