<template>
  <div>
    <div class="header">
      <h2>
        <span>{{
          type == "add" ? "新增" : type == "edit" ? "编辑" : "查看"
        }}</span
        >应用
      </h2>
    </div>
    <div class="center" v-if="type == 'add'">
      <el-form
        :inline="true"
        :model="AIform"
        :rules="rules"
        ref="AIformRef"
        class="demo-form-inline"
        style="margin-top: 15px; margin-left: 50px"
        label-position="top"
        label-width="90px"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="应用名称:" prop="chat_name">
              <el-input
                style="width: 55%"
                v-model="AIform.chat_name"
                placeholder="请输入应用名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用类型:" prop="application_type">
              <el-select
                v-model="AIform.application_type"
                placeholder="应用类型"
                style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in appTypeList"
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="模型名称:" prop="model_name">
              <el-select
                v-model="AIform.model_name"
                placeholder="请输入选择"
                style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in modelNameList"
                  :label="item.name"
                  :value="item.name"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="知识库:" prop="knowledge_base_names">
              <el-select
                v-model="AIform.knowledge_base_names"
                multiple
                placeholder="请选择知识库"
                style="width: 55%"
                @change="handleKnowledgeBaseChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in kneList"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="文档/目录:" prop="">
              <el-radio v-model="radio" label="1">目录</el-radio>
              <el-radio v-model="radio" label="2">文档</el-radio>
            </el-form-item>
            <!--  --></el-col
          >
          <el-col :span="12" v-if="radio == '1'">
            <el-form-item label="文档目录:" prop="document_directories">
              <el-select
                v-model="AIform.document_directories"
                placeholder="请选择文档目录"
                style="width: 55%"
                :disabled="!AIform.knowledge_base_names.length"
                @change="handleDirectoryChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(dir, index) in directoryList"
                  :label="dir.name"
                  :value="dir.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- Show document selection for both cases -->
          <el-col :span="12" v-else>
            <el-form-item label="文  档:" prop="documents">
              <el-select
                v-model="AIform.documents"
                multiple
                placeholder="请选择文档"
                style="width: 55%"
                :disabled="isDocumentSelectDisabled"
                clearable
                filterable
                remote
                :remote-method="remoteSearch"
                :loading="loading"
                @change="handleDocumentChange"
              >
                <el-option label="全部" value="all"></el-option>
                <el-option
                  v-for="doc in documentList"
                  :label="doc.name"
                  :value="doc.id"
                  :key="`doc-${doc.id}`"
                ></el-option>
              </el-select>
              <div class="hint">请输入文档名称搜索</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="应用图标:">
              <!-- aiagent_icon -->
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                method="post"
                :data="params"
                :show-file-list="false"
                :on-success="onUploadAddSuccess"
              >
                <img
                  v-if="
                    AIform.aiagent_icon != null && AIform.aiagent_icon != ''
                  "
                  :src="AIform.aiagent_icon"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <svg-icon
                  icon-class="header"
                  style="height: 70px; width: 70px"
                  v-else
                /> -->
              </el-upload>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="描 述:">
              <el-input
                style="width: 55%"
                v-model="AIform.role_description"
                placeholder="请输入描述"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="温度:" prop="temperature">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="AIform.temperature"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="AIform.temperature"
                  :min="0"
                  :max="1"
                ></el-input-number>
              </div>
              <div class="hint">控制生成文本的随机性，0为最保守，1为最创新</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大token数:" prop="max_tokens">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="AIform.max_tokens"
                  :min="1"
                  :max="4096"
                  :step="1"
                ></el-slider>
                <el-input-number
                  v-model="AIform.max_tokens"
                  :min="0"
                  :max="4096"
                  :step="1"
                ></el-input-number>
              </div>
              <div class="hint">限制生成文本的最大长度</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="核采样参数:" prop="top_p">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="AIform.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="AIform.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">控制词汇多样性，1为考虑所有可能性</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重复内容惩罚:" prop="frequency_penalty">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="AIform.frequency_penalty"
                  :min="0"
                  :max="2"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="AIform.frequency_penalty"
                  :min="0"
                  :max="2"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">防止重复，正值减少重复，负值增加重复</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="新话题偏好:" prop="presence_penalty">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="AIform.presence_penalty"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="AIform.presence_penalty"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">正值鼓励新话题，负值保持话题一致性</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="响应格式:" prop="response_format">
              <el-input
                style="width: 55%"
                v-model="AIform.response_format"
                placeholder="text"
              ></el-input>
              <div class="hint">指定AI响应的格式，如text, json等</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="上下文窗口:" prop="context_window">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="AIform.context_window"
                  :min="1"
                  :max="10000"
                ></el-slider>
                <el-input-number
                  v-model="AIform.context_window"
                  :min="1"
                  :max="10000"
                  :step="1"
                ></el-input-number>
              </div>
              <div class="hint">AI考虑的上下文token数量</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="会话ID:" prop="session_id">
              <el-input
                style="width: 55%"
                v-model="AIform.session_id"
                placeholder="可选"
              ></el-input>
              <div class="hint">特定会话的唯一标识符，如果有的话</div>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="语言:" prop="language">
              <el-select v-model="AIform.language" style="width: 55%">
                <el-option label="中文" value="zh"></el-option>
                <el-option label="English" value="en"></el-option>
                <el-option label="日本語" value="ja"></el-option>
                <el-option label="한국어" value="ko"></el-option>
                <el-option label="Français" value="fr"></el-option>
                <el-option label="Deutsch" value="de"></el-option>
              </el-select>
              <div class="hint">选择AI响应的主要语言</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求超时:" prop="timeout">
              <el-input-number
                v-model="AIform.timeout"
                :min="1"
                :max="60"
              ></el-input-number>
              <div class="hint">设置请求的最大等待时间（秒）</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="角色名称:" prop="role_name">
              <el-input
                style="width: 55%"
                v-model="AIform.role_name"
                placeholder="例如: 客服专员"
              ></el-input>
              <div class="hint">为AI助手设定一个角色名称</div>
            </el-form-item>
          </el-col>
          <!--  <el-col :span="12">
            <el-form-item label="角色描述:" prop="role_description">
              <el-input
                style="width: 55%"
                v-model="AIform.role_description"
                type="textarea"
                :rows="3"
                placeholder="例如: 你是一位专业的客服专员，负责解答客户关于我们产品和服务的问题。"
              ></el-input>
              <div class="hint">详细描述AI助手的角色和职责</div>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="角色权限:" prop="role_permissions">
              <el-input
                style="width: 55%"
                v-model="AIform.role_permissions"
                placeholder='["回答产品问题", "处理退换货请求", "升级复杂问题"]'
              ></el-input>
              <div class="hint">输入JSON数组，列出AI助手的具体权限</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="自定义变量:" prop="custom_variables">
              <el-input
                style="width: 55%"
                v-model="AIform.custom_variables"
                placeholder='{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}'
              ></el-input>
              <div class="hint">
                输入JSON对象，定义可在提示模板中使用的自定义变量
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="自定义提示模板:" prop="custom_prompt">
              <el-input
                style="width: 100%"
                v-model="AIform.custom_prompt"
                type="textarea"
                :rows="12"
                placeholder="使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。
                    上下文: {context}
                    人类: {question}
                    AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}"
              ></el-input>
              <div class="hint">
                自定义AI助手的回答模板，可使用变量如{context}, {question}等
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="是否启用API_key:" prop="generate_new_api_key">
              <el-switch
                v-model="AIform.generate_new_api_key"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否设为默认:" prop="is_default">
              <el-switch
                v-model="AIform.is_default"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="center" v-else-if="type == 'edit'">
      <el-form
        :model="editForm"
        :rules="rules"
        ref="editFormRef"
        label-width="120px"
        style="margin: 20px 50px"
        label-position="top"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="应用名称:" prop="chat_name">
              <el-input
                style="width: 55%"
                v-model="editForm.chat_name"
                placeholder="请输入应用名称"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="模型库:" prop="modelLibrary">
              <el-select
                v-model="editForm.modelLibrary"
                placeholder="ollama"
                style="width: 100%"
              >
                <el-option label="ollama" value="ollama"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用类型:" prop="application_type">
              <el-select
                v-model="editForm.application_type"
                placeholder="应用类型"
                style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in appTypeList"
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="模型名称:" prop="model_name">
              <el-select
                v-model="editForm.model_name"
                placeholder="请输入选择"
                style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in modelNameList"
                  :label="item.name"
                  :value="item.name"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="模型类型:" prop="model_type">
              <el-select
                v-model="editForm.model_type"
                placeholder="请输入选择"
                style="width: 100%"
              >
                <el-option label="chat" value="chat"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="知识库:" prop="knowledge_base_names">
              <el-select
                v-model="editForm.knowledge_base_names"
                multiple
                placeholder="请选择知识库"
                style="width: 55%"
                @change="handleEditKnowledgeBaseChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in kneList"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="文档/目录:" prop="">
              <el-radio v-model="editForm.radio" label="1">目录</el-radio>
              <el-radio v-model="editForm.radio" label="2">文档</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="editForm.radio == '1'">
            <el-form-item label="文档目录:" prop="document_directories">
              <el-select
                v-model="editForm.document_directories"
                placeholder="请选择文档目录"
                style="width: 55%"
                :disabled="!editForm.knowledge_base_names.length"
                @change="handleEditDirectoryChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(dir, index) in editDirectoryList"
                  :label="dir.name"
                  :value="dir.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-else>
            <el-form-item label="文  档:" prop="documents">
              <el-select
                v-model="editForm.documents"
                multiple
                placeholder="请选择文档"
                style="width: 55%"
                :disabled="!editForm.knowledge_base_names.length"
                clearable
                filterable
                remote
                :remote-method="remoteEditSearch"
                :loading="editLoading"
                @change="handleEditDocumentChange"
              >
                <el-option label="全部" value="all"></el-option>
                <el-option
                  v-for="doc in editDocumentList"
                  :label="doc.name"
                  :value="doc.id"
                  :key="`edit-doc-${doc.id}`"
                ></el-option>
              </el-select>
              <div class="hint">请输入文档名称搜索</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="应用图标:">
              <!-- aiagent_icon -->
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                method="post"
                :data="params"
                :show-file-list="false"
                :on-success="onUploadEditSuccess"
              >
                <img
                  v-if="
                    editForm.aiagent_icon != null && editForm.aiagent_icon != ''
                  "
                  :src="editForm.aiagent_icon"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <svg-icon
                  icon-class="header"
                  style="height: 70px; width: 70px"
                  v-else
                /> -->
              </el-upload>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="描 述:">
              <el-input
                style="width: 55%"
                v-model="editForm.role_description"
                placeholder="请输入描述"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="温度:" prop="temperature">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="editForm.temperature"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="editForm.temperature"
                  :min="0"
                  :max="1"
                ></el-input-number>
              </div>
              <div class="hint">控制生成文本的随机性，0为最保守，1为最创新</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大token数:" prop="max_tokens">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="editForm.max_tokens"
                  :min="1"
                  :max="4096"
                  :step="1"
                ></el-slider>
                <el-input-number
                  v-model="editForm.max_tokens"
                  :min="0"
                  :max="4096"
                  :step="1"
                ></el-input-number>
              </div>
              <div class="hint">限制生成文本的最大长度</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="核采样参数:" prop="top_p">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="editForm.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="editForm.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">控制词汇多样性，1为考虑所有可能性</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重复内容惩罚:" prop="frequency_penalty">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="editForm.frequency_penalty"
                  :min="0"
                  :max="2"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="editForm.frequency_penalty"
                  :min="0"
                  :max="2"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">防止重复，正值减少重复，负值增加重复</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="新话题偏好:" prop="presence_penalty">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="editForm.presence_penalty"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  v-model="editForm.presence_penalty"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">正值鼓励新话题，负值保持话题一致性</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="响应格式:" prop="response_format">
              <el-input
                style="width: 55%"
                v-model="editForm.response_format"
                placeholder="text"
              ></el-input>
              <div class="hint">指定AI响应的格式，如text, json等</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="上下文窗口:" prop="context_window">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  style="width: 60%"
                  v-model="editForm.context_window"
                  :min="1"
                  :max="10000"
                ></el-slider>
                <el-input-number
                  v-model="editForm.context_window"
                  :min="1"
                  :max="10000"
                  :step="1"
                ></el-input-number>
              </div>
              <div class="hint">AI考虑的上下文token数量</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="会话ID:" prop="session_id">
              <el-input
                style="width: 55%"
                v-model="editForm.session_id"
                placeholder="可选"
              ></el-input>
              <div class="hint">特定会话的唯一标识符，如果有的话</div>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="语言:" prop="language">
              <el-select v-model="editForm.language" style="width: 55%">
                <el-option label="中文" value="zh"></el-option>
                <el-option label="English" value="en"></el-option>
                <el-option label="日本語" value="ja"></el-option>
                <el-option label="한국어" value="ko"></el-option>
                <el-option label="Français" value="fr"></el-option>
                <el-option label="Deutsch" value="de"></el-option>
              </el-select>
              <div class="hint">选择AI响应的主要语言</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求超时:" prop="timeout">
              <el-input-number
                v-model="editForm.timeout"
                :min="1"
                :max="60"
              ></el-input-number>
              <div class="hint">设置请求的最大等待时间（秒）</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="角色名称:" prop="role_name">
              <el-input
                style="width: 55%"
                v-model="editForm.role_name"
                placeholder="例如: 客服专员"
              ></el-input>
              <div class="hint">为AI助手设定一个角色名称</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色权限:" prop="role_permissions">
              <el-input
                style="width: 55%"
                v-model="editForm.role_permissions"
                placeholder='["回答产品问题", "处理退换货请求", "升级复杂问题"]'
              ></el-input>
              <div class="hint">输入JSON数组，列出AI助手的具体权限</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="角色描述:" prop="role_description">
              <el-input
               style="width: 55%"
                v-model="editForm.role_description"
                type="textarea"
                :rows="3"
                placeholder="例如: 你是一位专业的客服专员，负责解答客户关于我们产品和服务的问题。"
              ></el-input>
              <div class="hint">详细描述AI助手的角色和职责</div>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="自定义变量:" prop="custom_variables">
              <el-input
                style="width: 55%"
                v-model="editForm.custom_variables"
                placeholder='{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}'
              ></el-input>
              <div class="hint">
                输入JSON对象，定义可在提示模板中使用的自定义变量
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="自定义提示模板:" prop="custom_prompt">
              <el-input
                style="width: 100%"
                v-model="editForm.custom_prompt"
                type="textarea"
                :rows="12"
                placeholder="使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。
                    上下文: {context}
                    人类: {question}
                    AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}"
              ></el-input>
              <div class="hint">
                自定义AI助手的回答模板，可使用变量如{context}, {question}等
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="是否启用API_key:" prop="generate_new_api_key">
              <el-switch
                v-model="editForm.generate_new_api_key"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否设为默认:" prop="is_default">
              <el-switch
                v-model="editForm.is_default"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="center" v-else>
      <el-form
        :model="viewForm"
        :rules="rules"
        ref="viewFormRef"
        label-width="120px"
        style="margin: 20px 50px"
        label-position="top"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="应用名称:" prop="chat_name">
              <el-input
                disabled
                style="width: 55%"
                v-model="viewForm.chat_name"
                placeholder="请输入应用名称"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="模型库:" prop="modelLibrary">
              <el-select
                v-model="viewForm.modelLibrary"
                placeholder="ollama"
                style="width: 100%"
              >
                <el-option label="ollama" value="ollama"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用类型:" prop="application_type">
              <el-select
                disabled
                v-model="viewForm.application_type"
                placeholder="应用类型"
                style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in appTypeList"
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="模型名称:" prop="model_name">
              <el-select
                disabled
                v-model="viewForm.model_name"
                placeholder="请输入选择"
                style="width: 55%"
                clearable
              >
                <el-option
                  v-for="(item, index) in modelNameList"
                  :label="item.name"
                  :value="item.name"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="模型类型:" prop="model_type">
              <el-select
                v-model="viewForm.model_type"
                placeholder="请输入选择"
                style="width: 100%"
              >
                <el-option label="chat" value="chat"></el-option>
              </el-select>
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="知识库:" prop="knowledge_base_names">
              <el-select
                disabled
                v-model="viewForm.knowledge_base_names"
                multiple
                placeholder="请选择知识库"
                style="width: 55%"
                @change="handleEditKnowledgeBaseChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(item, index) in kneList"
                  :label="item.name"
                  :value="item.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="文档/目录:" prop="">
              <el-radio v-model="viewForm.radio" label="1" disabled
                >目录</el-radio
              >
              <el-radio v-model="viewForm.radio" label="2" disabled
                >文档</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="viewForm.radio == '1'">
            <el-form-item label="文档目录:" prop="document_directories">
              <el-select
                v-model="viewForm.document_directories"
                placeholder="请选择文档目录"
                style="width: 55%"
                disabled
                @change="handleEditDirectoryChange"
                clearable
                filterable
              >
                <el-option
                  v-for="(dir, index) in editDirectoryList"
                  :label="dir.name"
                  :value="dir.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-else>
            <el-form-item label="文  档:" prop="documents">
              <el-select
                v-model="viewForm.documents"
                multiple
                placeholder="请选择文档"
                style="width: 55%"
                disabled
                clearable
                filterable
              >
                <el-option
                  v-for="(doc, index) in editDocumentList"
                  :label="doc.name"
                  :value="doc.id"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="应用图标:">
              <!-- aiagent_icon -->
              <el-upload
                disabled
                class="avatar-uploader"
                :action="uploadUrl"
                method="post"
                :data="params"
                :show-file-list="false"
                :on-success="onUploadEditSuccess"
              >
                <img
                  v-if="
                    viewForm.aiagent_icon != null && viewForm.aiagent_icon != ''
                  "
                  :src="viewForm.aiagent_icon"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <svg-icon
                  icon-class="header"
                  style="height: 70px; width: 70px"
                  v-else
                /> -->
              </el-upload>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="描 述:">
              <el-input
                disabled
                style="width: 55%"
                v-model="viewForm.role_description"
                placeholder="请输入描述"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="温度:" prop="temperature">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  disabled
                  style="width: 60%"
                  v-model="viewForm.temperature"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  disabled
                  v-model="viewForm.temperature"
                  :min="0"
                  :max="1"
                ></el-input-number>
              </div>
              <div class="hint">控制生成文本的随机性，0为最保守，1为最创新</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大token数:" prop="max_tokens">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  disabled
                  style="width: 60%"
                  v-model="viewForm.max_tokens"
                  :min="1"
                  :max="4096"
                  :step="1"
                ></el-slider>
                <el-input-number
                  disabled
                  v-model="viewForm.max_tokens"
                  :min="0"
                  :max="4096"
                  :step="1"
                ></el-input-number>
              </div>
              <div class="hint">限制生成文本的最大长度</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="核采样参数:" prop="top_p">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  disabled
                  style="width: 60%"
                  v-model="viewForm.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  disabled
                  v-model="viewForm.top_p"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">控制词汇多样性，1为考虑所有可能性</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重复内容惩罚:" prop="frequency_penalty">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  disabled
                  style="width: 60%"
                  v-model="viewForm.frequency_penalty"
                  :min="0"
                  :max="2"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  disabled
                  v-model="viewForm.frequency_penalty"
                  :min="0"
                  :max="2"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">防止重复，正值减少重复，负值增加重复</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="新话题偏好:" prop="presence_penalty">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  disabled
                  style="width: 60%"
                  v-model="viewForm.presence_penalty"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-slider>
                <el-input-number
                  disabled
                  v-model="viewForm.presence_penalty"
                  :min="0"
                  :max="1"
                  :step="0.1"
                ></el-input-number>
              </div>
              <div class="hint">正值鼓励新话题，负值保持话题一致性</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="响应格式:" prop="response_format">
              <el-input
                disabled
                style="width: 55%"
                v-model="viewForm.response_format"
                placeholder="text"
              ></el-input>
              <div class="hint">指定AI响应的格式，如text, json等</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="上下文窗口:" prop="context_window">
              <div style="display: flex; justify-content: space-around">
                <el-slider
                  disabled
                  style="width: 60%"
                  v-model="viewForm.context_window"
                  :min="1"
                  :max="10000"
                ></el-slider>
                <el-input-number
                  disabled
                  v-model="viewForm.context_window"
                  :min="1"
                  :max="10000"
                  :step="1"
                ></el-input-number>
              </div>
              <div class="hint">AI考虑的上下文token数量</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="会话ID:" prop="session_id">
              <el-input
                disabled
                style="width: 55%"
                v-model="viewForm.session_id"
                placeholder="可选"
              ></el-input>
              <div class="hint">特定会话的唯一标识符，如果有的话</div>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="语言:" prop="language">
              <el-select
                disabled
                v-model="viewForm.language"
                style="width: 55%"
              >
                <el-option label="中文" value="zh"></el-option>
                <el-option label="English" value="en"></el-option>
                <el-option label="日本語" value="ja"></el-option>
                <el-option label="한국어" value="ko"></el-option>
                <el-option label="Français" value="fr"></el-option>
                <el-option label="Deutsch" value="de"></el-option>
              </el-select>
              <div class="hint">选择AI响应的主要语言</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求超时:" prop="timeout">
              <el-input-number
                disabled
                v-model="viewForm.timeout"
                :min="1"
                :max="60"
              ></el-input-number>
              <div class="hint">设置请求的最大等待时间（秒）</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="角色名称:" prop="role_name">
              <el-input
                disabled
                style="width: 55%"
                v-model="viewForm.role_name"
                placeholder="例如: 客服专员"
              ></el-input>
              <div class="hint">为AI助手设定一个角色名称</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色权限:" prop="role_permissions">
              <el-input
                disabled
                style="width: 55%"
                v-model="viewForm.role_permissions"
                placeholder='["回答产品问题", "处理退换货请求", "升级复杂问题"]'
              ></el-input>
              <div class="hint">输入JSON数组，列出AI助手的具体权限</div>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="角色描述:" prop="role_description">
              <el-input
               style="width: 55%"
                v-model="viewForm.role_description"
                type="textarea"
                :rows="3"
                placeholder="例如: 你是一位专业的客服专员，负责解答客户关于我们产品和服务的问题。"
              ></el-input>
              <div class="hint">详细描述AI助手的角色和职责</div>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="自定义变量:" prop="custom_variables">
              <el-input
                disabled
                style="width: 55%"
                v-model="viewForm.custom_variables"
                placeholder='{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}'
              ></el-input>
              <div class="hint">
                输入JSON对象，定义可在提示模板中使用的自定义变量
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="自定义提示模板:" prop="custom_prompt">
              <el-input
                disabled
                style="width: 100%"
                v-model="viewForm.custom_prompt"
                type="textarea"
                :rows="12"
                placeholder="使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。
                    上下文: {context}
                    人类: {question}
                    AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}"
              ></el-input>
              <div class="hint">
                自定义AI助手的回答模板，可使用变量如{context}, {question}等
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="是否启用API_key:" prop="generate_new_api_key">
              <el-switch
                disabled
                v-model="viewForm.generate_new_api_key"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否设为默认:" prop="is_default">
              <el-switch
                disabled
                v-model="viewForm.is_default"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="footer">
      <el-button @click="cancelApplication">取 消</el-button>
      <el-button
        type="primary"
        v-if="type == 'add'"
        @click="generateApplication"
        >生成应用</el-button
      >
      <el-button type="primary" v-else-if="type == 'edit'" @click="submitEdit"
        >确认修改</el-button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {
  modelList,
  listBuckets,
  selectTypeList,
  getBucketContents,
  configSave,
  configList,
  configDelete,
  application_types,
  set_default,
  configurationInfo,
  vague_search,
} from "@/api/knowledge";
export default {
  /*组件参数 接收来自父组件的数据*/
  props: {},
  /*局部注册的组件*/
  components: {},
  /*组件状态值*/
  data() {
    return {
      AIform: {
        chat_name: "",
        modelLibrary: "ollama",
        model_type: "chat",
        model_name: "",
        knowledge_base_names: [],
        document_directories: [],
        documents: [],
        temperature: 0.7,
        max_tokens: 150,
        top_p: 1.0,
        frequency_penalty: 0.0,
        presence_penalty: 0.0,
        response_format: "text",
        context_window: 2048,
        user_id: "user123",
        session_id: "session456",
        language: "en",
        timeout: 30,
        role_name: "Admin",
        role_description: "",
        role_permissions: '["回答产品问题", "处理退换货请求", "升级复杂问题"]',
        custom_variables:
          '{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}',
        custom_prompt:
          "使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
        application_type: "",
        is_default: false,
        generate_new_api_key: true,
        aiagent_icon: "",
      },
      /* 模型库 */
      modelList: [],
      /* 模型类型 */
      modelTypeList: [],
      /* 模型名称 */
      modelNameList: [],
      /* 知识库 */
      kneList: [],
      /* 文档目录 */
      directoryList: [],
      /* 文档 */
      documentList: [],
      bucket_id: "",
      rules: {
        chat_name: [
          { required: true, message: "请填写应名称", trigger: "blur" },
        ],
        model_name: [
          { required: true, message: "请选择模型名称", trigger: "change" },
        ],
        knowledge_base_names: [
          {
            required: true,
            message: "请选择至少一个知识库",
            trigger: "change",
          },
        ],
        /* document_directories: [
          { required: true, message: '请选择文档目录', trigger: 'change' }
        ], */
        documents: [
          { required: true, message: "请选择至少一个文档", trigger: "change" },
        ],
        role_permissions: [
          { required: true, message: "请输入角色权限", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              try {
                JSON.parse(value);
                callback();
              } catch (error) {
                callback(new Error("请输入有效的 JSON 数组"));
              }
            },
            trigger: "blur",
          },
        ],
        custom_variables: [
          { required: true, message: "请输入自定义变量", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              try {
                JSON.parse(value);
                callback();
              } catch (error) {
                callback(new Error("请输入有效的 JSON 对象"));
              }
            },
            trigger: "blur",
          },
        ],
      },
      /* 配置类型列表 */
      appTypeList: [],
      id: "",
      editForm: {
        // 复制 AIform 的结构，但初始值为空
        chat_name: "",
        modelLibrary: "ollama",
        model_type: "chat",
        model_name: "",
        knowledge_base_names: [],
        document_directories: [],
        documents: [],
        temperature: 0.7,
        max_tokens: 150,
        top_p: 1.0,
        frequency_penalty: 0.0,
        presence_penalty: 0.0,
        response_format: "text",
        context_window: 2048,
        user_id: "user123",
        session_id: "session456",
        language: "en",
        timeout: 30,
        role_name: "Admin",
        role_description: "",
        role_permissions: '["回答产品问题", "处理退换货请求", "升级复杂问题"]',
        custom_variables:
          '{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}',
        custom_prompt:
          "使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
        application_type: "",
        is_default: false,
        generate_new_api_key: true,
        radio: "1",
        tempDocuments: [], // 用于临时存储文档数据
        tempDirectories: [], // 用于临时存储目录数据
      },
      editDirectoryList: [],
      editDocumentList: [],
      type: "",
      viewForm: {
        // 复制 AIform 的结构，但初始值为空
        chat_name: "",
        modelLibrary: "ollama",
        model_type: "chat",
        model_name: "",
        knowledge_base_names: [],
        document_directories: [],
        documents: [],
        temperature: 0.7,
        max_tokens: 150,
        top_p: 1.0,
        frequency_penalty: 0.0,
        presence_penalty: 0.0,
        response_format: "text",
        context_window: 2048,
        user_id: "user123",
        session_id: "session456",
        language: "en",
        timeout: 30,
        role_name: "Admin",
        role_description: "",
        role_permissions: "",
        custom_variables: "",
        custom_prompt:
          "使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
        application_type: "",
        is_default: false,
        generate_new_api_key: true,
        aiagent_icon: "",
        radio: "1",
      },
      params: {
        token: "",
      },
      uploadUrl: "",
      radio: "1",
      loading: false, // 添加loading状态
      editLoading: false,
    };
  },

  /*计算属性*/
  computed: {
    getKnowledgeBaseNames() {
      const names = this.AIform.knowledge_base_names.map(
        (id) => this.kneList.find((item) => item.id === id)?.name || id
      );
      if (names.length <= 2) {
        return names.join(", ");
      } else {
        return `${names[0]}, ${names[1]} 等${names.length}个`;
      }
    },
    getDocumentNames() {
      const names = this.AIform.documents.map(
        (id) => this.documentList.find((item) => item.id === id)?.name || id
      );
      if (names.length <= 2) {
        return names.join(", ");
      } else {
        return `${names[0]}, ${names[1]} 等${names.length}个`;
      }
    },
    isDocumentSelectDisabled() {
      // Modify the disabled logic based on radio selection
      if (this.radio === "1") {
        return (
          !this.AIform.knowledge_base_names.length ||
          this.AIform.document_directories == ""
        );
      } else {
        return !this.AIform.knowledge_base_names.length;
      }
    },
  },

  /*侦听器*/
  watch: {
    "editForm.radio": {
      handler(newVal, oldVal) {
        if (newVal === "1") {
          // 切换到目录模式
          // 保存当前文档选择
          this.editForm.tempDocuments = [...(this.editForm.documents || [])];
          // 恢复之前的目录选择
          if (this.editForm.tempDirectories.length > 0) {
            this.editForm.document_directories = [
              ...this.editForm.tempDirectories,
            ];
          }
        } else {
          // 切换到文档模式
          // 保存当前目录选择
          this.editForm.tempDirectories = [
            ...(this.editForm.document_directories || []),
          ];
          // 恢复之前的文档选择
          if (this.editForm.tempDocuments.length > 0) {
            this.editForm.documents = [...this.editForm.tempDocuments];
          }
        }
      },
    },
  },

  /*
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  created() {
    let _this = this;
    _this.uploadUrl = process.env.VUE_APP_BASE_API + "/upload/file";
    _this.params.token = _this.$store.getters.token;
  },
  mounted() {
    /* 初始化列表 */

    this.init();
    this.type = this.$route.query.type;
    this.id = this.$route.query.id;
    /* if (this.type == "edit") {
       this.initEdit();
     
    } else */ if (this.type == "view") {
      this.initView();
    }
  },

  /*组件方法*/
  methods: {
    // 编辑模式的远程搜索方法
    remoteEditSearch(query) {
      if (query !== "") {
        this.editLoading = true;
        // 构建搜索参数
        const searchParams = {
          kb_id: this.editForm.knowledge_base_names, // 当前选中的知识库ID
          keyword: query, // 搜索关键词
          limit: 10, // 限制返回数量
        };

        // 如果是目录模式且选择了目录，添加目录ID
        if (this.editForm.radio === "1" && this.editForm.document_directories) {
          searchParams.doc_type_id = this.editForm.document_directories;
        }

        // 调用模糊搜索接口
        vague_search(searchParams)
          .then((response) => {
            this.editDocumentList = response.data.items || [];
          })
          .catch((error) => {
            console.error("搜索文档失败:", error);
            this.$message.error("搜索文档失败");
          })
          .finally(() => {
            this.editLoading = false;
          });
      } else {
        // 当搜索词为空时，恢复原始文档列表
        if (this.editForm.radio === "1") {
          // 目录模式：加载选中目录的文档
          if (this.editForm.document_directories) {
            this.loadEditDocumentList(this.editForm.document_directories);
          }
        } else {
          // 文档模式：加载所有文档
          if (this.editForm.knowledge_base_names.length > 0) {
            //this.loadAllEditDocuments(this.editForm.knowledge_base_names[0]);
          }
        }
      }
    },
    // 添加加载所有文档的方法
    loadAllEditDocuments(kbId) {
      this.editLoading = true;
      let queryForm = {
        page: 1,
        pageSize: 9999,
        bucket_id: kbId,
        doc_type_id: "",
      };

      getBucketContents(queryForm)
        .then((res) => {
          this.editDocumentList = res.data.documents;
        })
        .finally(() => {
          this.editLoading = false;
        });
    },
    // 远程搜索方法
    remoteSearch(query) {
      if (query !== "") {
        this.loading = true;
        // 构建搜索参数
        const searchParams = {
          kb_id: this.AIform.knowledge_base_names, // 当前选中的知识库ID
          keyword: query, // 搜索关键词
          limit: 10, // 限制返回数量
        };

        // 如果是目录模式且选择了目录，添加目录ID
        if (this.radio === "1" && this.AIform.document_directories) {
          searchParams.doc_type_id = this.AIform.document_directories;
        }

        // 调用模糊搜索接口
        vague_search(searchParams)
          .then((response) => {
            this.documentList = response.data.items || [];
          })
          .catch((error) => {
            console.error("搜索文档失败:", error);
            this.$message.error("搜索文档失败");
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        // 当搜索词为空时，恢复原始文档列表
        if (this.radio === "1") {
          // 目录模式：加载选中目录的文档
          if (this.AIform.document_directories) {
            this.loadDocumentList(this.AIform.document_directories);
          }
        } else {
          // 文档模式：加载所有文档
          if (this.AIform.knowledge_base_names.length > 0) {
            //this.loadAllDocuments(this.AIform.knowledge_base_names[0]);
          }
        }
      }
    },
    // 修改加载所有文档的方法，添加loading状态
    loadAllDocuments(kbId) {
      this.loading = true;
      let queryForm = {
        page: 1,
        pageSize: 9999,
        bucket_id: kbId,
        doc_type_id: "",
      };

      getBucketContents(queryForm)
        .then((res) => {
          this.documentList = res.data.documents;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /* 编辑 */
    /* 上传图标 */
    onUploadEditSuccess(e) {
      this.editForm.aiagent_icon = e.data.fileUrl;
    },
    // 修改文档选择处理方法
    handleEditDocumentChange(selectedValues) {
      if (selectedValues.includes("all")) {
        // 如果选择了"全部"，则清空其他选项
        this.editForm.documents = ["all"];
      } else {
        // 直接使用新的选择值，不再保留原有文档
        if (selectedValues.length > 10) {
          this.editForm.documents = selectedValues.slice(0, 10);
          this.$message.warning("最多只能选择10个文档");
        } else {
          this.editForm.documents = selectedValues;
        }
      }
    },
    /* 编辑确认修改 */
    submitEdit() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (valid) {
          try {
            // 深拷贝表单数据
            const convertedForm = { ...this.editForm };

            // 处理 role_permissions 和 custom_variables
            const parsedPermissions = this.validateAndParseJSON(
              "role_permissions",
              "角色权限格式无效"
            );
            if (!parsedPermissions) return;
            convertedForm.role_permissions = parsedPermissions;

            const parsedVariables = this.validateAndParseJSON(
              "custom_variables",
              "自定义变量格式无效"
            );
            if (!parsedVariables) return;
            convertedForm.custom_variables = parsedVariables;
            // 根据radio值处理文档和目录
            if (convertedForm.radio === "1") {
              // 目录模式处理保持不变
              if (
                !this.editForm.document_directories ||
                this.editForm.document_directories === "001"
              ) {
                convertedForm.document_directories = [];
              } else {
                convertedForm.document_directories = this.safeGetNamesByIds(
                  [this.editForm.document_directories],
                  this.editDirectoryList
                );
              }
              // 目录模式下清空文档选择
              convertedForm.documents = [];
            } else {
              // 文档模式
              // 清空目录选择
              convertedForm.document_directories = [];

              // 处理文档选择 - 如果为空则直接传空数组
              if (!this.editForm.documents.length) {
                convertedForm.documents = [];
              } else {
                // 转换文档 ID 为名称
                convertedForm.documents = this.editDocumentList
                  .filter((doc) => this.editForm.documents.includes(doc.id))
                  .map((doc) => doc.name);
              }
            }

            // 删除不需要提交的临时数据和radio值
            delete convertedForm.tempDocuments;
            delete convertedForm.tempDirectories;
            delete convertedForm.radio;

            console.log("Converted form for edit:", convertedForm);

            // 发送请求
            const response = await axios.post(
              `${process.env.VUE_APP_BASE_API}/chatbot/configuration/update/`,
              convertedForm,
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            );

            if (response.status === 200) {
              this.$message.success("应用更新成功");
              this.$router.push({
                path: "/knowledge/chatPage/index",
              });
            } else {
              this.$message.error(response.data.message || "应用更新失败");
            }
          } catch (error) {
            console.error("Error updating application:", error);
            this.$message.error("应用更新失败，请稍后重试");
          }
        } else {
          this.$message.error("请填写所有必填字段");
          return false;
        }
      });
    },
    handleEditKnowledgeBaseChange(val) {
      if (val && val.length > 0) {
        // 只在有选择知识库时重置
        if (this.editForm.radio === "1") {
          this.editForm.document_directories = [];
          this.editForm.documents = [];
        } else {
          this.editForm.documents = [];
          // 加载初始文档列表
          this.loadAllEditDocuments(val[0]);
        }
        this.editDocumentList = [];
        this.loadEditDirectoryList(val);
      }
    },
    handleEditDirectoryChange(val) {
      if (this.editForm.radio === "1") {
        // 只在目录模式下清空文档选择
        this.editForm.documents = [];
        this.loadEditDocumentList(val);
      }
    },
    /* 知识库选择监听 */
    async loadEditDirectoryList(val) {
      this.editDirectoryList = []; // 清空现有目录列表
      let totalDocuments = 0;
      let otherFolderCount = 0;

      const promises = val.map(async (kbName) => {
        const typeForm = {
          page: 1,
          pageSize: 9999,
          kb_id: kbName,
        };

        try {
          const res = await selectTypeList(typeForm);
          if (res.data) {
            this.editDirectoryList = [
              ...new Set([...this.editDirectoryList, ...res.data.dataList]),
            ];

            res.data.dataList.forEach((folder) => {
              if (folder.id === "other") {
                otherFolderCount += folder.document_count || 0;
              } else {
                totalDocuments += folder.document_count || 0;
              }
            });
          }
        } catch (error) {
          console.error(
            `Error loading directory list for kb_id ${kbName}:`,
            error
          );
        }
      });

      await Promise.all(promises);

      this.editDirectoryList.unshift({
        id: "001",
        name: "全部",
        document_count: totalDocuments + otherFolderCount,
      });

      return this.editDirectoryList;
    },
    /* 监听目录选择 */
    loadEditDocumentList(val) {
      // 找到选中目录的名称
      const selectedDirectoryName = val;
      const id = this.directoryList.find((el) => el.id == val);
      // 从 kneList 中找到对应的知识库
      const selectedKnowledgeBase = this.kneList.find(
        (kb) => kb.id === this.editForm.knowledge_base_names[0]
      );

      /* if (!selectedKnowledgeBase) {
        console.error('No matching knowledge base found');
        return;
      } */
      let queryForm = {
        page: 1,
        pageSize: 9999,
        bucket_id: selectedKnowledgeBase.id,
        doc_type_id:
          selectedDirectoryName === "001"
            ? ""
            : this.getDirectoryIdByName(selectedDirectoryName),
      };

      return getBucketContents(queryForm).then((res) => {
        this.editDocumentList = res.data.documents;
        return this.editDocumentList;
      });
    },
    // 添加一个辅助方法来根据目录名称获取目录ID
    getDirectoryIdByName(directoryName) {
      const directory = this.editDirectoryList.find(
        (dir) => dir.name === directoryName
      );
      return directory ? directory.id : null;
    },

    /* 新增 */
    /* 上传图片 */
    onUploadAddSuccess(e) {
      this.AIform.aiagent_icon = e.data.fileUrl;
    },
    /* 重置表单 */
    resetForm() {
      if (this.$refs.AIformRef) {
        this.$refs.AIformRef.resetFields();
      }
      this.AIform = {
        chat_name: "",
        modelLibrary: "ollama",
        model_type: "chat",
        model_name: "",
        knowledge_base_names: [],
        document_directories: [],
        documents: [],
        temperature: 0.7,
        max_tokens: 150,
        top_p: 1.0,
        frequency_penalty: 0.0,
        presence_penalty: 0.0,
        response_format: "",
        context_window: 2048,
        user_id: "",
        session_id: "",
        language: "en",
        timeout: 30,
        role_name: "Admin",
        role_description: "",
        role_permissions: '["回答产品问题", "处理退换货请求", "升级复杂问题"]',
        custom_variables:
          '{"custom_greeting": "很高兴为您服务！", "company_name": "ABC公司"}',
        custom_prompt:
          "使用以下上下文来回答问题。如果你不知道答案，就说你不知道，不要试图编造答案。上下文: {context} 人类: {question}AI助手: 让我根据提供的上下文来回答你的问题。{custom_greeting}",
        application_type: "",
        is_default: false,
        generate_new_api_key: true,
        aiagent_icon: "",
      };
    },
    /* 取消 */
    cancelApplication() {
      if (this.type == "view") {
        this.resetForm();
        this.$router.push({
          path: "/knowledge/chatPage/index",
        });
      } else {
        this.$confirm("确认取消？未保存的更改将会丢失。")
          .then((_) => {
            this.resetForm();
            this.$router.push({
              path: "/knowledge/chatPage/index",
            });
          })
          .catch((_) => {});
      }
    },
    handleDocumentChange(selectedValues) {
      if (selectedValues.includes("all")) {
        // 如果选择了"全部"，则清空其他选项
        this.AIform.documents = [];
      } else {
        // 如果没有选择"全部"，则限制最多选择10个文档
        if (selectedValues.length > 10) {
          this.AIform.documents = selectedValues.slice(0, 10);
          this.$message.warning("最多只能选择10个文档");
        }
      }
    },
    validateAndParseJSON(field, errorMessage) {
      try {
        return JSON.parse(this.AIform[field]);
      } catch (error) {
        this.$message.error(`${errorMessage}: ${error.message}`);
        return null;
      }
    },
    /* 新增聊天应用 */
    generateApplication() {
      this.$refs.AIformRef.validate(async (valid) => {
        if (valid) {
          try {
            // 创建一个新对象来存储转换后的数据
            const convertedForm = { ...this.AIform };
            // 处理 role_permissions
            const parsedPermissions = this.validateAndParseJSON(
              "role_permissions",
              "角色权限格式无效"
            );
            if (!parsedPermissions) return;
            convertedForm.role_permissions = parsedPermissions;

            // 处理 custom_variables
            const parsedVariables = this.validateAndParseJSON(
              "custom_variables",
              "自定义变量格式无效"
            );
            if (!parsedVariables) return;
            convertedForm.custom_variables = parsedVariables;
            // 将知识库 ID 转换为名称
            /* convertedForm.knowledge_base_names = this.safeGetNamesByIds(
              this.AIform.knowledge_base_names,
              this.kneList
            ); */

            /* // 将文档 ID 转换为名称
            convertedForm.documents = this.safeGetNamesByIds(
              this.AIform.documents,
              this.documentList
            ); */
            // 处理文档选择
            /*  if (
              convertedForm.documents.includes("all") ||
              convertedForm.documents.length === 0
            ) {
              convertedForm.documents = []; // 全选或未选择时传空数组给后台
            } else {
              convertedForm.documents = this.safeGetNamesByIds(
                convertedForm.documents,
                this.documentList
              );
            }

            // 将文档目录 ID 转换为名称，如果为空则传递 '全部'
            convertedForm.document_directories = this.safeGetNamesByIds(
              this.AIform.document_directories,
              this.directoryList
            ); */
            // 根据radio值处理文档和目录
            if (this.radio === "1") {
              // 目录模式
              // 如果选择了"全部"或未选择，则传空数组
              if (
                !this.AIform.document_directories ||
                this.AIform.document_directories === "001"
              ) {
                convertedForm.document_directories = [];
              } else {
                convertedForm.document_directories = this.safeGetNamesByIds(
                  [this.AIform.document_directories],
                  this.directoryList
                );
              }
              // 目录模式下清空文档选择
              convertedForm.documents = [];
            } else {
              // 文档模式
              // 清空目录选择
              convertedForm.document_directories = [];

              // 处理文档选择
              if (
                !this.AIform.documents.length ||
                this.AIform.documents.includes("all")
              ) {
                convertedForm.documents = [];
              } else {
                convertedForm.documents = this.safeGetNamesByIds(
                  this.AIform.documents,
                  this.documentList
                );
              }
            }
            /* if (convertedForm.document_directories.length === 0) {
              convertedForm.document_directories = ["全部"];
            } */

            console.log("Converted form:", convertedForm);

            // 使用 axios 发送 POST 请求
            const response = await axios.post(
              `${process.env.VUE_APP_BASE_API}/chatbot/configCreart/`,
              convertedForm,
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            );

            if (response.status === 200) {
              this.$message.success("应用生成成功");
              this.resetForm();
              /* this.fetchApplicationList(); */
              this.$router.push({
                path: "/knowledge/chatPage/index",
              }); //跳转到聊天应用页面
              // 可选：重定向到新应用或更新 UI
            } else {
              this.$message.error(response.data.message || "应用生成失败");
            }
          } catch (error) {
            console.error("Error generating application:", error);
            this.$message.error("应用生成失败，请稍后重试");
          }
        } else {
          this.$message.error("请填写所有必填字段");
          return false;
        }
      });
    },
    /* 数据处理方法 */
    // 安全的辅助方法：通过 ID 数组获取名称数组
    safeGetNamesByIds(ids, list) {
      if (!Array.isArray(ids)) {
        console.warn("Expected an array of ids, but received:", ids);
        return [];
      }
      return ids
        .map((id) => {
          if (id === "001") {
            return "全部";
          }
          const item = list.find((item) => item.id === id);
          return item ? item.name : "";
        })
        .filter((name) => name !== "");
    },
    /* 知识库选择监听联动 */
    handleKnowledgeBaseChange(val) {
      // 重置目录和文档选择
      this.AIform.document_directories = [];
      this.AIform.documents = [];
      this.documentList = [];
      this.bucket_id = val[0];
      // 根据选中的知识库加载目录列表
      // 这里需要调用后端 API 来获取目录列表
      this.loadDirectoryList(val);
    },
    handleDirectoryChange(val) {
      // 重置文档选择
      this.AIform.documents = [];

      // 根据选中的目录加载文档列表
      // 这里需要调用后端 API 来获取文档列表
      this.loadDocumentList(val);
    },
    async loadDirectoryList(val) {
      this.directoryList = []; // 清空现有目录列表
      let totalDocuments = 0;
      let otherFolderCount = 0;

      for (const kbId of val) {
        const typeForm = {
          page: 1,
          pageSize: 9999,
          kb_id: kbId,
        };

        try {
          const res = await selectTypeList(typeForm);
          // 假设 res.data 包含目录列表
          if (res.data) {
            // 将新的目录添加到列表中，避免重复
            this.directoryList = [
              ...new Set([...this.directoryList, ...res.data.dataList]),
            ];
            console.log(res.data.dataList);
            // 计算总文档数和其他文件夹数量
            res.data.dataList.forEach((folder) => {
              if (folder.id === "other") {
                otherFolderCount += folder.document_count || 0;
              } else {
                totalDocuments += folder.document_count || 0;
              }
            });
          }
        } catch (error) {
          console.error(
            `Error loading directory list for kb_id ${kbId}:`,
            error
          );
          // 可以在这里添加错误处理，比如显示一个错误提示
        }
      }

      // 在列表开头插入"全部"选项
      this.directoryList.unshift({
        id: "001",
        name: "全部",
        /*  document_count: totalDocuments + otherFolderCount, */
      });
    },
    /* 目录选择监听 */
    handleDirectoryChange(val) {
      // 重置文档选择
      this.AIform.documents = [];

      // 根据选中的目录加载文档列表
      // 这里需要调用后端 API 来获取文档列表
      this.loadDocumentList(val);
    },
    // 修改原有的加载文档列表方法，添加loading状态
    loadDocumentList(val) {
      this.loading = true;
      let queryForm = {
        page: 1,
        pageSize: 9999,
        bucket_id: this.bucket_id,
        doc_type_id: val === "001" ? "" : val,
      };

      getBucketContents(queryForm)
        .then((res) => {
          this.documentList = res.data.documents;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /* 获取列表 */
    init() {
      /* 模型库 { model_type: "model" }*/
      modelList().then((res) => {
        this.modelNameList = res.data.models;
      });
      /* 知识库 */
      listBuckets({ user_id: this.$store.state.user.id }).then((res) => {
        this.kneList = res.data;
        if (this.$route.query.type == "edit") {
          this.initEdit();
        }
      });
      /* 应用列表 */
      configList().then((res) => {
        this.knowledgeBases = res.data;
        console.log(res);
      });
      /* 获取应用类型 */
      application_types().then((res) => {
        if (res.status !== 200) return;
        this.appTypeList = res.data.application_types;
      });
    },
    /* 编辑 */
    // 修改 initEdit 方法
    async initEdit() {
      try {
        // 深拷贝以避免直接修改原对象
        this.editForm = JSON.parse(JSON.stringify(this.$route.query.card));

        // 确保必要的属性都被初始化
        this.editForm = {
          ...this.editForm,
          document_directories: this.editForm.document_directories || [],
          documents: this.editForm.documents || [],
          radio: "1", // 默认值
        };

        // 处理 role_permissions 和 custom_variables
        this.handleJsonFields();

        // 设置 radio 的值和处理文档选择
        if (Array.isArray(this.editForm.document_directories)) {
          if (this.editForm.document_directories.length === 0) {
            this.editForm.radio = "2";
            // 当切换到文档模式且documents为空时，设置为全选
            if (!this.editForm.documents || this.editForm.documents.length === 0) {
              this.editForm.documents = ["all"];
            }
          }
        } else {
          this.editForm.radio = "2";
          // 当切换到文档模式且documents为空时，设置为全选
          if (!this.editForm.documents || this.editForm.documents.length === 0) {
            this.editForm.documents = ["all"];
          }
        }

        // 初始化临时存储，保存原始数据
        this.editForm.tempDocuments = Array.isArray(this.editForm.documents)
          ? [...this.editForm.documents]
          : [];
        this.editForm.tempDirectories = Array.isArray(
          this.editForm.document_directories
        )
          ? [...this.editForm.document_directories]
          : [];

        // 并行加载知识库目录列表
        if (
          this.editForm.knowledge_base_names &&
          this.editForm.knowledge_base_names.length > 0
        ) {
          const directoryListPromise = this.loadEditDirectoryList(
            this.editForm.knowledge_base_names
          );
          await directoryListPromise;
        }

        // 处理目录和文档选择
        await this.handleDirectoryAndDocumentSelection();
      } catch (error) {
        console.error("Error in initEdit:", error);
        this.$message.error("初始化编辑表单时出错");
      }
    },

    async handleDirectoryAndDocumentSelection() {
      // 检查是否为["全部"]的情况
      if (
        this.editForm.document_directories.length === 1 &&
        this.editForm.document_directories[0] === "全部"
      ) {
        // 直接设置为"001"(全部)的ID，不需要查询接口
        this.editForm.document_directories = "001";

        // 如果文档为空或包含"全部"，设置为all
        if (
          !this.editForm.documents ||
          this.editForm.documents.length === 0 ||
          this.editForm.documents.includes("全部")
        ) {
          this.editForm.documents = ["all"];
        }
        return;
      }

      // 其他情况保持原有逻辑
      const dirName = this.editForm.document_directories[0];
      const dir = this.editDirectoryList.find((dir) => dir.name === dirName);

      if (!dir) {
        return;
      }

      this.editForm.document_directories = dir.id;

      // 延迟加载文档列表
      await this.$nextTick();
      await this.loadEditDocumentList(dir.id);

      // 处理文档选择
      this.handleDocumentSelection();
    },

    handleDocumentSelection() {
      if (!this.editForm.documents || this.editForm.documents.length === 0) {
        this.editForm.documents = ["all"];
      } else if (this.editForm.documents.includes("全部")) {
        this.editForm.documents = ["all"];
      } else {
        this.editForm.documents = this.editDocumentList
          .filter((doc) => this.editForm.documents.includes(doc.name))
          .map((doc) => doc.id);
      }
    },

    handleJsonFields() {
      // 处理 role_permissions
      if (this.editForm.role_permissions) {
        if (typeof this.editForm.role_permissions !== "string") {
          try {
            this.editForm.role_permissions = JSON.stringify(
              this.editForm.role_permissions
            );
          } catch (error) {
            console.error("Error stringifying role_permissions:", error);
            this.editForm.role_permissions = "";
          }
        }
      } else {
        this.editForm.role_permissions = "";
      }

      // 处理 custom_variables
      if (this.editForm.custom_variables) {
        this.editForm.custom_variables = JSON.stringify(
          this.editForm.custom_variables
        );
      } else {
        this.editForm.custom_variables = "";
      }
    },
    // 同样修改 initView 方法
    initView() {
      try {
        // 根据 card 的数据填充 viewForm
        this.viewForm = JSON.parse(JSON.stringify(this.$route.query.card));

        // 确保必要的属性都被初始化
        this.viewForm = {
          ...this.viewForm,
          document_directories: this.viewForm.document_directories || [],
          documents: this.viewForm.documents || [],
          radio: "1", // 默认值
        };

        // 设置 radio 的值
        if (Array.isArray(this.viewForm.document_directories)) {
          if (this.viewForm.document_directories.length === 0) {
            this.viewForm.radio = "2";
          }
        } else {
          this.viewForm.radio = "2";
        }

        if (Array.isArray(this.viewForm.documents)) {
          if (
            this.viewForm.documents.length === 0 &&
            this.viewForm.radio !== "2"
          ) {
            this.viewForm.radio = "1";
          }
        }

        // 处理 knowledge_base_names
        if (
          this.viewForm.knowledge_base_names &&
          Array.isArray(this.viewForm.knowledge_base_names)
        ) {
          this.viewForm.knowledge_base_names =
            this.viewForm.knowledge_base_names.map((name) => {
              const kb = this.kneList.find((kb) => kb.name === name);
              return kb ? kb.id : name;
            });
        } else {
          this.viewForm.knowledge_base_names = [];
        }

        // 处理 role_permissions 和 custom_variables
        if (this.viewForm.role_permissions) {
          if (typeof this.viewForm.role_permissions !== "string") {
            try {
              this.viewForm.role_permissions = JSON.stringify(
                this.viewForm.role_permissions
              );
            } catch (error) {
              console.error("Error stringifying role_permissions:", error);
              this.viewForm.role_permissions = "";
            }
          }
        } else {
          this.viewForm.role_permissions = "";
        }

        if (this.viewForm.custom_variables) {
          this.viewForm.custom_variables = JSON.stringify(
            this.viewForm.custom_variables
          );
        } else {
          this.viewForm.custom_variables = "";
        }

        // 处理文档选择
        if (
          !this.viewForm.documents ||
          !Array.isArray(this.viewForm.documents) ||
          this.viewForm.documents.length === 0 ||
          this.viewForm.documents.includes("全部")
        ) {
          this.viewForm.documents = ["全部"];
        }

        // 加载知识库对应的目录列表
        if (
          this.viewForm.knowledge_base_names &&
          this.viewForm.knowledge_base_names.length > 0
        ) {
          this.loadEditDirectoryList(this.viewForm.knowledge_base_names);
        }
      } catch (error) {
        console.error("Error in initView:", error);
        this.$message.error("初始化查看表单时出错");
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.header {
  margin-left: 20px;
  h2 {
    margin-bottom: 0px;
  }
}
.center {
  margin: 10px;
  ::v-deep .el-form--inline .el-form-item {
    display: block;
  }
  ::v-deep .el-input-number--medium {
    width: 150px;
  }
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin: 0 100px 20px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.hint {
  font-size: 12px;
  color: #c0c4cc;
}
</style>