<!--培训演练计划制定-->
<template>
  <div class="app-container">
    <!-- 页面标题栏 -->
    <div class="page-header">
      <div class="header-title">
        <el-icon><Document /></el-icon>
        <span>培训演练计划制定 · 按事故类型应急处置</span>
      </div>
      <el-button type="success" @click="handleAdd">
        <el-icon><Plus /></el-icon>新增演练计划
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column prop="category" label="演练内容分类" width="180" />
      <el-table-column prop="name" label="演练名称/主题" min-width="220" show-overflow-tooltip />
      <el-table-column label="计划日期" width="200" align="center">
        <template #default="{ row }">
          <span v-if="row.startDate">{{ row.startDate }} ~ {{ row.endDate }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="base" label="依托基地/站点" width="180" show-overflow-tooltip />
      <el-table-column prop="method" label="培训方式" min-width="200" show-overflow-tooltip />
      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)" size="small">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button link type="danger" @click="handleDeleteApi(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="560px" destroy-on-close>
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
        <el-form-item label="演练名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入演练名称" />
        </el-form-item>
        <el-form-item label="所属系统" prop="category">
          <el-select v-model="form.category" placeholder="请选择" style="width: 100%">
            <el-option label="燃气" value="燃气" /><el-option label="排水" value="排水" /><el-option label="供水" value="供水" />
          </el-select>
        </el-form-item>
        <el-form-item label="演练类型" prop="drillType">
          <el-select v-model="form.drillType" style="width: 100%">
            <el-option label="模拟演练" value="模拟演练" /><el-option label="实战演练" value="实战演练" />
          </el-select>
        </el-form-item>
        <el-form-item label="演练分类" prop="drillSubtype">
          <el-select v-model="form.drillSubtype" placeholder="请选择演练分类" style="width: 100%">
            <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="依托基地" prop="base">
          <el-input v-model="form.base" placeholder="请输入依托基地/站点" />
        </el-form-item>
        <el-form-item label="计划日期" prop="dateRange">
          <el-date-picker
            v-model="form.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="培训方式" prop="method">
          <el-input
            v-model="form.method"
            type="textarea"
            :rows="3"
            placeholder="填写具体判断规则、适用条件、划分依据"
          />
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注说明" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitApi">保存提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document, Plus } from '@element-plus/icons-vue'
import { getDrillPlanList, saveDrillPlan, updateDrillPlan, deleteDrillPlan } from '@/api/pipeNetwork/basic'

// ---------- 常量 ----------
const categoryOptions = [
  '指挥调度演练',
  '资源调度演练',
  '辅助决策演练',
  '应急处置实施演练',
  '应急信息上传下达演练'
]

const statusTagType = (status) => {
  const map = { '计划中': 'warning', '进行中': 'primary', '已完成': 'success' }
  return map[status] || 'info'
}

// ---------- Mock 数据 ----------
let idCounter = 5
const tableData = ref([
  {
    id: 1,
    category: '指挥调度演练',
    name: '多灾种物资装备紧急跨区调度',
    startDate: '2025-04-10',
    endDate: '2025-04-12',
    base: '警械装备站 / 物资库',
    method: '指挥推演研修班 + 模拟舱实操',
    status: '计划中',
    remark: ''
  },
  {
    id: 2,
    category: '资源调度演练',
    name: '多级联动信息报送与指令传达',
    startDate: '2025-05-15',
    endDate: '2025-05-17',
    base: '应急指挥中心',
    method: '线上线下融合调度推演',
    status: '计划中',
    remark: ''
  },
  {
    id: 3,
    category: '辅助决策演练',
    name: '多级联动信息报送与指令传达',
    startDate: '2025-06-01',
    endDate: '2025-06-03',
    base: '综合训练基地',
    method: '指挥推演研修班 + 模拟舱实操',
    status: '进行中',
    remark: ''
  },
  {
    id: 4,
    category: '应急处置实施演练',
    name: '危化品泄漏应急处置实操',
    startDate: '2025-06-20',
    endDate: '2025-06-22',
    base: '化工园区应急基地',
    method: '现场实操 + 复盘评估',
    status: '已完成',
    remark: ''
  },
  {
    id: 5,
    category: '应急信息上传下达演练',
    name: '应急信息报送与指令下发演练',
    startDate: '2025-07-05',
    endDate: '2025-07-06',
    base: '通信保障站',
    method: '通信系统实操演练',
    status: '计划中',
    remark: ''
  }
])

// ---------- 弹窗 ----------
const dialogVisible = ref(false)
const dialogTitle = ref('新增演练计划')
const formRef = ref(null)

const defaultForm = () => ({
  id: null, name: '', category: '燃气', drillType: '模拟演练', drillSubtype: '',
  base: '', dateRange: null, method: '', status: '计划中', remark: ''
})

const form = ref(defaultForm())

const formRules = {
  name: [{ required: true, message: '请输入演练名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择演练分类', trigger: 'change' }]
}

const handleAdd = () => {
  form.value = defaultForm()
  dialogTitle.value = '新增演练计划'
  dialogVisible.value = true
}

const handleEdit = (row) => {
  form.value = {
    ...row,
    dateRange: row.startDate ? [row.startDate, row.endDate] : null
  }
  dialogTitle.value = '修改演练计划'
  dialogVisible.value = true
}

const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (!valid) return
    const data = { ...form.value }
    if (data.dateRange && data.dateRange.length === 2) {
      data.startDate = data.dateRange[0]
      data.endDate = data.dateRange[1]
    } else {
      data.startDate = ''
      data.endDate = ''
    }
    delete data.dateRange

    if (data.id) {
      const idx = tableData.value.findIndex(i => i.id === data.id)
      if (idx !== -1) tableData.value[idx] = { ...data }
    } else {
      data.id = ++idCounter
      tableData.value.unshift({ ...data })
    }
    dialogVisible.value = false
    ElMessage.success('保存成功')
  })
}

// ---------- 删除 ----------
async function loadData() { try { const res = await getDrillPlanList({ pageSize: 50 }); const rows = res.data?.records || []; if (rows.length) tableData.value = rows } catch (e) {} }
onMounted(() => { loadData() })
const handleSubmitApi = () => {
  formRef.value?.validate(async (valid) => {
    if (!valid) return
    const data = { name: form.value.name, category: form.value.category, drillType: form.value.drillType, drillSubtype: form.value.drillSubtype, base: form.value.base, method: form.value.method, status: form.value.status, remark: form.value.remark, id: form.value.id }
    if (form.value.dateRange?.length === 2) { data.startDate = form.value.dateRange[0]; data.endDate = form.value.dateRange[1] }
    try { data.id ? await updateDrillPlan(data) : await saveDrillPlan(data); dialogVisible.value = false; ElMessage.success('保存成功'); loadData() } catch (e) { ElMessage.error('保存失败') }
  })
}
const handleDeleteApi = (row) => { ElMessageBox.confirm('确认删除?', '提示', { type: 'warning' }).then(async () => { await deleteDrillPlan(row.id); ElMessage.success('删除成功'); loadData() }).catch(() => {}) }
</script>

<style scoped lang="scss">
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .header-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 6px;

    .el-icon {
      color: #409eff;
    }
  }
}
</style>
