<template>
  <div class="ai-config">
    <el-form :model="configForm" label-width="150px" class="config-form">
      <el-divider content-position="left">模型配置</el-divider>
      
      <el-form-item label="AI模型">
        <el-select v-model="configForm.model" placeholder="选择AI模型">
          <el-option label="GPT-3.5" value="gpt-3.5" />
          <el-option label="GPT-4" value="gpt-4" />
          <el-option label="Claude" value="claude" />
        </el-select>
      </el-form-item>

      <el-form-item label="API Key">
        <el-input v-model="configForm.apiKey" type="password" show-password />
      </el-form-item>

      <el-form-item label="API地址">
        <el-input v-model="configForm.apiUrl" />
      </el-form-item>

      <el-divider content-position="left">对话配置</el-divider>

      <el-form-item label="温度值">
        <el-slider v-model="configForm.temperature" :min="0" :max="2" :step="0.1" show-input />
        <span class="help-text">控制回答的随机性，值越大回答越随机</span>
      </el-form-item>

      <el-form-item label="最大token数">
        <el-input-number v-model="configForm.maxTokens" :min="100" :max="4000" />
      </el-form-item>

      <el-form-item label="历史对话轮数">
        <el-input-number v-model="configForm.historyTurns" :min="1" :max="20" />
      </el-form-item>

      <el-divider content-position="left">功能配置</el-divider>

      <el-form-item label="启用流式输出">
        <el-switch v-model="configForm.enableStreaming" />
      </el-form-item>

      <el-form-item label="启用文件解读">
        <el-switch v-model="configForm.enableFileInterpretation" />
      </el-form-item>

      <el-form-item label="启用知识库检索">
        <el-switch v-model="configForm.enableKnowledgeRetrieval" />
      </el-form-item>

      <el-form-item label="系统提示词">
        <el-input 
          v-model="configForm.systemPrompt" 
          type="textarea" 
          :rows="6"
          placeholder="设置AI助手的角色和行为..."
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSave">保存配置</el-button>
        <el-button @click="handleTest">测试连接</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElFormItem, ElSelect, ElOption, ElInput, ElSlider, ElInputNumber, ElSwitch, ElButton, ElDivider, ElMessage } from 'element-plus';

const configForm = ref({
  model: 'gpt-3.5',
  apiKey: '',
  apiUrl: '',
  temperature: 0.7,
  maxTokens: 2000,
  historyTurns: 5,
  enableStreaming: true,
  enableFileInterpretation: true,
  enableKnowledgeRetrieval: true,
  systemPrompt: ''
});

onMounted(() => {
  loadConfig();
});

function loadConfig() {
  // TODO: 加载AI配置
}

function handleSave() {
  // TODO: 保存配置
  ElMessage.success('配置保存成功');
}

function handleTest() {
  // TODO: 测试API连接
  ElMessage.info('正在测试连接...');
}

function handleReset() {
  // TODO: 重置配置
}
</script>

<style lang="scss" scoped>
.ai-config {
  padding: 20px;
  max-width: 800px;
}

.config-form {
  .help-text {
    font-size: 12px;
    color: #999;
    margin-left: 12px;
  }
}
</style>

