<template>
	<el-drawer v-model="visible" title="召回测试" size="50%">
		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="auto" v-loading="loading">
			<el-row>
				<el-col :span="12" class="mb20">
					<el-form-item label="知识库名称">
						<el-input :placeholder="dataset?.name" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12" class="mb20">
					<el-form-item label="召回数量" prop="topK">
						<el-input-number v-model="form.topK" :min="1" :max="10" :step="1" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" class="mb20">
					<el-form-item label="是否全文检索" prop="fullTextSearch">
						<el-radio-group v-model="form.fullTextSearch">
							<el-radio v-for="(item, index) in yes_no_type" :key="index" :label="item.value" border>{{ item.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12" class="mb20">
					<el-form-item label="是否重排" prop="reRanking">
						<el-radio-group v-model="form.reRanking">
							<el-radio v-for="(item, index) in yes_no_type" :key="index" :label="item.value" border>{{ item.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" class="mb20">
					<el-form-item label="问题" prop="content">
						<el-input v-model="form.content" type="textarea" placeholder="请输入需要召回的问题内容" maxlength="1024" show-word-limit rows="6" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-divider content-position="center">召回结果</el-divider>

			<el-table v-if="tableData.length > 0" :data="tableData" border style="width: 100%">
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="score" label="相似度" width="120" />
				<el-table-column prop="content" label="切片" :show-overflow-tooltip="true" />
				<el-table-column prop="metadata" label="元数据" width="200" :show-overflow-tooltip="true" />
			</el-table>

			<el-empty v-else description="暂无数据" />
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="handleTest" :disabled="loading || !form.content">测试</el-button>
			</span>
		</template>
	</el-drawer>
</template>

<script setup lang="ts" name="AiDatasetRecall">
import { useMessage } from '/@/hooks/message';
import { fetchRecall } from '/@/api/knowledge/aiSlice';
import { useDict } from '/@/hooks/dict';

// 定义接口
interface RecallParams {
	datasetId: string;
	content: string;
	topK: number;
	fullTextSearch: boolean;
	reRanking: boolean;
}

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const tableData = ref([]);
const dataset = ref<any>(null);

// 定义字典
const { yes_no_type } = useDict('yes_no_type');

// 定义表单变量
interface FormState {
	datasetId: string;
	content: string;
	topK: number;
	fullTextSearch: string;
	reRanking: string;
}

const form = reactive<FormState>({
	datasetId: '',
	content: '',
	topK: 5,
	fullTextSearch: '1', // 是否全文检索
	reRanking: '1', // 是否重排
});

// 表单校验规则
const dataRules = ref({
	content: [{ required: true, message: '请输入问题内容', trigger: 'blur' }],
});

// 打开抽屉
const openDialog = (datasetVal: any) => {
	visible.value = true;
	form.datasetId = datasetVal.id;
	dataset.value = datasetVal;
	resetForm();
};

// 重置表单
const resetForm = () => {
	form.content = '';
	tableData.value = [];
};

// 测试召回
const handleTest = async () => {
	if (!form.content) {
		useMessage().warning('请输入问题内容');
		return;
	}

	loading.value = true;
	try {
		const { data } = await fetchRecall({
			datasetId: form.datasetId,
			content: form.content,
			topK: form.topK,
			fullTextSearch: form.fullTextSearch === '1',
			reRanking: form.reRanking === '1',
		} as RecallParams);

		if (data) {
			tableData.value = data;
		} else {
			tableData.value = [];
			useMessage().warning('未查询到数据');
		}
	} catch (error: any) {
		useMessage().error(error.msg || '操作失败');
		tableData.value = [];
	} finally {
		loading.value = false;
	}
};

// 暴露方法
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped>
:deep(.el-drawer__body) {
	padding: 20px;
	overflow: auto;
}
</style>
