<!--左侧操作界面  -->
<template>
  <el-form label-position="left" ref="form" label-width="120px" :model="form" :size="defaultFormItemSize" style="padding:20px">
    <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-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="form.knowledgeConfige.score_threshold" :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 } from '@/api/gptController.js';
export default {
  data () {
    return {
      modelList: [],
      activeModelList: [],
      loading: undefined,
      temperature: 70,
      knowledgeList: [],
      knowledgeScoreThreshold: 50,

      form: {
        pattern: 'LLM 对话', // 对话模式
        model_name: undefined, // 模型名称
        temperature: 0.7,
        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()
  },

  methods: {
    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);
    }
  }
}

</script>
<style >
.myLoading .el-loading-spinner i{
  font-size: 24px !important;
}
</style>
