<template>
  <div>
    <div class="page-header">
      <h2>小蒙马夏令营</h2>
      <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
    </div>
    <el-card v-loading="loading">
      <el-form :model="form" label-width="100px">
        <el-form-item label="名称"><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="定位"><el-input v-model="form.positioning" type="textarea" :autosize="{minRows:4,maxRows:15}" /></el-form-item>
        <el-row :gutter="16">
          <el-col :span="8"><el-form-item label="天数"><el-input-number v-model="form.days" :min="1" /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="晚数"><el-input-number v-model="form.nights" :min="0" /></el-form-item></el-col>
        </el-row>
        <el-form-item label="与V9区别"><el-input v-model="form.difference_from_v9" type="textarea" :autosize="{minRows:3,maxRows:8}" /></el-form-item>

        <el-divider>设计原则</el-divider>
        <div v-for="(p, i) in form.principles" :key="'p'+i" style="display:flex;gap:8px;margin-bottom:8px">
          <el-input v-model="form.principles[i]" />
          <el-button type="danger" text @click="form.principles.splice(i,1)">删除</el-button>
        </div>
        <el-button @click="form.principles.push('')">+ 添加原则</el-button>

        <el-divider>核心活动</el-divider>
        <div v-for="(a, i) in form.activities" :key="'a'+i" style="display:flex;gap:8px;margin-bottom:8px">
          <el-input v-model="form.activities[i]" />
          <el-button type="danger" text @click="form.activities.splice(i,1)">删除</el-button>
        </div>
        <el-button @click="form.activities.push('')">+ 添加活动</el-button>

        <el-divider>每日行程</el-divider>
        <div v-for="(it, i) in form.itinerary" :key="'it'+i" style="display:flex;gap:8px;margin-bottom:8px;align-items:flex-start;">
          <el-tag type="info" style="min-width:50px;text-align:center;margin-top:6px;">Day{{ i+1 }}</el-tag>
          <el-input v-model="form.itinerary[i]" type="textarea" :autosize="{minRows:2,maxRows:6}" />
          <el-button type="danger" text @click="form.itinerary.splice(i,1)" style="margin-top:6px;">删除</el-button>
        </div>
        <el-button @click="form.itinerary.push('')">+ 添加一天</el-button>

        <el-divider>常见问答</el-divider>
        <div v-for="(f, i) in form.faq" :key="'f'+i" style="margin-bottom:12px;padding:12px;background:#fafafa;border-radius:8px;">
          <div style="display:flex;gap:8px;margin-bottom:6px;align-items:center;">
            <span style="font-weight:600;min-width:20px;">Q:</span>
            <el-input v-model="f.question" placeholder="问题" />
            <el-button type="danger" text @click="form.faq.splice(i,1)">删除</el-button>
          </div>
          <div style="display:flex;gap:8px;align-items:flex-start;">
            <span style="font-weight:600;min-width:20px;margin-top:6px;">A:</span>
            <el-input v-model="f.answer" type="textarea" :autosize="{minRows:2,maxRows:8}" placeholder="回答" />
          </div>
        </div>
        <el-button @click="form.faq.push({question:'',answer:''})">+ 添加问答</el-button>

        <el-divider>期数信息</el-divider>
        <div v-for="(val, key) in form.sessions" :key="key" style="display:flex;gap:8px;margin-bottom:8px;align-items:center;">
          <el-input :model-value="key" disabled style="width:120px" />
          <el-input-number :model-value="val" @update:model-value="form.sessions[key] = $event" />
          <span style="color:#909399;font-size:13px;">期</span>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSummerCamp, updateSummerCamp } from '../../api/products'

const loading = ref(false)
const saving = ref(false)
const form = ref({ name: '', positioning: '', days: 6, nights: 5, sessions: {}, difference_from_v9: '', principles: [], activities: [], itinerary: [], faq: [] })

onMounted(async () => {
  loading.value = true
  try {
    const res = await getSummerCamp()
    const data = res.data
    // faq 字段可能用 q/a 格式，统一为 question/answer
    if (data.faq) {
      data.faq = data.faq.map(f => ({
        question: f.question || f.q || '',
        answer: f.answer || f.a || '',
      }))
    }
    form.value = { ...form.value, ...data }
  } finally { loading.value = false }
})

const handleSave = async () => {
  saving.value = true
  try {
    await updateSummerCamp(form.value)
    ElMessage.success('保存成功')
  } catch { ElMessage.error('保存失败') }
  finally { saving.value = false }
}
</script>
