

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { KnowledgeApi  } from '@/api/new-ai/knowledge'
import { useAppStore } from '@/views/ai/app/store'

const dialogVisible = ref(false)
const knowledges = ref()
const appStore = useAppStore()

async function show() {
  knowledges.value = await KnowledgeApi.getKnowledgeList({})
  await nextTick()
  dialogVisible.value = true
}

function onAdd(item) {
  appStore.addKnowledge(item)
  ElMessage.success('关联成功')
}

function onRemove(item) {
  appStore.removeKnowledge(item)
  ElMessage.success('移除成功')
}

defineExpose({ show })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="关联知识库"
    width="40%"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-alert
      class="w-full mb-2 mt-2"
      title="注意：只能选择相同纬度向量库配置（以及相同向量模型）的知识库"
      type="info"
      :closable="false"
      show-icon
    />
    <el-scrollbar height="400px">
      <el-menu>
        <el-menu-item v-for="item in knowledges" :key="item.id" class="!px-1">
          <div class="flex items-center justify-between w-full">
            <div class="flex gap-1 items-center">
              <el-icon class="text-3xl"><Document /></el-icon>
              <div>{{ item.name }}</div>

              <el-divider v-if="item.embedModel != null" direction="vertical" />
              <el-tag v-if="item.embedModel != null" type="success" size="small" round>
                <div class="flex gap-1 px-1.5">
                  <el-icon><Monitor /></el-icon>
                  <span>{{ item.embedModel.name }}</span>
                </div>
              </el-tag>

              <el-divider v-if="item.embedStore != null" direction="vertical" class="!mx-1" />
              <el-tag v-if="item.embedStore != null" type="primary" size="small" round>
                <div class="flex gap-1 px-1.5">
                  <el-icon><DataLine /></el-icon>
                  <span>{{ item.embedStore.name }}</span>
                </div>
              </el-tag>
            </div>
            <el-button
              v-if="!appStore.knowledgeIds.includes(item.id)"
              class="rounded-2xl py-0 px-6"
              type="info"
              plain
              size="small"
              @click="onAdd(item)"
            >
              关联
            </el-button>
            <el-button
              v-else
              class="rounded-2xl py-0 px-6"
              type="danger"
              plain
              size="small"
              @click="onRemove(item)"
            >
              移除
            </el-button>
          </div>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-dialog>
</template>

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