<script setup lang="ts">
/* eslint-disable vue/no-mutating-props */
import type {AgentKnowledgeBinding, AgentOption} from '../types';

import {ElButton, ElForm, ElFormItem, ElInputNumber, ElOption, ElSelect,} from 'element-plus';

const props = defineProps<{
  binding: AgentKnowledgeBinding;
  knowledges: AgentOption[];
}>();

const retrievalModeOptions = [
  { label: '混合', value: 'HYBRID' },
  { label: '语义', value: 'VECTOR' },
  { label: '关键词', value: 'KEYWORD' },
];

const emit = defineEmits<{
  change: [];
  remove: [];
}>();

function handleKnowledgeChange(value: string) {
  const option = props.knowledges.find(
    (item) => String(item.value) === String(value),
  );
  props.binding.resourceSummary = {
    ...(option?.raw || {}),
    label: option?.label,
    name: option?.raw?.name || option?.label,
  };
  emit('change');
}
</script>

<template>
  <ElForm label-position="top" class="agent-form">
    <ElFormItem label="知识库" required>
      <ElSelect
        v-model="binding.knowledgeId"
        filterable
        placeholder="选择知识库"
        @change="handleKnowledgeChange"
      >
        <ElOption
          v-for="item in knowledges"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="检索方式">
      <ElSelect
        v-model="binding.retrievalMode"
        placeholder="选择检索方式"
        @change="emit('change')"
      >
        <ElOption
          v-for="item in retrievalModeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="召回数量">
      <ElInputNumber
        v-model="binding.optionsJson!.limit"
        :min="1"
        :max="20"
        controls-position="right"
        @change="emit('change')"
      />
    </ElFormItem>
    <ElFormItem label="相似度阈值">
      <ElInputNumber
        v-model="binding.optionsJson!.scoreThreshold"
        :min="0"
        :max="1"
        :step="0.05"
        controls-position="right"
        @change="emit('change')"
      />
    </ElFormItem>
    <ElButton
      class="agent-form__danger"
      type="danger"
      plain
      @click="emit('remove')"
    >
      删除节点
    </ElButton>
  </ElForm>
</template>

<style scoped>
.agent-form {
  padding: 16px;
}

.agent-form :deep(.el-select),
.agent-form :deep(.el-input-number) {
  width: 100%;
}

.agent-form__danger {
  width: 100%;
  margin-top: 8px;
}
</style>
