<!--左侧操作界面  -->
<template>
  <el-form label-position="left" ref="form" label-width="120px" :model="form" :size="defaultFormItemSize"
    style="padding:20px;width:400px">
    <el-form-item label="请选择对话模式：">
      <el-select v-model="form.pattern" placeholder="请选择">
        <el-option v-for="item in ModeOfSpeaking.getList()" :key="item.id" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="选择LLM模型：">
      <el-cascader v-model="form.model_name" ref="modelCascader" :options="modelList"
        :props='{ label: "name", value: "name", emitPath: false }' @change="changeModel"></el-cascader>
    </el-form-item>
    <el-form-item label="Temperature：">
      <el-slider v-model="temperature" :format-tooltip="formatTooltip"
        @change="form.temperature = temperature / 100"></el-slider>
    </el-form-item>
    <el-form-item label="历史对话轮数：">
      <el-input-number v-model="form.heistoryRotate" :min="0" :max="10"></el-input-number>
    </el-form-item>
    <el-form-item label="提示词：">
      <el-select v-model="promptTemplate" filterable placeholder="请选择提示词" value-key="templateId"
        @change="templateControllerChange" clearable>
        <el-option v-for="item in templateControllerList" :key="item.value" :label="item.label" :value="item">
        </el-option>
      </el-select>
      <el-switch @change="changePromptTemplate" style="margin-left: 10px;" v-model="isPromptTemplate"
        active-color="#13ce66" inactive-color="#ff4949">
      </el-switch>
    </el-form-item>
    <el-form-item label-width="0px" v-if="form.prompt_template">
      <div style="background-color: #f3f3f3;
    padding: 10px;
    border-radius: 10px;">
        {{ form.prompt_template }}
      </div>
    </el-form-item>

    <el-form-item label-width="0px" v-if="form.pattern == '知识库问答'">
      <el-collapse value="1">
        <el-collapse-item name="1">
          <template slot="title">知识库配置</template>
          <el-form-item label="请选择知识库：" style="margin-bottom:30px">
            <el-select ref="knowledgeSelect" v-model="form.knowledgeConfige.knowledge_base_name" placeholder="请选择"
              @change="changeKnowledge">
              <el-option v-for="item in knowledgeList" :key="item.knowledgeId" :label="item.knowledgeName"
                :value="item.knowledgeName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="匹配知识条数：" style="margin-bottom:30px">
            <el-input-number v-model="form.knowledgeConfige.top_k" :min="1" :max="20"></el-input-number>
          </el-form-item>
          <el-form-item label="知识匹配分数阈值：">
            <el-slider v-model="knowledgeScoreThreshold" :format-tooltip="formatTooltip"
              @change="form.knowledgeConfige.score_threshold = knowledgeScoreThreshold / 100"></el-slider>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form-item>
    <el-form-item label-width="0px" v-if="form.pattern == '搜索引擎问答'">
      <el-collapse value="1">
        <el-collapse-item name="1">
          <template slot="title">搜索引擎配置</template>
          <el-form-item label="选择搜索引擎：" style="margin-bottom:30px">
            <el-select ref="searchSelect" v-model="form.searchConfige.search_engine_name" placeholder="请选择"
              @change="changeSe">
              <el-option v-for="item in [{ label: 'bing', value: 'bing' }, { label: 'duckduckgo', value: 'duckduckgo' }]"
                :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="匹配搜索结果条数：">
            <el-input-number v-model="form.searchConfige.top_k" :min="1" :max="20"></el-input-number>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form-item>

  </el-form>
</template>

<script>
import { KnowledgeManage, MyModel, ModelVersion, TemplateController } from '@/api/gptController.js';
import promptWordTemplate from '../promptWordTemplate';
export default {
  data () {
    return {
      isPromptTemplate: true,
      promptTemplate: '',
      templateControllerList: [],
      modelList: [],
      activeModelList: [],
      loading: undefined,
      temperature: 70,
      knowledgeList: [],
      knowledgeScoreThreshold: 50,

      form: {
        pattern: 'LLM 对话', // 对话模式
        model_name: undefined, // 模型名称
        temperature: 0.7,
        prompt_template: '',
        heistoryRotate: 10, // 历史对话轮数
        knowledgeConfige: {// 知识库配置
          knowledge_base_name: '',
          top_k: 1,
          score_threshold: 0.5
        },
        searchConfige: {// 搜索引擎配置
          search_engine_name: 'bing',
          top_k: 1
        }
      }
    };
  },

  components: {},

  computed: {

  },
  watch: {
    form: {
      handler (newVal, oldVal) {
        this.$emit('chatForm', this.form)
      },
      deep: true, // 是否深度监听
      immediate: true // 是否在组件创建时立即执行回调函数
    }

  },
  mounted () {
    this.getKnowledgeList()
    this.getModelList()
    this.getTemplateControllerList()
  },

  methods: {
    getTemplateControllerList () {
      TemplateController.listForTree(this, {}).then(res => {
        this.templateControllerList = res.data.map((item) => {
          return {
            templateId: item.templateId,
            label: item.templateName,
            value: item.templateContent,
            parameterFormat: item.parameterFormat
          }
        })
      }).catch(e => {
        console.log(e);
      });
    },
    getModelList () {
      MyModel.listForTree(this, {}).then(res => {
        this.modelList = res.data.map((item) => {
          return { id: item.modelId, name: item.modelName, children: item.modelVersionList === [] ? [] : item.modelVersionList.map((item2) => { return { id: item2.versionId, name: item2.versionName } }) }
        })
        this.getActiveModelList()
      }).catch(e => {
        console.log(e);
      });
    },
    getKnowledgeList () {
      let params = {}
      KnowledgeManage.listForTree(this, params).then(res => {
        this.knowledgeList = res.data
        console.log(res.data);
      }).catch(e => {
        console.log(e);
      });
    },
    getActiveModelList () { // 获取当前挂载上的模型列表
      let params = {}
      ModelVersion.listModels(this, params).then(res => {
        this.activeModelList = res.data
        if (this.activeModelList.length === 0) {
          this.form.model_name = this.modelList[0].children[0].name
          this.switchModel(this.modelList[0].children[0].id)
        } else {
          this.form.model_name = this.activeModelList[0]
        }
      }).catch(e => {
        console.log(e);
      });
    },
    openLoading (text) {
      this.loading = this.$loading({
        lock: true,
        text: text,
        customClass: 'myLoading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.9)'
      });

      // loading.close();
    },
    formatTooltip (val) {
      return val / 100;
    },
    switchModel (versionId) { // 切换模型
      this.openLoading('LLM模型加载中')
      ModelVersion.change(this, { versionId: versionId }).then(res => {
        console.log(res);
        this.loading.close();
      }).catch(e => {
        this.loading.close();
        console.log(e);
      });
    },
    changeModel (data) { // 修改模型
      // this.openLoading('LLM模型加载中')
      let id = this.$refs.modelCascader.getCheckedNodes()[0].data.id
      this.switchModel(id)
    },
    changeKnowledge (dtat) { // 修改知识库
      // this.openLoading('知识库加载中')
      // console.log(this.$refs.knowledgeSelect);
    },
    changeSe (dtat) { // 修改模型引擎
      // this.openLoading('模型引擎加载中')
      // console.log(this.$refs.searchSelect);
    },
    templateControllerChange (data) {
      if (!data) {
        this.form.prompt_template = ''
        return
      }
      this.$dialog.show(data.label, promptWordTemplate, {
        area: ['50%', '40%']
      }, { data: data }).then(res => {
        this.form.prompt_template = res
      }).catch(e => {
        this.promptTemplate = undefined
      });
    },
    changePromptTemplate () {
      console.log(1, this.$bus);
      this.$bus.$emit('isPromptTemplate', this.isPromptTemplate);
    }
  }
}

</script>
<style >
.myLoading .el-loading-spinner i {
  font-size: 24px !important;
}
.el-form-item__content{
display: flex;
flex-direction: row;
    align-items: center;

}
</style>
