

<script lang="ts" setup>
import { ref } from 'vue'
import { Document } from '@element-plus/icons-vue'
import { EmbeddingApi } from '@/api/new-ai/embedding'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
const { embeddingSearch, embeddingText } = EmbeddingApi
const route = useRoute()
const content = ref('')
const loading = ref(false)
const list = ref<any>([])

async function onSearch(flag = false) {
  if (content.value === '' && flag) {
    list.value = []
    ElMessage.warning('请先输入搜索内容')
    return
  }
  loading.value = true
  try {
    list.value = await embeddingSearch({
      content: content.value,
      knowledgeId: route.params.id
    })
    console.log(list.value)
  } catch (error) {
  } finally {
    loading.value = false
  }
}
onMounted(() => {
  onSearch()
})
</script>

<template>
  <div class="h-full w-full">
    <div class="flex  gap-10px my-10px flex-wrap">
      <el-card class="w-[calc(25%-10px)]">
        <el-button class="w-full mb-10px" :loading="loading" type="primary" @click="onSearch(true)">向量搜索</el-button>
        <el-input
          v-model="content"
          placeholder="请输入关键词查询向量文本"
          :rows="10"
          type="textarea"
        />
      </el-card>
      <template v-if="list.length > 0">
        <el-card
          v-for="item in list"
          :key="item.index"
          class="rounded-lg cursor-pointer w-[calc(25%-10px)] bg-[var(--el-bg-color-pages)]"
          shadow="hover"
        >
          <template #header>
            <div class="flex items-center gap-1">
              <el-icon>
                <Document />
              </el-icon>
              <el-text class="truncate">{{ item.docsName }}</el-text>
            </div>
          </template>
          <el-scrollbar height="200px" class="text-14px">
            {{ item.text }}
          </el-scrollbar>
        </el-card>
      </template>
      <el-empty v-if="list.length === 0" class="my-4 flex-1" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
//a{
//  color: var(--el-bg-color-page);
//}
</style>
