<template>
  <div class="prompt-detail" v-loading="loading">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>提示词详情 - {{ prompt.name }}</span>
          <div>
            <el-button @click="$router.back()">返回</el-button>
            <el-button type="primary" @click="isEditing = !isEditing">
              {{ isEditing ? '取消编辑' : '编辑' }}
            </el-button>
          </div>
        </div>
      </template>
      
      <el-form ref="formRef" :model="form" label-width="120px" :disabled="!isEditing">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编码">
              <el-input v-model="form.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本">
              <el-tag>v{{ prompt.version }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模块">
              <el-input v-model="form.module" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="说明" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="2" />
        </el-form-item>
        
        <el-form-item label="变量">
          <el-tag v-for="v in prompt.variables" :key="v" style="margin-right: 8px;">
            {{ v }}
          </el-tag>
        </el-form-item>
        
        <el-form-item label="系统提示词" prop="system_prompt">
          <el-input 
            v-model="form.system_prompt" 
            type="textarea" 
            :rows="15"
            :autosize="{ minRows: 10, maxRows: 30 }"
          />
        </el-form-item>
        
        <el-form-item label="用户提示词模板" prop="user_prompt_template">
          <el-input 
            v-model="form.user_prompt_template" 
            type="textarea" 
            :rows="8"
            :autosize="{ minRows: 5, maxRows: 15 }"
          />
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="推荐模型">
              <el-input v-model="form.model_recommendation" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最大Token">
              <el-input-number v-model="form.max_tokens" :min="100" :max="32000" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="温度">
              <el-input-number v-model="form.temperature" :min="0" :max="2" :step="0.1" :precision="1" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item v-if="isEditing">
          <el-button type="primary" :loading="submitting" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'

const route = useRoute()
const promptId = route.params.id

const loading = ref(false)
const isEditing = ref(false)
const submitting = ref(false)
const formRef = ref()

const prompt = ref({})
const form = reactive({
  code: '',
  name: '',
  description: '',
  module: '',
  system_prompt: '',
  user_prompt_template: '',
  model_recommendation: '',
  max_tokens: 4096,
  temperature: 0.7
})

async function fetchPrompt() {
  loading.value = true
  try {
    const res = await api.prompts.get(promptId)
    prompt.value = res
    Object.assign(form, {
      code: res.code,
      name: res.name,
      description: res.description,
      module: res.module,
      system_prompt: res.system_prompt,
      user_prompt_template: res.user_prompt_template,
      model_recommendation: res.model_recommendation,
      max_tokens: res.max_tokens,
      temperature: res.temperature
    })
  } finally {
    loading.value = false
  }
}

async function handleSave() {
  submitting.value = true
  try {
    await api.prompts.update(promptId, {
      name: form.name,
      description: form.description,
      system_prompt: form.system_prompt,
      user_prompt_template: form.user_prompt_template,
      model_recommendation: form.model_recommendation,
      max_tokens: form.max_tokens,
      temperature: form.temperature
    })
    ElMessage.success('保存成功')
    isEditing.value = false
    fetchPrompt()
  } finally {
    submitting.value = false
  }
}

onMounted(() => {
  fetchPrompt()
})
</script>

<style lang="scss" scoped>
.prompt-detail {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>

