<template>
  <a-card title="智能助手配置" class="config-card">
    <a-form
      :model="formState"
      layout="horizontal"
      ref="formRef"
      :rules="rules"
      :labelCol="{ span: 3 }"
      :wrapperCol="{ span: 16 }"
      class="config-form"
    >
      <!-- 向量模型 -->
      <a-form-item label="向量模型" class="form-item required" name="embeddingId">
        <a-select
          v-model:value="formState.embeddingId"
          placeholder="请选择向量模型"
          :options="options.embeddingOptions"
          show-search
          option-filter-prop="label"
        />
      </a-form-item>

      <!-- 大语言模型 -->
      <a-form-item label="大语言模型" class="form-item required" name="llmId">
        <a-select
          v-model:value="formState.llmId"
          placeholder="请选择大语言模型"
          :options="options.llmOptions"
          show-search
          option-filter-prop="label"
        />
      </a-form-item>

      <!-- 知识库 -->
      <a-form-item label="知识库" class="form-item required" name="knowledgeId">
        <a-select
          v-model:value="formState.knowledgeId"
          placeholder="请选择知识库"
          :options="options.knowledgeOptions"
          show-search
          option-filter-prop="label"
        />
      </a-form-item>

      <!-- 按钮（多选） -->
      <a-form-item label="功能按钮" class="form-item required" name="buttonIds">
        <a-select
          v-model:value="formState.buttonIds"
          mode="multiple"
          placeholder="请选择按钮"
          :options="options.buttonOptions"
          show-search
          option-filter-prop="label"
          :max-tag-count="6"
          :max="5"
        />
        <div class="hint">最多可选择5个按钮</div>
      </a-form-item>

      <!-- 提示词 -->
      <a-form-item label="提示词" class="form-item required" name="prompt">
        <a-textarea
          v-model:value="formState.prompt"
          placeholder="请输入提示词，例如：你是一个专业的AI助手..."
          :rows="9"
          :maxlength="500"
          show-count
        />
      </a-form-item>

      <!-- 操作按钮 -->
      <a-form-item class="action-buttons">
        <a-space>
          <a-button @click="resetForm">
            <template #icon><UndoOutlined /></template>
            重置
          </a-button>
          <a-button type="primary" @click="saveConfigData" :loading="saving">
            <template #icon><SaveOutlined /></template>
            保存配置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { getConfigData, saveConfig } from './Chatsetting.api';
  import { FormInstance, message } from 'ant-design-vue';
  import { SaveOutlined, UndoOutlined } from '@ant-design/icons-vue';

  // 表单数据结构
  const formState = reactive({
    id: '',
    embeddingId: undefined,
    llmId: undefined,
    knowledgeId: undefined,
    buttonIds: [],
    prompt: '',
  });

  const formRef = ref<FormInstance>(); // 添加表单引用

  const rules = reactive({
    embeddingId: [{ required: true, message: '请选择向量模型', trigger: 'change' }],
    llmId: [{ required: true, message: '请选择大语言模型', trigger: 'change' }],
    knowledgeId: [{ required: true, message: '请选择知识库', trigger: 'change' }],
    buttonIds: [
      {
        required: true,
        message: '请至少选择一个按钮',
        trigger: 'change',
        type: 'array',
      },
    ],
    prompt: [
      { required: true, message: '请输入提示词', trigger: 'blur' },
      { max: 500, message: '提示词长度不能超过500个字符', trigger: 'blur' },
    ],
  });
  // 选项数据
  const options = reactive({
    embeddingOptions: [],
    llmOptions: [],
    knowledgeOptions: [],
    buttonOptions: [],
  });

  const saving = ref(false);

  // 加载配置数据
  const loadConfig = async () => {
    try {
      const res = await getConfigData();

      if (res.success) {
        const data = res.result;

        // 填充表单
        Object.keys(formState).forEach((key) => {
          if (data.airagChatsettingConfig[key] !== undefined) {
            if (key === 'buttonIds') {
              formState[key] = data.airagChatsettingConfig[key] || [];
            } else {
              formState[key] = data.airagChatsettingConfig[key];
            }
            console.log('shuju' + formState[key]);
          }
        });

        // 填充选项
        options.embeddingOptions = data.embeddingOptions || [];
        console.log('向量' + options.embeddingOptions);
        options.llmOptions = data.llmOptions || [];
        options.knowledgeOptions = data.knowledgeOptions || [];
        options.buttonOptions = data.buttonOptions || [];
      }
    } catch (error) {
      console.error('配置加载失败', error);
      message.error('配置加载失败');
    }
  };

  // 保存配置
  const saveConfigData = async () => {
    try {
      await formRef.value?.validateFields();
    } catch (error) {
      message.error('请填写所有必填字段');
      return;
    }
    const params = {
      ...formState,
      id: formState.id || '',
      buttonIds: formState.buttonIds.filter((id) => id && id !== 'undefined'),
    };
    if (formState.buttonIds.length > 5) {
      message.error('最多只能选择五个按钮');
      return;
    }
    saving.value = true;
    try {
      const res = await saveConfig(params);
      console.log(res.success);
      if (res.success) {
        message.success('配置保存成功');
        loadConfig(); // 重新加载最新数据
      } else {
        message.error('保存失败: ' + res.message);
      }
    } catch (error) {
      console.error('保存失败', error);
      message.error('保存失败');
    } finally {
      saving.value = false;
    }
  };

  // 重置表单
  const resetForm = () => {
    formRef.value?.resetFields();
    loadConfig();
  };

  // 初始化加载
  onMounted(() => {
    loadConfig();
  });
</script>

<style lang="less" scoped>
.config-card {  margin: 30px auto;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;

  /* 标题在左上角，放大，背景与表单一致 */
  :deep(.ant-card-head) {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    padding-left: 24px;
  }
}

.config-form {
  margin-left: 16%;
  width: 60%;
  margin-top: 2%;
}

/* 表单项增加更大间距 */
:deep(.ant-form-item) {
  margin-bottom: 32px; /* 增加间距 */
}

/* Label 样式 */
:deep(.ant-form-item-label > label) {
  font-weight: 500;
  color: #333;
}

/* 输入框/选择框100%宽度 */
:deep(.ant-form-item-control input),
:deep(.ant-form-item-control textarea),
:deep(.ant-form-item-control .ant-select),
:deep(.ant-form-item-control .ant-select-selector) {
  width: 100% !important;
}

/* 输入框高度适中 */
:deep(.ant-input),
:deep(.ant-select-selector),
:deep(.ant-input-textarea) {
  min-height: 38px;
}

/* 提示文字 */
.hint {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* 按钮区域居中 */
.action-buttons {

  margin-top: 24px;
  margin-left: 10%;
  text-align: center;

  .ant-space {
    justify-content: center;
  }

  .ant-btn {
    min-width: 120px;
  }
}
</style>