ajy/code/frontend/src/views/plan/index.vue

<template>
  <div class="page-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="queryForm" inline>
        <el-form-item label="方案名称">
          <el-input v-model="queryForm.name" placeholder="请输入方案名称" clearable style="width:180px" />
        </el-form-item>
        <el-form-item label="模式类型">
          <el-select v-model="queryForm.modeType" placeholder="全部" clearable style="width:130px">
            <el-option label="一键艾灸" :value="1" />
            <el-option label="专业模式" :value="2" />
            <el-option label="自定义模式" :value="3" />
            <el-option label="延年圣手" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="作用类型">
          <el-select v-model="queryForm.effectType" placeholder="全部" clearable style="width:110px">
            <el-option v-for="e in effectOptions" :key="e" :label="e" :value="e" />
          </el-select>
        </el-form-item>
        <el-form-item label="创作人">
          <el-input v-model="queryForm.authorName" placeholder="请输入创作人" clearable style="width:150px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryForm.status" placeholder="全部" clearable style="width:110px">
            <el-option label="草稿" :value="0" />
            <el-option label="已发布" :value="1" />
            <el-option label="已下架" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            style="width:220px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span class="title">方案列表</span>
          <div class="btn-group">
            <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
            <el-button
              type="success"
              :disabled="selectedIds.length === 0"
              @click="handleBatchPublish"
            >批量发布</el-button>
            <el-button
              type="warning"
              :disabled="selectedIds.length === 0"
              @click="handleBatchOffshelf"
            >批量下架</el-button>
            <el-button
              type="danger"
              :icon="Delete"
              :disabled="selectedIds.length === 0"
              @click="handleBatchDelete"
            >批量删除</el-button>
          </div>
        </div>
      </template>

      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" :selectable="isRowSelectable" />
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="planCode" label="方案ID" width="100" />
        <el-table-column prop="name" label="方案名称" min-width="140" show-overflow-tooltip />
        <el-table-column label="模式类型" width="110" align="center">
          <template #default="{ row }">
            <el-tag :type="modeTypeTag(row.modeType)" size="small">{{ modeTypeLabel(row.modeType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="effectType" label="作用类型" width="90" align="center">
          <template #default="{ row }">{{ row.effectType || '-' }}</template>
        </el-table-column>
        <el-table-column prop="authorName" label="创作人" width="100">
          <template #default="{ row }">{{ row.authorName || 'ADMIN' }}</template>
        </el-table-column>
        <el-table-column label="状态" width="90" align="center">
          <template #default="{ row }">
            <el-tag :type="statusTag(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="170">
          <template #default="{ row }">{{ formatDateTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" link @click="handleView(row)">查看</el-button>
            <el-button size="small" type="warning" link @click="handleEdit(row)">编辑</el-button>
            <template v-if="!isSystemPresetPlan(row)">
              <el-button v-if="row.status === 0 || row.status === 2" size="small" type="success" link @click="handlePublish(row)">发布</el-button>
              <el-button v-if="row.status === 1" size="small" type="info" link @click="handleOffshelf(row)">下架</el-button>
              <el-button v-if="row.status === 0" size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="total"
        :hide-on-single-page="false"
        layout="total, sizes, prev, pager, next, jumper"
        background
        class="pagination"
        @size-change="loadData"
        @current-change="loadData"
      />
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="780px"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formRef"
        label-width="110px"
        :disabled="dialogMode === 'view'"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="方案名称" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入方案名称"
                maxlength="100"
                :disabled="isPlanNameLocked"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模式类型" prop="modeType">
              <el-select
                v-model="formData.modeType"
                placeholder="请选择模式类型"
                style="width:100%"
                :disabled="isModeTypeLocked"
                @change="handleModeTypeChange"
              >
                <el-option
                  v-for="item in editableModeTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col v-if="showEffectTypeField" :span="12">
            <el-form-item label="作用类型" prop="effectType">
              <el-select
                v-model="formData.effectType"
                placeholder="请选择作用"
                :clearable="!isEffectTypeLocked"
                :disabled="isEffectTypeLocked"
                style="width:100%"
              >
                <el-option v-for="e in effectOptions" :key="e" :label="e" :value="e" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="适用人群" prop="applicableGender">
              <el-radio-group v-model="formData.applicableGender">
                <el-radio :label="0">不限</el-radio>
                <el-radio :label="1">仅男</el-radio>
                <el-radio :label="2">仅女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="适用年龄" prop="ageMin">
              <el-input-number v-model="formData.ageMin" :min="1" :max="formData.ageMax - 1" style="width:110px" />
              岁 ~
              <el-input-number v-model="formData.ageMax" :min="formData.ageMin + 1" style="width:110px" />
              岁
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创作人" prop="authorName">
              <el-input v-model="formData.authorName" disabled placeholder="当前登录用户" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="适用症状" prop="symptomsList">
          <el-checkbox-group v-model="formData.symptomsList" class="symptom-checkboxes">
            <el-checkbox v-for="s in symptomsOptions" :key="s" :label="s" />
          </el-checkbox-group>
          <div v-if="dialogMode !== 'view'" class="symptom-add-row">
            <el-input
              v-model="customSymptom"
              placeholder="输入症状名称"
              maxlength="20"
              clearable
              @keyup.enter="addCustomSymptom"
            />
            <el-button type="primary" :icon="Plus" @click="addCustomSymptom">添加</el-button>
          </div>
        </el-form-item>
        <el-form-item label="方案描述">
          <el-input v-model="formData.description" type="textarea" :rows="2" maxlength="500" show-word-limit />
        </el-form-item>

        <!-- 灸方参数 -->
        <el-divider>灸方参数</el-divider>
        <div v-for="(step, index) in formData.steps" :key="index" class="step-row">
          <div class="step-header">
            <span class="step-num">参数 {{ index + 1 }}</span>
            <div v-if="dialogMode !== 'view'" class="step-actions">
              <el-tooltip content="上移参数" placement="top">
                <el-button
                  size="small"
                  :icon="ArrowUp"
                  link
                  :disabled="index === 0"
                  aria-label="上移参数"
                  @click="moveStep(index, -1)"
                />
              </el-tooltip>
              <el-tooltip content="下移参数" placement="top">
                <el-button
                  size="small"
                  :icon="ArrowDown"
                  link
                  :disabled="index === formData.steps.length - 1"
                  aria-label="下移参数"
                  @click="moveStep(index, 1)"
                />
              </el-tooltip>
              <el-button
                size="small"
                type="danger"
                link
                :disabled="formData.steps.length <= 1"
                @click="removeStep(index)"
              >删除</el-button>
            </div>
          </div>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item :label="'穴位'" :prop="`steps.${index}.acupointId`" :rules="stepRules.acupointId">
                <el-select
                  v-model="step.acupointId"
                  placeholder="请选择穴位"
                  style="width:100%"
                  filterable
                  @change="(val) => onAcupointChange(val, index)"
                >
                  <el-option
                    v-for="a in acupointOptions"
                    :key="a.id"
                    :label="a.name"
                    :value="a.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'侧别'" :prop="`steps.${index}.side`" :rules="stepRules.side">
                <el-select v-model="step.side" placeholder="侧别" style="width:100%">
                  <el-option label="中心" :value="1" />
                  <el-option label="左侧" :value="2" />
                  <el-option label="右侧" :value="3" />
                  <el-option label="双侧" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'手法'" :prop="`steps.${index}.techniqueId`" :rules="stepRules.techniqueId">
                <el-select
                  v-model="step.techniqueId"
                  placeholder="请选择手法"
                  style="width:100%"
                  filterable
                  @change="(val) => onTechniqueChange(val, index)"
                >
                  <el-option
                    v-for="t in techniqueOptions"
                    :key="t.id"
                    :label="t.name"
                    :value="t.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item :label="'温度(°C)'" :prop="`steps.${index}.temperature`" :rules="stepRules.temperature">
                <el-input-number v-model="step.temperature" :min="35" :max="50" :precision="1" style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'时间(分)'" :prop="`steps.${index}.duration`" :rules="stepRules.duration">
                <el-input-number v-model="step.duration" :min="1" :max="30" style="width:100%" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input v-model="step.remark" placeholder="备注（选填）" maxlength="100" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-button
          v-if="dialogMode !== 'view'"
          type="primary"
          plain
          size="small"
          @click="addStep"
          style="margin-top:4px"
        >+ 添加参数</el-button>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">{{ dialogMode === 'view' ? '关闭' : '取消' }}</el-button>
        <template v-if="dialogMode !== 'view'">
          <el-button v-if="!isSystemPresetPlan(formData)" :loading="submitLoading" @click="handleSubmit(0)">保存为草稿</el-button>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit(isSystemPresetPlan(formData) ? formData.status : 1)">
            {{ isSystemPresetPlan(formData) ? '保存修改' : '发布方案' }}
          </el-button>
        </template>
      </template>
    </el-dialog>

    <!-- 方案详情弹窗（只读） -->
    <el-dialog v-model="detailVisible" title="方案详情" width="700px" destroy-on-close :close-on-click-modal="false">
      <template v-if="detailData">
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="方案编码">{{ detailData.planCode }}</el-descriptions-item>
          <el-descriptions-item label="方案名称">{{ detailData.name }}</el-descriptions-item>
          <el-descriptions-item label="模式类型">{{ modeTypeLabel(detailData.modeType) }}</el-descriptions-item>
          <el-descriptions-item label="作用类型">{{ detailData.effectType || '-' }}</el-descriptions-item>
          <el-descriptions-item label="创作人">{{ detailData.authorName || 'ADMIN' }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ statusLabel(detailData.status) }}</el-descriptions-item>
          <el-descriptions-item label="适用人群">{{ ['不限', '仅男', '仅女'][detailData.applicableGender] || '-' }}</el-descriptions-item>
          <el-descriptions-item label="适用年龄">{{ detailData.ageMin }}-{{ detailData.ageMax }}岁</el-descriptions-item>
          <el-descriptions-item label="适用症状" :span="2">{{ detailData.symptoms || '-' }}</el-descriptions-item>
          <el-descriptions-item label="方案描述" :span="2">{{ detailData.description || '-' }}</el-descriptions-item>
          <el-descriptions-item label="使用人数">{{ detailData.useCount || 0 }}人</el-descriptions-item>
          <el-descriptions-item label="平均评分">{{ detailData.avgRating ?? '-' }}分</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(detailData.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatDateTime(detailData.updateTime) }}</el-descriptions-item>
        </el-descriptions>

        <el-divider>灸方参数</el-divider>
        <el-table :data="detailData.steps || []" border size="small">
          <el-table-column prop="stepOrder" label="参数" width="60" align="center" />
          <el-table-column prop="acupointName" label="穴位" width="100" />
          <el-table-column label="侧别" width="80" align="center">
            <template #default="{ row }">{{ ['', '中心', '左侧', '右侧', '双侧'][row.side] || '-' }}</template>
          </el-table-column>
          <el-table-column prop="temperature" label="温度(°C)" width="90" align="center" />
          <el-table-column prop="duration" label="时间(分)" width="90" align="center" />
          <el-table-column prop="techniqueName" label="艾灸手法" width="100" />
          <el-table-column prop="remark" label="备注" min-width="100">
            <template #default="{ row }">{{ row.remark || '-' }}</template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Delete, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import {
  getPlanPage,
  getPlanDetail,
  addPlan,
  updatePlan,
  deletePlan,
  batchDeletePlan,
  publishPlan,
  batchPublishPlan,
  offshelfPlan,
  batchOffshelfPlan
} from '@/api/plan'
import { getAcupointList } from '@/api/acupoint'
import { getTechniqueList } from '@/api/moxibustion'
import { useUserStore } from '@/store/user'
import { formatDateTime } from '@/utils/date'
import { parsePageData } from '@/utils/pagination'
// ============ 枚举常量 ============
const effectOptions = ['驱寒', '祛湿', '祛风', '化瘀', '活血', '化痰', '养颜', '扶阳']
const modeTypeOptions = [
  { label: '一键艾灸', value: 1 },
  { label: '专业模式', value: 2 },
  { label: '自定义模式', value: 3 },
  { label: '延年圣手', value: 4 }
]
const addModeTypeOptions = modeTypeOptions.filter(item => [3, 4].includes(item.value))
const defaultSymptomsOptions = ['怕冷', '感冒', '咳嗽', '痰多', '疼痛', '腰酸', '失眠', '疲劳', '皮肤暗沉', '手脚冰凉']
const symptomsOptions = ref([...defaultSymptomsOptions])
const systemPresetPlanCodes = Array.from({ length: 9 }, (_, index) => `S00${index + 1}`)
const professionalPresetEffectMap = {
  S002: '驱寒',
  S003: '祛湿',
  S004: '祛风',
  S005: '化瘀',
  S006: '活血',
  S007: '化痰',
  S008: '养颜',
  S009: '扶阳'
}
const userStore = useUserStore()

// ============ 选项列表（用于选择框） ============
const acupointOptions = ref([])
const techniqueOptions = ref([])

/**
 * 加载穴位、手法选项列表
 */
async function loadOptions() {
  try {
    const [acupointRes, techniqueRes] = await Promise.all([
      getAcupointList(),
      getTechniqueList()
    ])
    acupointOptions.value = acupointRes.data || []
    techniqueOptions.value = techniqueRes.data || []
  } catch (e) {
    // 选项加载失败不影响主流程
  }
}

/**
 * 模式类型标签文字
 */
function modeTypeLabel(val) {
  return ['', '一键艾灸', '专业模式', '自定义模式', '延年圣手'][val] || '-'
}

/**
 * 模式类型 Tag 颜色
 */
function modeTypeTag(val) {
  return ['', '', 'success', 'warning', 'danger'][val] || ''
}

/**
 * 状态标签文字
 */
function statusLabel(val) {
  return { 0: '草稿', 1: '已发布', 2: '已下架' }[val] ?? '-'
}

/**
 * 状态 Tag 颜色
 */
function statusTag(val) {
  return { 0: 'info', 1: 'success', 2: 'warning' }[val] ?? ''
}

function isSystemPresetPlan(plan) {
  return systemPresetPlanCodes.includes(plan?.planCode)
}

function isOneClickPresetPlan(plan) {
  return plan?.planCode === 'S001'
}

function isProfessionalPresetPlan(plan) {
  return Boolean(professionalPresetEffectMap[plan?.planCode])
}

function getProfessionalPresetEffect(plan) {
  return professionalPresetEffectMap[plan?.planCode] || ''
}

function isRowSelectable(row) {
  return !isSystemPresetPlan(row)
}

// ============ 查询 ============
const queryForm = reactive({
  name: '',
  modeType: null,
  effectType: '',
  authorName: '',
  status: null,
  createTimeStart: '',
  createTimeEnd: '',
  pageNum: 1,
  pageSize: 10
})
const dateRange = ref([])
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const selectedIds = ref([])

/**
 * 加载方案列表
 */
async function loadData() {
  loading.value = true
  // 同步日期范围
  queryForm.createTimeStart = dateRange.value?.[0] || ''
  queryForm.createTimeEnd = dateRange.value?.[1] || ''
  try {
    const res = await getPlanPage(queryForm)
    const { records, total: pageTotal } = parsePageData(res.data)
    tableData.value = records
    total.value = pageTotal
  } finally {
    loading.value = false
  }
}

/**
 * 查询
 */
function handleSearch() {
  queryForm.pageNum = 1
  loadData()
}

/**
 * 重置查询条件
 */
function handleReset() {
  queryForm.name = ''
  queryForm.modeType = null
  queryForm.effectType = ''
  queryForm.authorName = ''
  queryForm.status = null
  queryForm.createTimeStart = ''
  queryForm.createTimeEnd = ''
  queryForm.pageNum = 1
  dateRange.value = []
  loadData()
}

/**
 * 多选变化
 */
function handleSelectionChange(selection) {
  selectedIds.value = selection.map(r => r.id)
}

// ============ 新增/编辑弹窗 ============
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogMode = ref('add')
const submitLoading = ref(false)
const formRef = ref(null)
const customSymptom = ref('')

const defaultStep = () => ({
  acupointId: null,
  acupointName: '',
  side: 1,
  temperature: 42,
  duration: 5,
  techniqueId: null,
  techniqueName: '',
  remark: ''
})

const defaultForm = () => ({
  id: null,
  planCode: '',
  name: '',
  modeType: 3,
  effectType: '',
  symptomsList: [],
  symptoms: '',
  applicableGender: 0,
  ageMin: 1,
  ageMax: 120,
  authorId: getCurrentAuthorId(),
  authorName: getCurrentAuthorName(),
  authorType: getCurrentAuthorType(),
  status: 0,
  description: '',
  steps: [defaultStep()]
})

const formData = reactive(defaultForm())

const formRules = {
  name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
  modeType: [{ required: true, message: '请选择模式类型', trigger: 'change' }],
  effectType: [
    {
      validator: (_rule, value, callback) => {
        if (formData.modeType === 2 && !value) {
          callback(new Error('请选择作用类型'))
          return
        }
        callback()
      },
      trigger: 'change'
    }
  ]
}

const stepRules = {
  acupointId: [{ required: true, message: '请选择穴位', trigger: 'change' }],
  side: [{ required: true, message: '请选择侧别', trigger: 'change' }],
  temperature: [{ required: true, message: '请填写温度', trigger: 'blur' }],
  duration: [{ required: true, message: '请填写时间', trigger: 'blur' }],
  techniqueId: [{ required: true, message: '请选择艾灸手法', trigger: 'change' }]
}

/**
 * 穴位选择变更：同步填充 acupointName
 */
function onAcupointChange(id, index) {
  const found = acupointOptions.value.find(a => a.id === id)
  formData.steps[index].acupointName = found ? found.name : ''
}

/**
 * 手法选择变更：同步填充 techniqueName
 */
function onTechniqueChange(id, index) {
  const found = techniqueOptions.value.find(t => t.id === id)
  formData.steps[index].techniqueName = found ? found.name : ''
}

function parseSymptoms(symptoms) {
  return (symptoms || '')
    .split(',')
    .map(item => item.trim())
    .filter(Boolean)
    .filter((item, index, list) => list.indexOf(item) === index)
}

function syncSymptomOptions(symptoms) {
  symptoms.forEach(item => {
    if (!symptomsOptions.value.includes(item)) {
      symptomsOptions.value.push(item)
    }
  })
}

function addCustomSymptom() {
  const symptom = customSymptom.value.trim()
  if (!symptom) {
    ElMessage.warning('请输入症状名称')
    return
  }
  if (/[,，]/.test(symptom)) {
    ElMessage.warning('症状名称不能包含逗号')
    return
  }
  syncSymptomOptions([symptom])
  if (!formData.symptomsList.includes(symptom)) {
    formData.symptomsList.push(symptom)
  }
  customSymptom.value = ''
}

function getCurrentAuthorId() {
  return userStore.userInfo?.userId || null
}

function getCurrentAuthorName() {
  return userStore.nickname || userStore.username || 'ADMIN'
}

function getCurrentAuthorType() {
  const typeMap = { 1: 2, 2: 3, 3: 1 }
  return typeMap[userStore.userInfo?.userType] || 1
}

function applyCurrentAuthor() {
  formData.authorId = getCurrentAuthorId()
  formData.authorName = getCurrentAuthorName()
  formData.authorType = getCurrentAuthorType()
}

const editableModeTypeOptions = computed(() => {
  if (dialogMode.value === 'add') {
    return addModeTypeOptions
  }
  if (isOneClickPresetPlan(formData)) {
    return modeTypeOptions.filter(item => item.value === 1)
  }
  if (isProfessionalPresetPlan(formData)) {
    return modeTypeOptions.filter(item => item.value === 2)
  }
  return modeTypeOptions
})

const isModeTypeLocked = computed(() => (
  dialogMode.value === 'edit' && (isOneClickPresetPlan(formData) || isProfessionalPresetPlan(formData))
))

const isPlanNameLocked = computed(() => dialogMode.value === 'edit' && isSystemPresetPlan(formData))

const isEffectTypeLocked = computed(() => dialogMode.value === 'edit' && isProfessionalPresetPlan(formData))

const showEffectTypeField = computed(() => formData.modeType === 2 && !isOneClickPresetPlan(formData))

function applyPlanModeRules() {
  if (dialogMode.value === 'add' && ![3, 4].includes(formData.modeType)) {
    formData.modeType = 3
  }
  if (isOneClickPresetPlan(formData)) {
    formData.modeType = 1
    formData.effectType = ''
    return
  }
  if (isProfessionalPresetPlan(formData)) {
    formData.modeType = 2
    formData.effectType = getProfessionalPresetEffect(formData)
    return
  }
  if (formData.modeType !== 2) {
    formData.effectType = ''
  }
}

function handleModeTypeChange() {
  applyPlanModeRules()
}

/**
 * 添加一个灸方参数
 */
function addStep() {
  formData.steps.push(defaultStep())
}

/**
 * 调整灸方参数顺序
 */
function moveStep(index, direction) {
  const targetIndex = index + direction
  if (targetIndex < 0 || targetIndex >= formData.steps.length) return
  const [step] = formData.steps.splice(index, 1)
  formData.steps.splice(targetIndex, 0, step)
  formRef.value?.clearValidate?.()
}

/**
 * 删除某个灸方参数
 */
function removeStep(index) {
  if (formData.steps.length <= 1) return
  formData.steps.splice(index, 1)
  formRef.value?.clearValidate?.()
}

/**
 * 打开新增弹窗
 */
function handleAdd() {
  Object.assign(formData, defaultForm())
  formData.steps = [defaultStep()]
  customSymptom.value = ''
  applyCurrentAuthor()
  dialogTitle.value = '新增方案'
  dialogMode.value = 'add'
  applyPlanModeRules()
  dialogVisible.value = true
}

/**
 * 打开编辑弹窗
 */
async function handleEdit(row) {
  const res = await getPlanDetail(row.id)
  const detail = res.data
  const symptomsList = parseSymptoms(detail.symptoms)
  syncSymptomOptions(symptomsList)
  Object.assign(formData, defaultForm(), {
    ...detail,
    symptomsList,
    steps: detail.steps?.length > 0 ? detail.steps : [defaultStep()]
  })
  customSymptom.value = ''
  applyCurrentAuthor()
  dialogTitle.value = '编辑方案'
  dialogMode.value = 'edit'
  applyPlanModeRules()
  dialogVisible.value = true
}

/**
 * 提交保存（0=草稿，1=发布）
 */
async function handleSubmit(publishFlag) {
  applyPlanModeRules()
  await formRef.value.validate()
  applyCurrentAuthor()
  submitLoading.value = true
  try {
    const payload = {
      ...formData,
      symptoms: formData.symptomsList.join(','),
      status: publishFlag
    }
    if (formData.id) {
      await updatePlan(payload)
    } else {
      await addPlan(payload)
    }
    ElMessage.success('操作成功')
    dialogVisible.value = false
    loadData()
  } finally {
    submitLoading.value = false
  }
}

// ============ 方案详情弹窗 ============
const detailVisible = ref(false)
const detailData = ref(null)

/**
 * 查看方案详情
 */
async function handleView(row) {
  const res = await getPlanDetail(row.id)
  detailData.value = res.data
  detailVisible.value = true
}

// ============ 状态操作 ============
/**
 * 发布单条方案
 */
async function handlePublish(row) {
  await ElMessageBox.confirm(`确认发布方案「${row.name}」吗？`, '提示', { type: 'warning' })
  await publishPlan(row.id)
  ElMessage.success('发布成功')
  loadData()
}

/**
 * 下架单条方案
 */
async function handleOffshelf(row) {
  await ElMessageBox.confirm(`确认下架方案「${row.name}」吗？`, '提示', { type: 'warning' })
  await offshelfPlan(row.id)
  ElMessage.success('下架成功')
  loadData()
}

/**
 * 批量发布
 */
async function handleBatchPublish() {
  await ElMessageBox.confirm(`确认批量发布选中的 ${selectedIds.value.length} 条方案吗？`, '批量发布', { type: 'warning' })
  await batchPublishPlan(selectedIds.value)
  ElMessage.success('批量发布成功')
  loadData()
}

/**
 * 批量下架
 */
async function handleBatchOffshelf() {
  await ElMessageBox.confirm(`确认批量下架选中的 ${selectedIds.value.length} 条方案吗？`, '批量下架', { type: 'warning' })
  await batchOffshelfPlan(selectedIds.value)
  ElMessage.success('批量下架成功')
  loadData()
}

/**
 * 删除单条方案
 */
async function handleDelete(row) {
  await ElMessageBox.confirm(`确认删除方案「${row.name}」吗？`, '提示', { type: 'warning' })
  await deletePlan(row.id)
  ElMessage.success('删除成功')
  loadData()
}

/**
 * 批量删除
 */
async function handleBatchDelete() {
  await ElMessageBox.confirm(
    `确认批量删除选中的 ${selectedIds.value.length} 条方案吗？（仅草稿状态可删）`,
    '批量删除确认',
    { type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' }
  )
  await batchDeletePlan(selectedIds.value)
  ElMessage.success('批量删除成功')
  selectedIds.value = []
  loadData()
}

onMounted(() => {
  loadData()
  loadOptions()
})
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-card {
  :deep(.el-card__body) {
    padding: 16px 20px 4px;
  }
}

.table-card {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-weight: 600;
      font-size: 15px;
    }

    .btn-group {
      display: flex;
      gap: 8px;
      align-items: center;
    }
  }
}

.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}

.symptom-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.symptom-add-row {
  display: flex;
  gap: 8px;
  width: 360px;
  max-width: 100%;
  margin-top: 8px;
}

.step-row {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 12px 16px 0;
  margin-bottom: 12px;
  background: #fafafa;

  .step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;

    .step-num {
      font-weight: 600;
      color: #409eff;
      font-size: 13px;
    }

    .step-actions {
      display: flex;
      align-items: center;
      gap: 8px;

      :deep(.el-button + .el-button) {
        margin-left: 0;
      }
    }
  }
}
</style>