<template>
  <el-dialog v-model="visible" title="编辑提示词" width="1000px" @close="handleClose">
    <div class="prompt-editor">
      <div class="toolbar">
        <el-button type="primary" size="small" @click="addPrompt">
          <el-icon><Plus /></el-icon>
          添加提示词
        </el-button>
      </div>

      <el-table :data="prompts" style="width: 100%" max-height="500">
        <el-table-column label="启用" width="60" fixed>
          <template #default="scope">
            <el-switch v-model="scope.row.enabled" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="标识符" prop="identifier" width="120" />
        <el-table-column label="名称" prop="name" width="150" />
        <el-table-column label="角色" width="100">
          <template #default="scope">
            <el-select v-model="scope.row.role" size="small">
              <el-option label="system" value="system" />
              <el-option label="user" value="user" />
              <el-option label="assistant" value="assistant" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="内容" min-width="200">
          <template #default="scope">
            <el-input
              v-model="scope.row.content"
              type="textarea"
              :rows="2"
              placeholder="提示词内容"
            />
          </template>
        </el-table-column>
        <el-table-column label="系统提示" width="90">
          <template #default="scope">
            <el-checkbox v-model="scope.row.system_prompt" />
          </template>
        </el-table-column>
        <el-table-column label="标记" width="70">
          <template #default="scope">
            <el-checkbox v-model="scope.row.marker" />
          </template>
        </el-table-column>
        <el-table-column label="注入位置" width="100">
          <template #default="scope">
            <el-input-number v-model="scope.row.injection_position" :min="0" :max="1" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="注入深度" width="100">
          <template #default="scope">
            <el-input-number v-model="scope.row.injection_depth" :min="0" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" fixed="right">
          <template #default="scope">
            <el-button type="danger" link size="small" @click="removePrompt(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  prompts: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'save'])

const visible = ref(props.modelValue)
const prompts = ref([])

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    prompts.value = JSON.parse(JSON.stringify(props.prompts || []))
  }
})

const addPrompt = () => {
  prompts.value.push({
    identifier: `prompt_${Date.now()}`,
    name: '新提示词',
    role: 'system',
    content: '',
    system_prompt: false,
    enabled: true,
    marker: false,
    injection_position: 0,
    injection_depth: 4,
    injection_order: 100,
    injection_trigger: [],
    forbid_overrides: false
  })
}

const removePrompt = (index) => {
  prompts.value.splice(index, 1)
}

const handleSave = () => {
  emit('save', prompts.value)
  handleClose()
}

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped>
.prompt-editor {
  padding: 10px 0;
}

.toolbar {
  margin-bottom: 15px;
}
</style>
