fzty/src/views/decision/testBuild/orderEdit.vue

<template>
  <div class="task-setting-container">
    <!-- 背景网格装饰 -->
    <div class="grid-bg"></div>

    <!-- 头部区域：军事风格 - 庄重威严 -->
    <div class="header">
      <div class="header-logo flex items-center">
        <i class="el-icon-shield text-red-500 mr-2 text-xl"></i>
        <h1>任务想定编辑</h1>
      </div>
      <div class="header-controls">
        <el-button type="success" icon="el-icon-back" @click="goBack" class="btn军事">
          返回
        </el-button>
        <el-button type="primary" icon="el-icon-save" @click="saveTask" class="btn军事">
          保存任务
        </el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="resetTask" class="btn军事">
          重置
        </el-button>
      </div>
    </div>

    <!-- 主布局容器：大屏分区明确 -->
    <el-container class="h-[calc(100vh-60px)] flex-row overflow-hidden">
      <!-- 左侧栏：任务配置 -->
      <el-aside width="20%" class="min-w-[240px] border-right border-[#0c4a6e] relative">
        <div class="aside-border-decoration"></div>
        <div class="task-panel h-full">
          <div class="task-content">
            <!-- 基本信息：大屏简洁风格 -->
            <div class="section-card mb-6">
              <div class="section-header">
                <h4 class="section-title">
                  <i class="el-icon-info"></i>
                  基本信息
                </h4>
              </div>
              <el-form :model="taskForm" label-width="100px" size="small" class="p-4">
                <el-form-item label="任务名称" class="mb-3">
                  <el-input v-model="taskForm.name" placeholder="请输入任务名称" :disabled="true" />
                </el-form-item>
                <el-form-item label="任务类别" class="mb-3">
                  <el-select v-model="taskForm.category" placeholder="请选择任务类别" :disabled="true">
                    <el-option label="保障任务" value="support" />
                    <el-option label="实战任务" value="combat" />
                  </el-select>
                </el-form-item>
                <el-form-item label="任务类型" class="mb-3">
                  <el-select v-model="taskForm.type" placeholder="请选择任务类型" :disabled="true">
                    <el-option label="防空作战" value="air-defense" />
                    <el-option label="对海作战" value="sea-combat" />
                    <el-option label="对地打击" value="ground-strike" />
                    <el-option label="电子对抗" value="electronic-warfare" />
                  </el-select>
                </el-form-item>
                <el-form-item label="导弹类型" class="mb-3">
                  <el-select v-model="taskForm.missileType" placeholder="请选择导弹类型" @change="updateTargetsByMissileType" :disabled="true">
                    <el-option label="地空导弹" value="surface-to-air" />
                    <el-option label="空地导弹" value="air-to-surface" />
                    <el-option label="反舰导弹" value="anti-ship" />
                    <el-option label="巡航导弹" value="cruise" />
                  </el-select>
                </el-form-item>
                <el-form-item label="导弹数量" class="mb-3">
                  <el-input-number v-model="taskForm.missileCount" :min="1" :max="100" size="small" @change="updateTargetsByMissileCount" :disabled="true" />
                </el-form-item>
                <el-form-item label="执行时间" class="mb-3">
                  <el-date-picker
                    v-model="taskForm.executeTime"
                    type="datetime"
                    placeholder="选择执行时间"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :disabled="true"
                  />
                </el-form-item>
                <el-form-item label="任务依据">
                  <el-input
                    v-model="taskForm.description"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入任务依据"
                    :disabled="true"
                  />
                </el-form-item>
              </el-form>
            </div>

            <!-- 靶标设置 -->
            <div class="section-card mb-6">
              <div class="section-header">
                <h4 class="section-title">
                  <i class="el-icon-location"></i>
                  靶标设置
                </h4>
                <el-button type="text" icon="el-icon-plus" @click="addTarget" class="text-green-400" :disabled="!canAddMoreTargets">
                  添加靶标
                </el-button>
              </div>
              <div class="target-list p-4">
                <div class="target-hint text-xs text-yellow-400 mb-2" v-if="taskForm.targets.length < taskForm.missileCount">
                  提示：可添加 {{ taskForm.missileCount - taskForm.targets.length }} 个靶标
                </div>
                <div class="target-hint text-xs text-red-400 mb-2" v-if="taskForm.targets.length > taskForm.missileCount">
                  警告：靶标数量超过导弹数量 {{ taskForm.targets.length - taskForm.missileCount }} 个
                </div>
                <div
                  class="target-item p-3 mb-3"
                  v-for="target in taskForm.targets"
                  :key="target.id"
                >
                  <div class="target-header flex justify-between items-center mb-2">
                    <span class="target-name font-bold truncate max-w-[150px]">{{ target.name }}</span>
                    <div class="target-actions flex">
                      <el-button type="text" icon="el-icon-edit" @click="editTarget(target)" class="p-1 text-blue-400" />
                      <el-button type="text" icon="el-icon-delete" @click="removeTarget(target)" class="p-1 text-red-400" />
                    </div>
                  </div>
                  <div class="target-info flex justify-between text-sm">
                    <span class="target-type">{{ target.type }}</span>
                    <span class="target-coord truncate max-w-[120px]">{{ target.coordinates }}</span>
                  </div>
                  <div class="target-threat mt-2 flex items-center text-xs">
                    <span class="mr-2">威胁等级:</span>
                    <div class="threat-bars flex gap-1">
                      <div
                        class="threat-bar"
                        v-for="n in 5"
                        :key="n"
                        :class="{ 'active': n <= target.threatLevel }"
                      ></div>
                    </div>
                  </div>
                  <div class="target-equipment mt-2 text-xs text-gray-400">
                    <span>负责装备:</span>
                    <el-select v-model="target.equipmentId" placeholder="选择装备" size="mini" @change="updateTargetEquipment(target.id, $event)">
                      <el-option
                        v-for="equip in allEquipment"
                        :key="equip.id"
                        :label="equip.label"
                        :value="equip.id"
                      />
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-aside>

      <!-- 中间主区域：装备配置（整合设备树和设备策略） -->
      <el-main class="p-0 h-full flex flex-col relative">
        <div class="main-border-decoration"></div>

        <!-- 装备配置内容区 -->
        <div class="equipment-content-box flex-1 overflow-y-auto p-4">
          <!-- 装备配置标题 -->
          <div class="section-card mb-6">
            <div class="section-header">
              <h4 class="section-title">
                <i class="el-icon-cpu mr-2"></i>
                装备配置
              </h4>
            </div>

            <!-- 装备树和详情的分栏布局 -->
            <div class="equipment-config-container p-4 grid grid-cols-3 gap-4">
              <!-- 左侧：装备树形结构 -->
              <div class="equipment-tree-container col-span-1">
                <div class="section-card h-full">
                  <div class="equipment-tree p-3">
                    <el-tree
                      :data="equipmentTree"
                      :props="defaultProps"
                      node-key="id"
                      @node-click="handleEquipmentClick"
                      :expand-on-click-node="false"
                      :highlight-current="true"
                    >
                      <span slot-scope="{ node, data }" class="custom-tree-node">
                        <span class="tree-node-content flex items-center">
                          <i :class="getEquipmentIcon(data)" class="mr-2"></i>
                          <span>{{ node.label }}</span>
                          <span v-if="data.indicatorClass" class="ml-2 w-2 h-2 rounded-full" :class="data.indicatorClass"></span>
                        </span>
                      </span>
                    </el-tree>
                  </div>
                </div>
              </div>

              <!-- 右侧：装备详情和策略配置 -->
              <div class="equipment-details-container col-span-2">
                <div v-if="selectedEquipment" class="section-card h-full">
                  <div class="section-header">
                    <h4 class="section-title">
                      <i :class="getEquipmentIcon(selectedEquipment)" class="mr-2"></i>
                      {{ selectedEquipment.label }} - 配置详情
                    </h4>
                  </div>
                  <div class="equipment-detail p-4">
                    <div class="grid grid-cols-2 gap-4 mb-4">
                      <div v-for="(item, index) in selectedEquipment.details" :key="index" class="detail-item">
                        <div class="detail-label text-sm text-gray-400">{{ item.label }}</div>
                        <div class="detail-value font-medium">{{ item.value }}</div>
                      </div>
                    </div>

                    <div class="mt-4 pt-4 border-t border-blue-900/30">
                      <h5 class="text-sm font-medium mb-3 text-blue-300">装备策略配置</h5>
                      <el-form :model="selectedEquipmentStrategy" label-width="100px" size="small">
                        <el-form-item label="工作模式">
                          <el-select
                            v-model="selectedEquipmentStrategy.mode"
                            placeholder="选择工作模式"
                            size="small"
                          >
                            <el-option v-for="option in selectedEquipmentStrategy.options" :key="option.value" :label="option.label" :value="option.value" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="工作状态">
                          <el-select
                            v-model="selectedEquipment.status"
                            placeholder="选择工作状态"
                            size="small"
                            @change="updateEquipmentStatus"
                          >
                            <el-option label="待命" value="standby" />
                            <el-option label="就绪" value="ready" />
                            <el-option label="维护中" value="maintenance" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="部署位置">
                          <el-select
                            v-model="selectedEquipment.position"
                            placeholder="选择部署位置"
                            size="small"
                            @change="updateEquipmentPosition"
                          >
                            <el-option label="左翼" value="left" />
                            <el-option label="右翼" value="right" />
                            <el-option label="中央" value="center" />
                            <el-option label="前沿" value="front" />
                            <el-option label="后方" value="rear" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="优先级">
                          <el-input-number v-model="selectedEquipmentStrategy.params.priority" :min="1" :max="10" size="mini" />
                        </el-form-item>
                        <el-form-item label="响应时间">
                          <el-input-number v-model="selectedEquipmentStrategy.params.responseTime" :min="1" size="mini" />
                        </el-form-item>
                        <el-form-item label="备注信息">
                          <el-input
                            v-model="selectedEquipment.notes"
                            type="textarea"
                            :rows="2"
                            placeholder="请输入备注信息"
                            @change="updateEquipmentNotes"
                          />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>

                <div v-else class="section-card h-full flex items-center justify-center p-4 text-gray-400">
                  <div class="text-center">
                    <i class="el-icon-cpu text-3xl mb-2"></i>
                    <p>请从左侧选择一个装备查看详情</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 装备数量概览 -->
          <div class="section-card mb-6">
            <div class="section-header">
              <h4 class="section-title">
                <i class="el-icon-dashboard mr-2"></i>
                装备数量概览
              </h4>
            </div>
            <div class="equipment-status-grid p-4 grid grid-cols-4 gap-3">
              <div class="status-card p-3 border border-blue-500/30 rounded">
                <div class="status-title text-sm text-gray-400 mb-1">总装备数</div>
                <div class="status-value text-2xl font-bold">{{ totalEquipment }}</div>
              </div>
              <div class="status-card p-3 border border-green-500/30 rounded">
                <div class="status-title text-sm text-gray-400 mb-1">测量装备数</div>
                <div class="status-value text-2xl font-bold text-green-400">{{ measurementEquipmentCount }}</div>
              </div>
              <div class="status-card p-3 border border-purple-500/30 rounded">
                <div class="status-title text-sm text-gray-400 mb-1">干扰装备数</div>
                <div class="status-value text-2xl font-bold text-purple-400">{{ jammingEquipmentCount }}</div>
              </div>
              <div class="status-card p-3 border border-red-500/30 rounded">
                <div class="status-title text-sm text-gray-400 mb-1">靶标装备数</div>
                <div class="status-value text-2xl font-bold text-red-400">{{ targetEquipmentCount }}</div>
              </div>
            </div>
          </div>

          <!-- 靶标-装备分配关系 -->
          <div class="section-card">
            <div class="section-header">
              <h4 class="section-title">
                <i class="el-icon-link mr-2"></i>
                靶标-装备分配关系
              </h4>
            </div>
            <div class="target-equipment-map p-4">
              <el-table
                :data="targetEquipmentMapData"
                border
                size="small"
                :header-cell-style="{background: 'rgba(30, 58, 138, 0.3)', color: '#bae6fd', borderColor: 'rgba(14, 165, 233, 0.2)'}"
                :row-style="{background: 'rgba(15, 23, 42, 0.5)', color: '#e0f2fe', borderColor: 'rgba(14, 165, 233, 0.1)'}"
              >
                <el-table-column prop="targetName" label="靶标名称"></el-table-column>
                <el-table-column prop="targetType" label="靶标类型"></el-table-column>
                <el-table-column prop="threatLevel" label="威胁等级">
                  <template slot-scope="scope">
                    <div class="threat-bars flex gap-1 justify-center">
                      {{scope.row.threatLevel}}
                      <div
                        class="threat-bar"
                        v-for="n in 5"
                        :key="n"
                        :class="{ 'active': n <= scope.row.threatLevel }"
                      ></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="equipmentName" label="负责装备" width="180"></el-table-column>
                <el-table-column prop="equipmentStatus" label="装备状态" width="100">
                  <template slot-scope="scope">
                    <span :class="statusLabelClass(scope.row.equipmentStatus)">{{ equipmentStatusText(scope.row.equipmentStatus) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>

      <!-- 右侧栏：任务预览（优化布局） -->
      <el-aside width="20%" class="min-w-[240px] border-left border-[#0c4a6e] relative">
        <div class="aside-border-decoration"></div>
        <div class="preview-panel h-full">
          <div class="preview-content p-4">
            <!-- 任务类型信息（放在最上面） -->
            <div class="preview-section mb-4 p-3">
              <div class="task-type-title text-center text-lg font-bold text-blue-300 mb-1">{{ taskTypeName }}</div>
              <div class="task-category text-center text-sm text-gray-400">{{ taskCategoryName }}</div>
              <div class="task-missile text-center text-xs mt-2 text-gray-400">
                导弹类型: {{ missileTypeName || '未选择' }}
              </div>
            </div>

            <!-- 任务概览：紧凑布局 -->
            <div class="preview-section mb-4">
              <h4 class="p-2 font-medium border-b m-0 text-sm">任务概览</h4>
              <div class="overview-stats p-3">
                <div class="stat-row-compact flex justify-between items-center py-1 border-b border-blue-900/10">
                  <span class="stat-label-compact text-xs">靶标数量</span>
                  <span class="stat-value-compact font-bold">{{ taskForm.targets.length }}</span>
                </div>
                <div class="stat-row-compact flex justify-between items-center py-1 border-b border-blue-900/10">
                  <span class="stat-label-compact text-xs">导弹数量</span>
                  <span class="stat-value-compact font-bold">{{ taskForm.missileCount || 0 }}</span>
                </div>
                <div class="stat-row-compact flex justify-between items-center py-1 border-b border-blue-900/10">
                  <span class="stat-label-compact text-xs">装备总数</span>
                  <span class="stat-value-compact font-bold">{{ totalEquipment }}</span>
                </div>
                <div class="stat-row-compact flex justify-between items-center py-1 border-b border-blue-900/10">
                  <span class="stat-label-compact text-xs">就绪装备</span>
                  <span class="stat-value-compact font-bold text-green-400">{{ readyEquipmentCount }}</span>
                </div>
                <div class="stat-row-compact flex justify-between items-center py-1">
                  <span class="stat-label-compact text-xs">执行时间</span>
                  <span class="stat-value-compact font-bold text-xs truncate">{{ taskForm.executeTime || '未指定' }}</span>
                </div>
                <div class="stat-row-compact flex justify-between items-center py-1">
                  <span class="stat-label-compact text-xs">倒计时</span>
                  <span class="stat-value-compact font-bold text-xs text-yellow-400">{{ formattedCountdown }}</span>
                </div>
              </div>
            </div>

            <!-- 执行时间轴：紧凑布局 -->
            <div class="preview-section">
              <h4 class="p-2 font-medium border-b m-0 text-sm">执行时间轴</h4>
              <div class="timeline-container p-3 relative">
                <div class="timeline-line absolute top-0 bottom-0 left-3 w-0.5"></div>
                <div
                  class="timeline-item-compact relative mb-3 pl-8"
                  v-for="event in events"
                  :key="event.id"
                >
                  <div class="timeline-dot absolute left-0 top-1 w-5 h-5 rounded-full flex items-center justify-center z-10" :class="dotClassMap[event.dotClass]">
                    <div class="w-1.5 h-1.5 rounded-full bg-white"></div>
                  </div>
                  <div class="timeline-content-compact">
                    <div class="flex justify-between items-start mb-0">
                      <div class="timeline-time text-xs font-bold">{{ event.time }}</div>
<!--                      <div class="timeline-status text-xs px-1.5 py-0 rounded" :class="statusClassMap[event.dotClass]">{{ event.status }}</div>-->
                      <div class="timeline-title text-xs font-bold">{{ event.title }}</div>
                    </div>
<!--                    <div class="timeline-title text-xs font-bold">{{ event.title }}</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-aside>
    </el-container>

    <!-- 添加靶标对话框 -->
    <el-dialog
      title="添加靶标"
      :visible.sync="showTargetDialog"
      width="30%"
      custom-class="target-dialog"
    >
      <el-form :model="targetForm" label-width="100px">
        <el-form-item label="靶标名称">
          <el-input v-model="targetForm.name" placeholder="请输入靶标名称"></el-input>
        </el-form-item>
        <el-form-item label="靶标类型">
          <el-select v-model="targetForm.type" placeholder="请选择靶标类型">
            <el-option label="空中靶标" value="空中靶标" :disabled="!isAirTargetAllowed"></el-option>
            <el-option label="海上靶标" value="海上靶标" :disabled="!isSeaTargetAllowed"></el-option>
            <el-option label="地面靶标" value="地面靶标" :disabled="!isGroundTargetAllowed"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="坐标位置">
          <el-input v-model="targetForm.coordinates" placeholder="格式：东经XX°XX′，北纬XX°XX′"></el-input>
        </el-form-item>
        <el-form-item label="威胁等级">
          <el-slider v-model="targetForm.threatLevel" :min="1" :max="5" show-input />
        </el-form-item>
        <el-form-item label="负责装备">
          <el-select v-model="targetForm.equipmentId" placeholder="选择负责装备">
            <el-option
              v-for="equip in allEquipment"
              :key="equip.id"
              :label="equip.label"
              :value="equip.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTargetDialog = false" class="btn军事">取消</el-button>
        <el-button type="primary" @click="confirmAddTarget" class="btn军事">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // 时间显示
      天文时间: '',
      绝对时间: '',

      // 任务表单数据 - 设置默认值
      taskForm: {
        name: '红旗-9B防空导弹拦截试验',
        category: 'combat', // 任务类别：support-保障任务，combat-实战任务
        type: 'air-defense',
        missileType: 'surface-to-air', // 导弹类型
        missileCount: 6, // 导弹数量
        executeTime: '2025-10-15 14:30:00',
        description: '本次试验旨在验证红旗-9B防空导弹系统对多批次、多类型空中靶标的拦截能力，测试在强电子干扰环境下的作战效能。',
        targets: [
          {
            id: 1,
            name: '高空侦察机',
            type: '空中靶标',
            coordinates: '东经121°25′，北纬30°15′',
            threatLevel: 5,
            equipmentId: 'A1'
          },
          {
            id: 2,
            name: '巡航导弹模拟靶',
            type: '空中靶标',
            coordinates: '东经121°30′，北纬30°20′',
            threatLevel: 4,
            equipmentId: 'A1'
          },
          {
            id: 3,
            name: '隐身战机模拟靶',
            type: '空中靶标',
            coordinates: '东经121°20′，北纬30°25′',
            threatLevel: 5,
            equipmentId: 'B2'
          }
        ]
      },

      // 装备树形结构数据
      equipmentTree: [
        {
          id: 'category1',
          label: '测量装备',
          children: [
            {
              id: 'A1',
              label: '高空观测装置A1',
              side: '',
              indicatorClass: 'bg-blue-500',
              status: 'ready',
              position: 'front',
              notes: '',
              details: [
                { label: '状态', value: '运行中' },
                { label: '覆盖范围', value: '3500米' },
                { label: '高度', value: '5000米' },
                { label: '观测精度', value: '92%' },
                { label: '功率', value: '100%' },
                { label: '电量', value: '86%' },
                { label: '发现目标', value: '3个' },
                { label: '数据链路', value: '稳定' }
              ]
            },
            {
              id: 'B2',
              label: '地面观测装置B2',
              side: '',
              indicatorClass: 'bg-blue-500',
              status: 'ready',
              position: 'center',
              notes: '',
              details: [
                { label: '状态', value: '运行中' },
                { label: '覆盖范围', value: '1200米' },
                { label: '高度', value: '100米' },
                { label: '观测精度', value: '88%' },
                { label: '功率', value: '90%' },
                { label: '电量', value: '92%' },
                { label: '发现目标', value: '2个' },
                { label: '数据链路', value: '稳定' }
              ]
            },
            {
              id: 'C3',
              label: '移动观测装置C3',
              side: '',
              indicatorClass: 'bg-blue-500',
              status: 'standby',
              position: 'rear',
              notes: '',
              details: [
                { label: '状态', value: '待命' },
                { label: '覆盖范围', value: '800米' },
                { label: '速度', value: '40km/h' },
                { label: '观测精度', value: '85%' },
                { label: '功率', value: '70%' },
                { label: '电量', value: '95%' },
                { label: '发现目标', value: '0个' },
                { label: '数据链路', value: '稳定' }
              ]
            }
          ]
        },
        {
          id: 'category2',
          label: '干扰装备',
          children: [
            {
              id: 'D1',
              label: '雷达干扰器D1',
              side: '',
              indicatorClass: 'bg-purple-500',
              status: 'standby',
              position: 'left',
              notes: '',
              details: [
                { label: '状态', value: '待命' },
                { label: '功率', value: '60%' },
                { label: '高度', value: '50米' },
                { label: '覆盖范围', value: '2000米' },
                { label: '电量', value: '95%' },
                { label: '干扰类型', value: '雷达波' },
                { label: '有效距离', value: '5km' },
                { label: '数据链路', value: '稳定' }
              ]
            },
            {
              id: 'E2',
              label: '光电干扰器E2',
              side: '',
              indicatorClass: 'bg-purple-500',
              status: 'ready',
              position: 'right',
              notes: '',
              details: [
                { label: '状态', value: '运行中' },
                { label: '功率', value: '80%' },
                { label: '干扰波段', value: '可见光-红外' },
                { label: '覆盖范围', value: '1500米' },
                { label: '电量', value: '88%' },
                { label: '干扰强度', value: '强' },
                { label: '数据链路', value: '稳定' }
              ]
            }
          ]
        },
        {
          id: 'category3',
          label: '靶标装备',
          children: [
            {
              id: 'redA',
              label: '空中靶标A集群',
              side: '',
              indicatorClass: 'bg-red-500',
              status: 'ready',
              position: 'front',
              notes: '',
              details: [
                { label: '状态', value: '就绪' },
                { label: '数量', value: '5' },
                { label: '速度', value: '350m/s' },
                { label: '高度', value: '2000米' },
                { label: '机动能力', value: '高' },
                { label: '雷达反射面积', value: '0.1-5㎡' },
                { label: '数据链路', value: '可控' }
              ]
            },
            {
              id: 'redB',
              label: '海上靶标B',
              side: '',
              indicatorClass: 'bg-red-500',
              status: 'standby',
              position: 'front',
              notes: '',
              details: [
                { label: '状态', value: '待命' },
                { label: '排水量', value: '500吨' },
                { label: '速度', value: '30节' },
                { label: '雷达反射面积', value: '500㎡' },
                { label: '机动能力', value: '中' },
                { label: '数据链路', value: '可控' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      // 选中装备的策略配置
      selectedEquipmentStrategy: {
        mode: '',
        options: [],
        params: {
          priority: 5,
          responseTime: 30
        }
      },

      // 时间轴事件数据
      events: [
        {
          id: 1,
          title: '靶标装备就位',
          time: 'T+00:00:00',
          description: '所有靶标装备到达指定位置',
          status: '全部就位',
          dotClass: 'warning',
          position: 50
        },
        {
          id: 2,
          title: '导弹准备发射',
          time: 'T+00:01:45',
          description: '导弹系统进入发射准备阶段',
          status: '准备中...',
          dotClass: 'warning',
          position: 70
        },
        {
          id: 3,
          title: '干扰装备启动',
          time: 'T-00:02:30',
          description: '干扰装备D1和E2开始启动',
          status: '功率: 60%',
          dotClass: 'info',
          position: 30
        },
        {
          id: 4,
          title: '试验开始',
          time: 'T+00:03:20',
          description: '导弹发射，测量系统开始记录数据',
          status: '进行中',
          dotClass: 'danger',
          position: 90
        },
        {
          id: 5,
          title: '观测装置部署完成',
          time: 'T-00:05:00',
          description: '完成高空观测装置A1、地面观测装置B2部署',
          status: '覆盖率: 92%',
          dotClass: 'info',
          position: 10
        },
      ],

      // 其他状态
      showTargetDialog: false,
      targetForm: {
        name: '',
        type: '',
        coordinates: '',
        threatLevel: 3,
        equipmentId: ''
      },
      selectedEquipment: null,

      // 时间轴点颜色映射
      dotClassMap: {
        info: 'bg-blue-500',    // 信息蓝
        warning: 'bg-yellow-500', // 警告黄
        danger: 'bg-red-500'   // 危险红
      },
      // 状态标签样式映射
      statusClassMap: {
        info: 'bg-blue-900/50 text-blue-300',
        warning: 'bg-yellow-900/50 text-yellow-300',
        danger: 'bg-red-900/50 text-red-300'
      }
    }
  },
  computed: {
    measurementEquipmentCount() {
      let count = 0;
      this.equipmentTree.forEach(category => {
        if (category.id === 'category1' && category.children) {
          count += category.children.length;
        }
      });
      return count;
    },
    jammingEquipmentCount() {
      let count = 0;
      this.equipmentTree.forEach(category => {
        if (category.id === 'category2' && category.children) {
          count += category.children.length;
        }
      });
      return count;
    },
    targetEquipmentCount() {
      let count = 0;
      this.equipmentTree.forEach(category => {
        if (category.id === 'category3' && category.children) {
          count += category.children.length;
        }
      });
      return count;
    },
    totalEquipment() {
      // 计算所有装备的总数
      let count = 0;

      this.equipmentTree.forEach(category => {
        if (category.children && category.children.length) {
          count += category.children.length;
        }
      });

      return count;
    },
    readyEquipmentCount() {
      // 计算就绪状态的装备数量
      let count = 0;

      this.equipmentTree.forEach(category => {
        if (category.children && category.children.length) {
          category.children.forEach(equip => {
            if (equip.status === 'ready') count++;
          });
        }
      });

      return count;
    },
    standbyEquipmentCount() {
      // 计算待命状态的装备数量
      let count = 0;

      this.equipmentTree.forEach(category => {
        if (category.children && category.children.length) {
          category.children.forEach(equip => {
            if (equip.status === 'standby') count++;
          });
        }
      });

      return count;
    },
    maintenanceEquipmentCount() {
      // 计算维护中状态的装备数量
      let count = 0;

      this.equipmentTree.forEach(category => {
        if (category.children && category.children.length) {
          category.children.forEach(equip => {
            if (equip.status === 'maintenance') count++;
          });
        }
      });

      return count;
    },
    allEquipment() {
      // 提取所有装备列表
      let equipment = [];

      this.equipmentTree.forEach(category => {
        if (category.children && category.children.length) {
          equipment = [...equipment, ...category.children];
        }
      });

      return equipment;
    },
    /*sortedEvents() {
      // 按时间排序事件，从T0开始递增
      return [...this.events].sort((a, b) => {
        // 解析时间格式为秒数以便比较
        const getSeconds = (timeStr) => {
          const sign = timeStr.startsWith('T+') ? 1 : -1;
          const timePart = timeStr.substring(2);
          const [hours, minutes, seconds] = timePart.split(':').map(Number);
          return sign * (hours * 3600 + minutes * 60 + seconds);
        };

        return getSeconds(a.time) - getSeconds(b.time);
      });
    },*/
    taskTypeName() {
      const typeMap = {
        'air-defense': '防空作战',
        'sea-combat': '对海作战',
        'ground-strike': '对地打击',
        'electronic-warfare': '电子对抗'
      };
      return typeMap[this.taskForm.type] || '未设置';
    },
    taskCategoryName() {
      const categoryMap = {
        'support': '保障任务',
        'combat': '实战任务'
      };
      return categoryMap[this.taskForm.category] || '未设置';
    },
    missileTypeName() {
      const missileTypeMap = {
        'surface-to-air': '地空导弹',
        'air-to-surface': '空地导弹',
        'anti-ship': '反舰导弹',
        'cruise': '巡航导弹'
      };
      return missileTypeMap[this.taskForm.missileType] || '';
    },
    canAddMoreTargets() {
      // 控制是否可以添加更多靶标
      return this.taskForm.missileCount > 0 && this.taskForm.targets.length < this.taskForm.missileCount * 2;
    },
    // 根据导弹类型判断允许的靶标类型
    isAirTargetAllowed() {
      return ['surface-to-air', 'air-to-surface', 'cruise'].includes(this.taskForm.missileType);
    },
    isSeaTargetAllowed() {
      return ['anti-ship', 'cruise'].includes(this.taskForm.missileType);
    },
    isGroundTargetAllowed() {
      return ['air-to-surface', 'cruise'].includes(this.taskForm.missileType);
    },
    formattedCountdown() {
      // 计算倒计时
      if (!this.taskForm.executeTime) return '未设置执行时间';

      const executeTime = new Date(this.taskForm.executeTime).getTime();
      const now = new Date().getTime();
      const diff = executeTime - now;

      if (diff < 0) return '已过期';

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

      return `${days}天${hours}时${minutes}分后执行`;
    },
    targetEquipmentMapData() {
      // 构建靶标-装备关系数据
      return this.taskForm.targets.map(target => {
        const equipment = this.allEquipment.find(equip => equip.id === target.equipmentId);
        return {
          targetName: target.name,
          targetType: target.type,
          threatLevel: target.threatLevel,
          equipmentName: equipment ? equipment.label : '未分配',
          equipmentStatus: equipment ? equipment.status : ''
        };
      });
    }
  },
  methods: {
    startShow() {
      this.$router.push('/Deduction/stratDeduction')
    },
    saveTask() {
      // 验证靶标设置不能为空
      if (this.taskForm.targets.length === 0) {
        this.$message.error('靶标设置不能为空，请添加至少一个靶标');
        return;
      }

      this.$message.success('任务保存成功')
    },
    goBack(){
      // 返回上一页逻辑
      this.$confirm('确定要退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => {
        // 取消重置
      });
    },
    startSimulation() {
      this.$message.info('开始任务推演...')
    },
    resetTask() {
      this.$confirm('确定要重置任务配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 重置表单逻辑
        this.$message.success('任务配置已重置');
      }).catch(() => {
        // 取消重置
      });
    },
    addTarget() {
      this.targetForm = {
        name: '',
        type: '',
        coordinates: '',
        threatLevel: 3,
        equipmentId: ''
      };
      this.showTargetDialog = true;
    },
    confirmAddTarget() {
      if (!this.targetForm.name || !this.targetForm.type || !this.targetForm.coordinates) {
        this.$message.warning('请填写完整靶标信息');
        return;
      }

      this.taskForm.targets.push({
        id: Date.now(),
        ...this.targetForm
      });

      this.showTargetDialog = false;
      this.$message.success('靶标添加成功');
    },
    editTarget(target) {
      this.targetForm = { ...target };
      this.showTargetDialog = true;
    },
    removeTarget(target) {
      this.$confirm(`确定要删除靶标"${target.name}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.taskForm.targets = this.taskForm.targets.filter(t => t.id !== target.id);
        this.$message.success('靶标已删除');
      }).catch(() => {
        // 取消删除
      });
    },
    // 处理装备点击事件
    handleEquipmentClick(data) {
      // 只处理叶子节点（具体装备）
      if (!data.children || data.children.length === 0) {
        this.selectedEquipment = { ...data };
        // 设置该装备对应的策略选项
        this.setEquipmentStrategyOptions(data);
      }
    },
    // 根据装备类型设置策略选项
    setEquipmentStrategyOptions(equipment) {
      // 根据不同类型的装备设置不同的策略选项
      if (equipment.id.startsWith('A') || equipment.id.startsWith('B') || equipment.id.startsWith('C')) {
        // 测量装备
        this.selectedEquipmentStrategy = {
          mode: 'track',
          options: [
            { label: '持续跟踪', value: 'track' },
            { label: '重点跟踪', value: 'focus' },
            { label: '扫描跟踪', value: 'scan' }
          ],
          params: {
            priority: 3,
            responseTime: 10
          }
        };
      } else if (equipment.id.startsWith('D') || equipment.id.startsWith('E')) {
        // 干扰装备
        this.selectedEquipmentStrategy = {
          mode: 'auto',
          options: [
            { label: '自动干扰模式', value: 'auto' },
            { label: '手动干扰模式', value: 'manual' },
            { label: '前置干扰模式', value: 'preemptive' }
          ],
          params: {
            priority: 5,
            responseTime: 30
          }
        };
      } else if (equipment.id.startsWith('red')) {
        // 靶标装备
        this.selectedEquipmentStrategy = {
          mode: 'evade',
          options: [
            { label: '规避模式', value: 'evade' },
            { label: '突防模式', value: 'penetrate' },
            { label: '佯动模式', value: 'feint' }
          ],
          params: {
            priority: 4,
            responseTime: 5
          }
        };
      }
    },
    // 更新装备状态
    updateEquipmentStatus() {
      this.updateEquipmentData();
    },
    // 更新装备位置
    updateEquipmentPosition() {
      this.updateEquipmentData();
    },
    // 更新装备备注
    updateEquipmentNotes() {
      this.updateEquipmentData();
    },
    // 更新树形结构中的装备数据
    updateEquipmentData() {
      if (!this.selectedEquipment) return;

      const updateNode = (nodes) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].id === this.selectedEquipment.id) {
            nodes[i] = { ...this.selectedEquipment };
            return true;
          }
          if (nodes[i].children && nodes[i].children.length) {
            if (updateNode(nodes[i].children)) {
              return true;
            }
          }
        }
        return false;
      };

      updateNode(this.equipmentTree);
    },
    // 更新靶标关联的装备
    updateTargetEquipment(targetId, equipmentId) {
      const target = this.taskForm.targets.find(t => t.id === targetId);
      if (target) {
        target.equipmentId = equipmentId;
      }
    },
    // 根据导弹类型更新靶标设置
    updateTargetsByMissileType() {
      // 根据选择的导弹类型过滤不兼容的靶标
      if (!this.taskForm.missileType) return;

      const compatibleTypes = [];
      if (this.isAirTargetAllowed) compatibleTypes.push('空中靶标');
      if (this.isSeaTargetAllowed) compatibleTypes.push('海上靶标');
      if (this.isGroundTargetAllowed) compatibleTypes.push('地面靶标');

      // 过滤不兼容的靶标
      this.taskForm.targets = this.taskForm.targets.filter(target =>
        compatibleTypes.includes(target.type)
      );

      // 如果没有靶标，自动创建一个兼容的靶标
      if (this.taskForm.targets.length === 0) {
        this.taskForm.targets.push({
          id: Date.now(),
          name: `靶标${compatibleTypes[0]}`,
          type: compatibleTypes[0],
          coordinates: '东经120°00′，北纬30°00′',
          threatLevel: 3,
          equipmentId: ''
        });
      }
    },
    // 根据导弹数量更新靶标设置
    updateTargetsByMissileCount() {
      // 如果靶标数量超过导弹数量的2倍，删除多余的靶标
      const maxTargets = this.taskForm.missileCount * 2;
      if (this.taskForm.targets.length > maxTargets) {
        this.taskForm.targets = this.taskForm.targets.slice(0, maxTargets);
        this.$message.info(`靶标数量已调整为${maxTargets}个（不超过导弹数量的2倍）`);
      }
    },
    // 获取装备图标
    getEquipmentIcon(data) {
      // 判断是否为类别节点
      if (data.children && data.children.length > 0) {
        return 'el-icon-folder-opened';
      }

      // 根据装备类型返回不同图标
      if (data.id.startsWith('A') || data.id.startsWith('B') || data.id.startsWith('C')) {
        return 'el-icon-eye';
      } else if (data.id.startsWith('D') || data.id.startsWith('E')) {
        return 'el-icon-wifi';
      } else if (data.id.startsWith('red')) {
        return 'el-icon-target';
      }

      return 'el-icon-cpu';
    },
    // 装备状态文本转换
    equipmentStatusText(status) {
      const statusMap = {
        'ready': '就绪',
        'standby': '待命',
        'maintenance': '维护中'
      };
      return statusMap[status] || status;
    },
    // 装备状态标签样式
    statusLabelClass(status) {
      const classMap = {
        'ready': 'text-green-400 bg-green-900/30 px-1.5 py-0 rounded text-xs',
        'standby': 'text-yellow-400 bg-yellow-900/30 px-1.5 py-0 rounded text-xs',
        'maintenance': 'text-red-400 bg-red-900/30 px-1.5 py-0 rounded text-xs'
      };
      return classMap[status] || '';
    },
    // 更新时间显示
    updateTime() {
      const now = new Date();
      this.天文时间 = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      }).replace(/\//g, '-');

      // 模拟绝对时间
      const epoch = new Date('2000-01-01T00:00:00Z');
      const diff = Math.floor((now - epoch) / 1000);
      this.绝对时间 = `J${diff}`;
    }
  },
  watch: {
    // 监听导弹类型变化，更新靶标设置
    'taskForm.missileType': function() {
      this.updateTargetsByMissileType();
    }
  },
  mounted() {
    // 初始化时间
    this.updateTime();
    // 每秒更新时间
    setInterval(this.updateTime, 1000);
  }
}
</script>

<style lang="scss" scoped>
/* 军事风格大屏基础样式 - 深色背景，高对比度 */
.task-setting-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #050c1a; /* 深色军事背景 */
  color: #e0f2fe; /* 主文本色 - 浅蓝色 */
  font-family: "Microsoft YaHei", Arial, sans-serif;
  position: relative;
  overflow: hidden;
}

/* 军事网格背景 */
.grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(14, 55, 107, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 55, 107, 0.1) 1px, transparent 1px);
  pointer-events: none;
  z-index: 0;
}

/* 头部样式：军事风格 - 庄重威严 */
.header {
  flex: 0 0 60px;
  background-color: #0f172a; /* 头部深色背景 */
  background-image: linear-gradient(to right, #0f172a, #1e3a8a);
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  border-bottom: 1px solid #0ea5e9;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.2);
  position: relative;
  z-index: 10;

  .header-logo {
    display: flex;
    align-items: center;

    h1 {
      font-size: 1.5rem;
      color: #bae6fd;
      margin: 0;
      white-space: nowrap;
      text-shadow: 0 0 5px rgba(14, 165, 233, 0.5);
    }
  }

  .header-time {
    display: flex;
    gap: 20px;
    color: #93c5fd;
    font-size: 14px;

    .time-item {
      padding: 5px 10px;
      background-color: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(14, 165, 233, 0.3);
      border-radius: 3px;
    }
  }

  .header-controls {
    display: flex;
    gap: 15px;
  }
}

/* 军事风格按钮 */
.btn军事 {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(14, 165, 233, 0.5) !important;
  box-shadow: 0 0 5px rgba(14, 165, 233, 0.3);

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: all 0.5s ease;
  }

  &:hover:after {
    left: 100%;
  }
}

/* 侧边栏装饰线 */
.aside-border-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom,
    rgba(14, 165, 233, 0) 0%,
    rgba(14, 165, 233, 0.5) 50%,
    rgba(14, 165, 233, 0) 100%);
  z-index: 1;
}

/* 主区域装饰线 */
.main-border-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom,
    rgba(14, 165, 233, 0) 0%,
    rgba(14, 165, 233, 0.5) 50%,
    rgba(14, 165, 233, 0) 100%);
  z-index: 1;
}

/* 左侧任务面板：军事风格分区明确 */
.task-panel {
  width: 100%;
  background-color: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(14, 165, 233, 0.2);

  .panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(14, 165, 233, 0.3);
    flex-shrink: 0;
    background-color: rgba(30, 58, 138, 0.6);
    background-image: linear-gradient(to right, rgba(30, 58, 138, 0.8), rgba(15, 23, 42, 0.8));

    h3 {
      color: #bae6fd;
      font-size: 1rem;
      margin: 0;
      font-weight: 500;
      display: flex;
      align-items: center;
    }
  }

  .task-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    min-height: 0;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.5);
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(59, 130, 246, 0.5);
      border-radius: 3px;
    }
  }
}

/* 中间装备配置区域 */
.equipment-content-box {
  background-color: rgba(5, 12, 26, 0.9);
  min-height: 0;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.5);
    border-radius: 3px;
  }
}

.equipment-config-container {
  height: calc(100% - 40px);
}

.equipment-tree-container {
  height: 100%;
}

.equipment-details-container {
  height: 100%;
}

.equipment-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.status-card {
  background-color: rgba(15, 23, 42, 0.6);
  border-radius: 3px;
  transition: all 0.2s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.1);
  }

  .status-title {
    color: #94a3b8;
  }

  .status-value {
    color: #60a5fa;
    text-shadow: 0 0 3px rgba(59, 130, 246, 0.2);
  }
}

/* 树形结构样式 */
.equipment-tree {
  max-height: calc(100% - 20px);
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.5);
    border-radius: 3px;
  }
}

.custom-tree-node {
  width: 100%;
  display: inline-block;
}

.tree-node-content {
  width: 100%;
  padding: 2px 0;
  color: #e0f2fe;

  &:hover {
    color: #60a5fa;
  }
}

/* 右侧预览面板：军事风格数据突出 */
.preview-panel {
  width: 100%;
  background-color: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid rgba(14, 165, 233, 0.2);

  .panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(14, 165, 233, 0.3);
    flex-shrink: 0;
    background-color: rgba(30, 58, 138, 0.6);
    background-image: linear-gradient(to right, rgba(30, 58, 138, 0.8), rgba(15, 23, 42, 0.8));
  }

  .preview-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.5);
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(59, 130, 246, 0.5);
      border-radius: 3px;
    }
  }
}

/* 通用模块样式：军事风格简洁 */
.section-card {
  background-color: rgba(15, 23, 42, 0.7);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(14, 165, 233, 0.3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 3px 15px rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.5);
  }
}

.section-header {
  background-color: rgba(30, 58, 138, 0.5);
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(14, 165, 233, 0.2);

  .section-title {
    color: #bae6fd;
    font-size: 14px;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
  }
}

/* 表单样式：军事风格简洁易读 */
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
  background-color: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(14, 165, 233, 0.3);
  color: #e0f2fe;
  width: 100%;
  border-radius: 3px;
  height: 32px;
  font-size: 14px;

  &:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }

  &::placeholder {
    color: #64748b;
  }

  &:disabled {
    background-color: rgba(15, 23, 42, 0.5);
    color: #94a3b8;
    cursor: not-allowed;
  }
}

.el-textarea__inner {
  min-height: 80px !important;
  height: auto;
  resize: vertical;
}

/* 下拉框样式：军事风格简洁 */
::v-deep .el-select-dropdown {
  background-color: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 3px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

  .el-select-dropdown__item {
    color: #e0f2fe;
    padding: 8px 16px;
    font-size: 14px;

    &:hover {
      background-color: rgba(30, 58, 138, 0.5);
    }

    &.selected {
      background-color: rgba(59, 130, 246, 0.5);
      color: white;
    }
  }
}

/* 输入框数字控件样式：军事风格简洁 */
::v-deep .el-input-number {
  .el-input-number__decrease,
  .el-input-number__increase {
    background-color: rgba(30, 58, 138, 0.5);
    border-color: rgba(14, 165, 233, 0.3);
    color: #e0f2fe;
    width: 30px;
    height: 30px;
    line-height: 30px;

    &:hover {
      background-color: rgba(30, 58, 138, 0.8);
      color: white;
    }

    &:disabled {
      background-color: rgba(15, 23, 42, 0.5);
      color: #94a3b8;
      cursor: not-allowed;
    }
  }
}

/* 靶标项样式：军事风格清晰 */
.target-item {
  background-color: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 3px;
  transition: all 0.2s;

  &:hover {
    border-color: rgba(14, 165, 233, 0.5);
    background-color: rgba(15, 23, 42, 0.8);
  }

  .target-name {
    color: #bae6fd;
  }

  .target-type {
    color: #60a5fa;
  }

  .target-coord {
    color: #94a3b8;
  }

  .target-threat {
    color: #94a3b8;

    .threat-bars {
      height: 6px;
    }

    .threat-bar {
      width: 6px;
      height: 100%;
      background-color: rgba(100, 116, 139, 0.3);
      border-radius: 1px;

      &.active {
        background-color: #f97316;
      }
    }
  }

  .target-equipment {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(14, 165, 233, 0.2);
  }
}

.target-hint {
  padding: 4px 6px;
  border-radius: 3px;
  background-color: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(234, 179, 8, 0.3);
}

/* 装备详情样式 */
.equipment-detail {
  background-color: rgba(15, 23, 42, 0.5);
  border-radius: 3px;
}

.detail-item {
  margin-bottom: 12px;

  .detail-label {
    color: #94a3b8;
    margin-bottom: 4px;
  }

  .detail-value {
    color: #e0f2fe;
  }
}

/* 靶标-装备分配关系表格样式 */
::v-deep .el-table {
  background-color: transparent;
  color: #e0f2fe;

  .el-table__empty-text {
    color: #94a3b8;
  }

  .el-table__row:hover > td {
    background-color: rgba(30, 58, 138, 0.2);
  }
}

/* 任务概览样式：紧凑布局 */
.preview-section {
  background-color: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 3px 15px rgba(14, 165, 233, 0.1);
  }
}

.preview-section h4 {
  color: #bae6fd;
  border-bottom-color: rgba(14, 165, 233, 0.2);
  display: flex;
  align-items: center;
}

.overview-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-row-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label-compact {
  color: #94a3b8;
}

.stat-value-compact {
  color: #60a5fa;
}

/* 时间轴样式：紧凑布局 */
.timeline-container {
  padding-left: 10px;
}

.timeline-line {
  background-color: rgba(14, 165, 233, 0.3);
  left: 8px;
}

.timeline-item-compact {
  position: relative;
  transition: all 0.3s;
  padding-bottom: 5px;

  &:hover {
    transform: translateX(3px);
  }
}

.timeline-content-compact {
  background-color: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 3px;
  padding: 3px 5px;
}

.timeline-time {
  color: #60a5fa;
}

.timeline-title {
  color: #bae6fd;
}

.timeline-description {
  color: #94a3b8;
  line-height: 1.5;
}

.timeline-dot {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.8);
}

/* 对话框样式：军事风格适配 */
::v-deep .target-dialog, ::v-deep .equipment-dialog {
  .el-dialog {
    background-color: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  .el-dialog__header {
    background-color: rgba(30, 58, 138, 0.6);
    border-bottom: 1px solid rgba(14, 165, 233, 0.3);

    .el-dialog__title {
      color: #bae6fd;
    }
  }

  .el-dialog__body {
    background-color: rgba(15, 23, 42, 0.95);
    color: #e0f2fe;
  }

  .el-dialog__footer {
    background-color: rgba(15, 23, 42, 0.95);
    border-top: 1px solid rgba(14, 165, 233, 0.3);
  }
}

/* 按钮样式优化：军事风格突出 */
::v-deep .el-button {
  border-radius: 3px;
  border: none;

  &.el-button--primary {
    background-color: #1e40af;
    color: white;

    &:hover {
      background-color: #3b82f6;
    }
  }

  &.el-button--success {
    background-color: #065f46;
    color: white;

    &:hover {
      background-color: #16a34a;
    }
  }

  &.el-button--warning {
    background-color: #92400e;
    color: white;

    &:hover {
      background-color: #d97706;
    }
  }

  &.el-button--text {
    color: #94a3b8;

    &:hover {
      color: #bae6fd;
      background-color: rgba(148, 163, 184, 0.1);
    }
  }
}

/* 滑块样式：军事风格适配 */
::v-deep .el-slider {
  .el-slider__runway {
    background-color: rgba(51, 65, 85, 0.5);
  }

  .el-slider__bar {
    background-color: #3b82f6;
  }

  .el-slider__button {
    border-color: #3b82f6;
  }
}

/* 消息提示样式：军事风格适配 */
::v-deep .el-message {
  background-color: rgba(30, 58, 138, 0.8);
  border-color: rgba(14, 165, 233, 0.3);
  color: #e0f2fe;
}

/* 确认框样式：军事风格适配 */
::v-deep .el-dialog--confirm {
  .el-dialog__body {
    color: #e0f2fe;
  }
}

/* 全局容器背景色确认 */
::v-deep .el-container {
  background: transparent;
}

/* 树形控件样式适配 */
::v-deep .el-tree {
  background-color: transparent;

  .el-tree-node__content {
    color: #e0f2fe;
    height: 32px;

    &:hover {
      background-color: rgba(30, 58, 138, 0.3);
    }
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
  }

  .el-tree-node__expand-icon {
    color: #94a3b8;

    &:hover {
      color: #60a5fa;
    }
  }
}

/* 大屏响应式优化 */
@media (max-width: 1600px) {
  .equipment-config-container {
    grid-template-columns: 1fr 2fr;
  }
}

@media (max-width: 1200px) {
  .equipment-config-container {
    grid-template-columns: 1fr;
  }

  .equipment-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

</style>