fzty/src/views/Deduction/taskSetting/Scenarioediting.vue

<template>
  <div>
    <DarkLayout :query-form="queryForm">
      <!-- 查询表单插槽 -->
      <template #query-form>
        <el-form-item label="推演任务名称">
          <el-input
              v-model="queryForm.name"
              placeholder="请输入推演任务名称"
              clearable
          />
        </el-form-item>
      </template>

      <!-- Header右侧操作按钮 -->
      <template #header-actions>
        <el-button icon="el-icon-search" type="primary" @click="handleQuery">
          查询
        </el-button>

        <el-button
            @click="openAddDialog"
            icon="el-icon-plus"
            class="blue-btn"
        >
          添加
        </el-button>
      </template>

      <!-- 主要内容 -->
      <template #main>
        <ScenarioeditingCard
            v-if="planList.length > 0"
            v-for="plan in planList"
            :key="plan.id + '-' + plan.createTime"
            :plan="plan"
            @edit="handleEdit(plan)"
            @view-detail="openEditDialog(plan)"
        />
        <el-empty v-else description="暂无方案数据" />
      </template>

      <!-- 底部右侧分页 -->
      <template #footer-actions>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
        />
      </template>
    </DarkLayout>

    <!-- 任务详情弹窗 -->
    <DarkDialog
        title="任务详情"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="方案名称">{{ currentPlan.planName }}</el-descriptions-item>
        <el-descriptions-item label="任务名称">{{ currentPlan.taskName }}</el-descriptions-item>
        <el-descriptions-item label="任务代号">{{ currentPlan.taskCode }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ currentPlan.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ currentPlan.endTime }}</el-descriptions-item>
        <el-descriptions-item label="编制状态">{{ currentPlan.compileStatus }}</el-descriptions-item>
        <el-descriptions-item label="密级">{{ currentPlan.secretLevel }}</el-descriptions-item>
        <el-descriptions-item label="保密期限">{{ currentPlan.secretYears }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ currentPlan.status }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </DarkDialog>

    <!-- 基本信息弹窗 -->
    <DarkDialog title="基本信息" :visible.sync="basicInfoVisible" width="760px">
      <div class="basic-info">
        <div class="top-line">
          <span class="chip" :class="secretChipClass">{{ selectedPlan.secretLevel }}</span>
          <span class="chip soft" :class="statusClass(selectedPlan.status)">
            {{ selectedPlan.status }}
          </span>
        </div>
        <div class="section">
          <div class="section-title">任务信息</div>
          <div class="info-grid">
            <div class="kv"><div class="kv-label">任务代号</div><div class="kv-value">{{ selectedPlan.taskCode }}</div></div>
            <div class="kv"><div class="kv-label">任务名称</div><div class="kv-value">{{ selectedPlan.taskName }}</div></div>
            <div class="kv"><div class="kv-label">任务开始时间</div><div class="kv-value">{{ selectedPlan.taskStartTime }}</div></div>
            <div class="kv"><div class="kv-label">任务结束时间</div><div class="kv-value">{{ selectedPlan.taskEndTime }}</div></div>
            <div class="kv"><div class="kv-label">任务状态</div><div class="kv-value">{{ selectedPlan.taskStatus }}</div></div>
            <div class="kv"><div class="kv-label">保密期限</div><div class="kv-value">{{ selectedPlan.confidentialLevelYears }}</div></div>
          </div>
        </div>
        <div class="section">
          <div class="section-title">创建信息</div>
          <div class="info-grid">
            <div class="kv"><div class="kv-label">创建人</div><div class="kv-value">{{ selectedPlan.username }}</div></div>
            <div class="kv"><div class="kv-label">创建时间</div><div class="kv-value">{{ selectedPlan.createTime }}</div></div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="basicInfoVisible = false">关闭</el-button>
      </span>
    </DarkDialog>

    <!-- 新建/编辑 推演任务设定（单选总体方案） -->
    <DarkDialog :title="editDialogTitle" :visible.sync="editVisible" width="75%">
      <el-form
          ref="editFormRef"
          :model="editForm"
          :rules="baseRules"
          label-width="120px"
          class="edit-form-dark"
      >
        <div class="form-grid">
          <!-- 基础信息 -->
          <el-form-item label="推演任务名称" prop="simulationTaskName">
            <el-input v-model="editForm.simulationTaskName" clearable />
          </el-form-item>

          <el-form-item label="开始时间" prop="simulationStartTime" class="span-2">
            <el-date-picker
                v-model="editForm.simulationStartTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始时间"
                style="width: 100%;"
            />
          </el-form-item>

          <!-- 选择试验任务 -->
          <div class="task-select-section span-2">
            <h3 class="section-title">
              <i class="el-icon-document mr-2"></i> 选择试验任务
            </h3>
            <p class="section-desc">请选择要关联的试验任务，系统将根据任务推荐对应的总体方案</p>

            <el-row :gutter="20">
              <el-col :span="8" v-for="(task, index) in taskList" :key="index">
                <div
                    class="task-card"
                    :class="{ 'task-card--active': selectedTask && selectedTask.code === task.code }"
                    @click="handleTaskSelect(task)"
                >
                  <div class="flex justify-between items-center mb-3">
                    <h4 class="task-title">{{ task.name }}</h4>
                    <el-tag :type="getTagType(task.status)" size="mini">
                      {{ task.statusText }}
                    </el-tag>
                  </div>
                  <div class="task-info">
                    <p>任务代号：{{ task.code }}</p>
                    <p>开始时间：{{ task.startTime }}</p>
                    <p>结束时间：{{ task.endTime }}</p>
                    <p>任务类型：{{ task.type }}</p>
                  </div>
                  <el-button class="task-btn" type="primary">选择此任务</el-button>
                </div>
              </el-col>
            </el-row>
          </div>

          <!--选择综合布设方案（单选） -->
          <div v-if="currentOverallPlans.length" class="plan-select-section span-2">
            <div class="plan-select-header">
              <h3 class="section-title">
                <i class="el-icon-collection mr-2"></i>选择综合布设方案
              </h3>
              <el-button type="text" @click="clearPlanSelection">清空</el-button>
            </div>

            <p class="section-desc">
              已为任务「{{ selectedTask && selectedTask.name }}」加载 {{ currentOverallPlans.length }} 个可用总体方案。
            </p>

            <el-row :gutter="20">
              <el-col :span="8" v-for="plan in currentOverallPlans" :key="plan.id">
                <div
                    class="plan-card"
                    :class="{ 'plan-card--selected': isPlanSelected(plan) }"
                    @click="togglePlan(plan)"
                >
                  <div class="plan-card__header">
                    <span class="plan-card__title" :title="plan.planName">{{ plan.planName }}</span>
                    <i v-if="isPlanSelected(plan)" class="el-icon-check plan-card__check"></i>
                  </div>

                  <div class="plan-card__meta">
                    <span>任务：{{ plan.taskName }}</span>
                    <span>版本：{{ plan.version }}</span>
                  </div>

                  <div class="plan-card__desc">
                    <p>任务代号：{{ plan.taskCode }}</p>
                    <p>开始时间：{{ plan.startTime }}</p>
                    <p>结束时间：{{ plan.endTime }}</p>
                    <p>保密等级：{{ plan.secretLevel }}</p>
                    <p>保密期限：{{ plan.secretYears }}</p>
                  </div>

                  <div class="plan-card__footer">
<!--                    <el-tag size="mini" :type="statusTagType(plan.status)">{{ plan.status }}</el-tag>-->
                    <el-tag size="mini" :type="plan.interferenceSchemeStatus === '已编制' ? 'success' : (plan.interferenceSchemeStatus === '编制中' ? 'warning' : 'info')">
                      干扰方案：{{ plan.interferenceSchemeStatus }}
                    </el-tag>
                    <el-tag size="mini" :type="plan.measurementSchemeStatus === '已编制' ? 'success' : (plan.measurementSchemeStatus === '编制中' ? 'warning' : 'info')">
                      测量方案：{{ plan.measurementSchemeStatus }}
                    </el-tag>
                    <el-tag size="mini" :type="plan.targetSchemeStatus === '已编制' ? 'success' : (plan.targetSchemeStatus === '编制中' ? 'warning' : 'info')">
                      目标方案：{{ plan.targetSchemeStatus }}
                    </el-tag>
                  </div>
                </div>
              </el-col>
            </el-row>

            <div class="selected-summary" v-if="selectedOverallPlanNames.length">
              <el-alert
                  :title="`已选择：` + selectedOverallPlanNames.join('、')"
                  type="success"
                  :closable="false"
                  show-icon
              />
            </div>
          </div>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEditSave">保 存</el-button>
      </span>
    </DarkDialog>
  </div>
</template>

<script>
import DarkLayout from '@/components/GlobalComponents/DarkLayout.vue'
import TaskUserCard from '@/components/Components/TaskUserCard.vue'
import DarkDialog from "@/components/Components/DarkDialog.vue";
import ScenarioeditingCard from "@/components/GlobalComponents/ScenarioeditingCard.vue";

export default {
  components: {
    ScenarioeditingCard,
    DarkDialog,
    DarkLayout,
    TaskUserCard
  },
  data() {
    return {
      /* 可选试验任务 */
      taskList: [
        {
          name: '新型导弹打击试验',
          status: 'creatable',
          statusText: '可创建',
          code: 'TASK-2023-001',
          startTime: '2023-01-01',
          endTime: '2023-12-31',
          type: '导弹试验'
        },
        {
          name: '电子对抗演练',
          status: 'creatable',
          statusText: '可创建',
          code: 'TASK-2023-002',
          startTime: '2023-02-01',
          endTime: '2023-11-30',
          type: '电子对抗'
        },
        {
          name: '综合试验验证',
          status: 'inProgress',
          statusText: '进行中',
          code: 'TASK-2023-003',
          startTime: '2023-03-01',
          endTime: '2023-10-31',
          type: '综合验证'
        }
      ],

      /* 任务 -> 总体方案（按任务分类，使用你的新数据结构） */
      overallPlanDict: {
        'TASK-2023-001': [
          {
            id: '1',
            planName: '新型导弹打击试验-综合布设方案',
            taskName: '新型导弹打击试验',
            taskCode: 'TASK-2023-001',
            startTime: '2023-01-01',
            endTime: '2023-12-31',
            secretLevel: '秘密',
            secretYears: '10年',
            status: '有效',
            interferenceSchemeStatus: '已编制',
            measurementSchemeStatus: '已编制',
            targetSchemeStatus: '已编制',
            version: 'V1.0.0'
          },
          {
            id: '5',
            planName: '电子对抗演练-综合布设方案',
            taskName: '电子对抗演练',
            taskCode: 'TASK-2023-001',
            startTime: '2023-01-01',
            endTime: '2023-12-31',
            secretLevel: '秘密',
            secretYears: '10年',
            status: '有效',
            interferenceSchemeStatus: '已编制',
            measurementSchemeStatus: '已编制',
            targetSchemeStatus: '已编制',
            version: 'V1.0.0'
          }
        ],
        'TASK-2023-002': [
          {
            id: '2',
            planName: '电子对抗演练-综合布设方案',
            taskName: '电子对抗演练',
            taskCode: 'TASK-2023-002',
            startTime: '2023-02-01',
            endTime: '2023-11-30',
            secretLevel: '机密',
            secretYears: '15年',
            status: '有效',
            interferenceSchemeStatus: '已编制',
            measurementSchemeStatus: '已编制',
            targetSchemeStatus: '已编制',
            version: 'V1.1.0'
          }
        ],
        'TASK-2023-003': [
          {
            id: '3',
            planName: '电子对抗演练-综合布设方案',
            taskName: '电子对抗演练',
            taskCode: 'TASK-2023-003',
            startTime: '2023-03-01',
            endTime: '2023-10-31',
            secretLevel: '绝密',
            secretYears: '20年',
            status: '有效',
            interferenceSchemeStatus: '已编制',
            measurementSchemeStatus: '已编制',
            targetSchemeStatus: '已编制',
            version: 'V0.9.0'
          },
          {
            id: '4',
            planName: '新型导弹打击试验-综合布设方案',
            taskName: '新型导弹打击试验',
            taskCode: 'TASK-2023-003',
            startTime: '2023-03-01',
            endTime: '2023-10-31',
            secretLevel: '绝密',
            secretYears: '20年',
            status: '有效',
            interferenceSchemeStatus: '已编制',
            measurementSchemeStatus: '已编制',
            targetSchemeStatus: '已编制',
            version: 'V0.9.0'
          }
        ]
      },

      /* 当前选择状态（单选） */
      editVisible: false,
      editMode: 'edit', // 'add' | 'edit'
      selectedTask: null,
      currentOverallPlans: [],
      selectedOverallPlanId: '',

      /* 表单数据 */
      editForm: {
        timeRange: [],
        id: '',
        planName: '',
        simulationTaskName: '',
        simulationStartTime: '',
        simulationEndTime: '',
        simulationCount: '',
        simulationParticipantTasks: '',
        secretLevel: '秘密',
        status: '草稿',
        username: '',
        createTime: '',
        isScenarioEdited: false,
        selectedOverallPlans: [],
        selectedOverallPlanIds: []
      },

      baseRules: {
        simulationTaskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        simulationStartTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        simulationEndTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' },
          { validator: (rule, value, cb) => this.validateTimeRange(rule, value, cb), trigger: 'change' }
        ],
        secretLevel: [{ required: true, message: '请选择密级', trigger: 'change' }]
      },

      /* 其他弹窗与数据 */
      basicInfoVisible: false,
      selectedPlan: {},
      tableData: [
        { date: '2023-06-01', name: '张三', address: '北京市海淀区' },
        { date: '2023-06-02', name: '李四', address: '上海市浦东新区' }
      ],
      dialogVisible: false,
      currentPlan: {},

      /* 列表和分页 */
      queryForm: { name: '', taskCode: '' },
      planList: [
        {
          id: 'sim-002',
          planName: '仿真试验任务',
          simulationTaskName: '多舰协同防空反导仿真',
          simulationStartTime: '2023-06-01 09:00:00',
          simulationEndTime: '2023-06-03 17:00:00',
          simulationCount: '3次',
          simulationParticipantTasks: '新型导弹打击试验',
          secretLevel: '秘密',
          status: '未确认',
          username: '李舰长',
          createTime: '2023-05-20 10:15:33'
        },
        {
          id: 'sim-003',
          planName: '仿真试验任务',
          simulationTaskName: '复杂电磁环境下电子对抗仿真',
          simulationStartTime: '2023-07-05 08:30:00',
          simulationEndTime: '2023-07-10 16:00:00',
          simulationCount: '8次',
          simulationParticipantTasks: '电子对抗演练',
          secretLevel: '绝密',
          status: '草稿',
          username: '王工程师',
          createTime: '2023-06-28 16:45:12'
        },
        {
          id: 'sim-004',
          planName: '仿真试验任务',
          simulationTaskName: '多军种联合指挥系统仿真推演',
          simulationStartTime: '2023-08-15 08:00:00',
          simulationEndTime: '2023-08-20 18:00:00',
          simulationCount: '6次',
          simulationParticipantTasks: '新型导弹打击试验',
          secretLevel: '机密',
          status: '草稿',
          username: '赵指挥官',
          createTime: '2023-07-30 09:20:45'
        },
        {
          id: 'sim-005',
          planName: '仿真试验任务',
          simulationTaskName: '复杂电磁环境下电子对抗仿真',
          simulationStartTime: '2023-07-05 08:30:00',
          simulationEndTime: '2023-07-10 16:00:00',
          simulationCount: '8次',
          simulationParticipantTasks: '电子对抗演练',
          secretLevel: '绝密',
          status: '草稿',
          username: '王工程师',
          createTime: '2023-06-28 16:45:12'
        },
        {
          id: 'sim-006',
          planName: '仿真试验任务',
          simulationTaskName: '多军种联合指挥系统仿真推演',
          simulationStartTime: '2023-08-15 08:00:00',
          simulationEndTime: '2023-08-20 18:00:00',
          simulationCount: '6次',
          simulationParticipantTasks: '新型导弹打击试验',
          secretLevel: '机密',
          status: '草稿',
          username: '赵指挥官',
          createTime: '2023-07-30 09:20:45'
        },
        {
          id: 'sim-007',
          planName: '仿真试验任务',
          simulationTaskName: '复杂电磁环境下电子对抗仿真',
          simulationStartTime: '2023-07-05 08:30:00',
          simulationEndTime: '2023-07-10 16:00:00',
          simulationCount: '8次',
          simulationParticipantTasks: '电子对抗演练',
          secretLevel: '绝密',
          status: '草稿',
          username: '王工程师',
          createTime: '2023-06-28 16:45:12'
        },
      ],
      pagination: { currentPage: 1, pageSize: 10, total: 0 }
    }
  },
  computed: {
    isAddMode() {
      return this.editMode === 'add'
    },
    editDialogTitle() {
      return this.editMode === 'add' ? '新建推演任务设定' : '编辑推演任务设定'
    },
    secretChipClass() {
      const map = { '绝密': 'danger', '机密': 'warning', '秘密': 'primary' }
      return map[this.selectedPlan?.secretLevel] || 'neutral'
    },
    selectedOverallPlanNames() {
      const p = this.currentOverallPlans.find(p => p.id === this.selectedOverallPlanId)
      return p ? [p.planName] : []
    }
  },
  methods: {
    /* 任务选择：加载其总体方案并清空已选 */
    handleTaskSelect(task) {
      this.selectedTask = task
      this.currentOverallPlans = this.overallPlanDict[task.code] || []
      this.clearPlanSelection()
      this.$message.success(`已选择任务：${task.name}`)
    },

    /* 单选工具 */
    isPlanSelected(plan) {
      return this.selectedOverallPlanId === plan.id
    },
    togglePlan(plan) {
      this.selectedOverallPlanId = (this.selectedOverallPlanId === plan.id) ? '' : plan.id
    },
    clearPlanSelection() {
      this.selectedOverallPlanId = ''
    },

    getTagType(status) {
      if (status === 'creatable') return 'success'
      else if (status === 'inProgress') return 'warning'
      return 'info'
    },

    /* 添加：打开空白同一套表单 */
    openAddDialog() {
      this.editMode = 'add'
      this.selectedTask = null
      this.currentOverallPlans = []
      this.clearPlanSelection()

      this.editForm = {
        id: '',
        planName: '',
        simulationTaskName: '',
        simulationStartTime: '',
        simulationEndTime: '',
        simulationCount: '',
        simulationParticipantTasks: '',
        secretLevel: '秘密',
        status: '草稿',
        username: '',
        createTime: '',
        isScenarioEdited: false,
        selectedOverallPlans: [],
        selectedOverallPlanIds: []
      }
      this.editVisible = true
      this.$nextTick(() => this.$refs.editFormRef && this.$refs.editFormRef.clearValidate())
    },

    openEditDialog(plan) {
      this.$router.push({
        path: '/Deduction/taskSettingssss',
        query: {
          plan: encodeURIComponent(JSON.stringify(plan))
        }
      })
    },
    /* 供卡片 @edit 使用的入口：弹出「基本信息」预览 */
    handleEdit() {
      this.basicInfoVisible = true
      this.selectedPlan = {
        status: '已确认',
        taskCode: 'plan-001',
        taskName: '新型导弹打击试验',
        taskStartTime: '2023-06-15',
        taskEndTime: '2023-06-20',
        taskStatus: '已编制',
        secretLevel: '秘密',
        confidentialLevelYears: '10年',
        username: '张三',
        createTime: '2023-01-01'
      }
    },

    /* 保存：单选版本 */
    onEditSave() {
      this.$refs.editFormRef.validate((valid) => {
        if (!valid) return

        if (!this.selectedTask) {
          this.$message.error('请先选择一个试验任务')
          return
        }
        if (!this.selectedOverallPlanId) {
          this.$message.error('请选择一个总体方案')
          return
        }

        const plan = this.currentOverallPlans.find(p => p.id === this.selectedOverallPlanId)
        if (!plan) return

        // 写入所选方案（保持后端兼容：IDs 与 名称串）
        this.editForm.selectedOverallPlans = [{ id: plan.id, name: plan.planName }]
        this.editForm.selectedOverallPlanIds = [plan.id]
        this.editForm.simulationParticipantTasks = plan.planName
        this.editForm.taskCode = this.selectedTask.code

        // 本地更新演示（替换为实际后端接口）
        const idx = this.planList.findIndex(p => p.id === this.editForm.id)
        if (idx !== -1) {
          this.$set(this.planList, idx, { ...this.planList[idx], ...this.editForm })
        } else {
          const newId = 'sim-' + Math.random().toString(36).slice(2, 6)
          const newItem = {
            id: newId,
            planName: '仿真试验任务',
            simulationTaskName: this.editForm.simulationTaskName,
            simulationStartTime: this.editForm.simulationStartTime,
            simulationEndTime: this.editForm.simulationEndTime,
            simulationCount: '1次',
            simulationParticipantTasks: this.editForm.simulationParticipantTasks,
            secretLevel: this.editForm.secretLevel,
            status: '草稿',
            username: this.editForm.username || '系统',
            createTime: this.editForm.createTime || new Date().toISOString().slice(0, 19).replace('T', ' ')
          }
          this.planList.unshift(newItem)
        }

        this.$message.success('已保存')
        this.editVisible = false
      })
    },

    /* 其它原有方法 */
    statusClass(s) {
      const map = { '已确认': 'success', '未确认': 'warning', '已失效': 'danger', '草稿': 'info' }
      return map[s] || 'info'
    },
    statusTagType(status) {
      const map = { '有效': 'warning', '待审核': 'warning', '草稿': 'info', '已失效': 'danger' }
      return map[status] || 'info'
    },

    handleViewDetail(plan) {
      this.$router.push({ path: '/Deduction/stratDeduction' })
    },
    handleClose(done) { done() },
    handleSelect(plan) {},
    viewDetails(plan) {
      this.currentPlan = plan
      this.dialogVisible = true
    },

    /* 时间范围校验：结束必须≥开始 */
    validateTimeRange(rule, value, callback) {
      const start = this.editForm.simulationStartTime
      const end = this.editForm.simulationEndTime
      if (start && end && new Date(end).getTime() < new Date(start).getTime()) {
        callback(new Error('结束时间不能早于开始时间'))
      } else {
        callback()
      }
    },

    /* 列表&分页占位 */
    handleQuery() {},
    resetQuery() {
      this.queryForm = { name: '', taskCode: '' }
      this.handleQuery()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    },
    fetchData() {}
  }
}
</script>

<style scoped>
/* 弹窗体在 DarkDialog 里已经是深色，这里只美化表单 */
.edit-form-dark {
  background: rgba(12, 33, 66, 0.6);
  border: 1px solid #2c3f59;
  border-radius: 8px;
  padding: 14px 16px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 10px;
}
.form-grid .span-2 { grid-column: 1 / span 2; }

::v-deep .el-form-item__label { color: #9db2c9; }
::v-deep .el-input__inner,
::v-deep .el-textarea__inner,
::v-deep .el-select .el-input__inner,
::v-deep .el-date-editor .el-input__inner {
  background: rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.12);
  color: #e6efff;
}
::v-deep .el-input__inner::placeholder { color: #94a3b8; }
::v-deep .el-select-dropdown,
::v-deep .el-picker-panel {
  background: #1b2d4c;
  border-color: #2c3f59;
  color: #e6efff;
}
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
}

.blue-btn:hover{
  background: #004466;
  border: 2px solid #1e3a5f;
  border-color: #4085ac;
  color: #fff;
}

/* Dialog 外观更暗、更清晰的分层 */
::v-deep .el-dialog__header {
  background: linear-gradient(180deg, #153b73, #0e2a53);
  border-bottom: 1px solid #364a64;
}
::v-deep .el-dialog__title { color: #e6eefc; font-weight: 600; }
::v-deep .el-dialog__body  { background: #0b254a; padding: 18px 22px; }
::v-deep .el-dialog__footer{
  background: #0b254a; border-top: 1px solid #364a64;
}

/* 内容容器 */
.basic-info {
  border: 1px solid #2c3f59;
  border-radius: 8px;
  background: rgba(12, 33, 66, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* 顶部条：密级与状态 */
.top-line{
  display:flex; gap:10px; align-items:center;
  padding:12px 14px; border-bottom:1px dashed #2c3f59;
}
.chip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  color:#fff; font-size:12px; letter-spacing:0.5px;
}
.chip.primary{ background:#3475b5; }     /* 秘密 */
.chip.warning{ background:#b88230; }     /* 机密 */
.chip.danger{  background:#c45656; }     /* 绝密 */
.chip.neutral{ background:#6b7280; }
.chip.soft{ opacity:.9; }
.chip.success{ background:#1f9d55; }
.chip.info{    background:#4b5563; }

/* 分组标题与栅格 */
.section { padding: 10px 14px 14px; }
.section + .section { border-top: 1px dashed #2c3f59; }
.section-title{
  font-size:13px; color:#9db2c9; margin-bottom:8px;
  position:relative; padding-left:10px;
}
.section-title::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px;
  background: linear-gradient(180deg, #66a3ff, #3a7bd5);
  border-radius:2px;
}

/* 双栏对齐的键值栅格 */
.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.kv{ display:grid; grid-template-columns: 120px 1fr; align-items:center; }
.kv.span-2{ grid-column: 1 / span 2; }
.kv-label{ color:#8aa0bb; font-size:13px; justify-self:start; }
.kv-value{
  color:#e7eef8; font-size:13px; line-height:1.6;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 10px; border-radius: 6px;
}

/* 任务卡片 */
.task-select-section { margin-top: 20px; }
.section-desc { font-size: 13px; color: #94a3b8; margin-bottom: 14px; }
.task-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 16px;
  color: #e2e8f0;
  transition: all 0.25s ease;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%;
}
.task-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transform: translateY(-2px);
  cursor: pointer;
}
.task-card--active {
  border: 2px solid #3b82f6;
  box-shadow: 0 0 10px rgba(59,130,246,0.7);
}
.task-title { font-size: 15px; font-weight: 600; color: #fff; }
.task-info { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.task-btn { width: 100%; font-weight: 600; border-radius: 6px; }

/* 总体方案卡片（单选） */
.plan-select-section { margin-top: 10px; }
.plan-select-header {
  display:flex; align-items:center; justify-content: space-between; margin-bottom: 6px;
}
.plan-tools { display:flex; align-items:center; gap:10px; }
.tool-label { color:#9db2c9; font-size:12px; margin-right:4px; }

.plan-card {
  background: #0f1f38;
  border: 1px solid #2b3b55;
  border-radius: 8px;
  padding: 14px;
  color: #e2e8f0;
  transition: all .2s ease;
  height: 100%;
}
.plan-card:hover { border-color:#3b82f6; transform: translateY(-2px); cursor: pointer; }
.plan-card--selected { border: 2px solid #3b82f6; box-shadow: 0 0 10px rgba(59,130,246,.5); }
.plan-card__header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 8px; }
.plan-card__title { font-weight: 600; }
.plan-card__check { font-size: 16px; }
.plan-card__meta { display:flex; gap:12px; font-size:12px; color:#9db2c9; margin-bottom:8px; }
.plan-card__desc { font-size: 12px; color:#cbd5e1; margin-bottom:10px; line-height: 1.7; }
.plan-card__footer { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }

.selected-summary { margin-top: 10px; }
</style>