<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {CopyDocument, UploadFilled, Files, Document, Search} from '@element-plus/icons-vue'
import DataCut from "@/views/knowledge/dataset-form/components/data-cut.vue";
import DataImport from "@/views/knowledge/dataset-form/components/data-import.vue";
import DataDocument from "@/views/knowledge/dataset-form/components/data-document.vue";
import DataEmbedding from "@/views/knowledge/dataset-form/components/data-embedding.vue";
import {KnowledgeApi} from '@/api/new-ai/knowledge'
import {ElMessage} from 'element-plus'
interface Knowledge {
  id: string
  embedStore?: {
    id: string
    name: string
  }
  embedModel?: {
    id: string
    name: string
  }
}
const route = useRoute()
const router = useRouter()
const active = ref('1')
const loading = ref(false)
const knowledgeData = ref<Knowledge>({
  id: '',
})

const tabs = ref([
  {
    label: '数据导入',
    name: '1',
    icon: UploadFilled,
    component: DataImport
  },
  {
    label: '文档管理',
    name: '2',
    icon: CopyDocument,
    component: DataDocument
  },
  {
    label: '切片管理',
    name: '3',
    icon: Files,
    component: DataCut
  },
  {
    label: '向量搜索',
    name: '4',
    icon: Search,
    component: DataEmbedding
  }
])

const loadKnowledge = async () => {
  const id = route.params.id as string
  console.log(id)
  if (id) {
    try {
      loading.value = true;
      const res = await KnowledgeApi.getKnowledge(id).finally(() => loading.value = false)
      knowledgeData.value = res
    } catch (error) {
      console.error('Failed to load knowledge:', error)
      ElMessage.error('加载知识库失败')
    }
  }
}

onMounted(() => {
  loadKnowledge()
})
</script>

<template>
  <div class="children flex" v-loading="loading">
    <div class="flex flex-col mr-30px w-350px bg-white pt-10px">
      <el-button
        class="w-full mb-10px" plain type="primary"
        @click="router.push({ path: '/ai/console/knowledge' })">知识库列表
      </el-button>
      <el-scrollbar class="flex-1 ">
        <div class="py-20px flex items-center border-b-solid border-gray border-1 mb-10px  px-10px">
          <div
            class="icon-bg bg-[var(--el-color-primary-light-7)] w-40px lh-40px text-center mr-10px">
            <el-icon class="font-bold">
              <Document/>
            </el-icon>
          </div>
          <h3>本地测试</h3>
        </div>
        <el-form label-position="top" class=" px-10px">
          <el-form-item label="知识库ID">
            <el-input v-model="knowledgeData.id" readonly />
          </el-form-item>
          <el-form-item label="关联向量数据库">
            <el-input v-model="knowledgeData.embedStore.name" readonly v-if="knowledgeData.embedStore"/>
            <el-text type="danger" v-else>未关联</el-text>
          </el-form-item>
          <el-form-item label="关联向量化模型">
            <el-input v-model="knowledgeData.embedModel.name" readonly v-if="knowledgeData.embedModel"/>
            <el-text type="danger" v-else>未关联</el-text>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <div class="flex-1 bg-white ">
      <el-tabs v-model="active" class="h-full">
        <el-tab-pane class="h-full" v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
          <template #label>
            <div class="flex items-center">
              <el-icon class=" mr-5px">
                <component :is="item.icon" />
              </el-icon>
              <span>{{item.label}}</span>
            </div>
          </template>
          <el-scrollbar class="inner overflow-y-auto p-10px" v-if="active === item.name">
            <component :is="item.component" />
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped>
.children {
  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
}

.icon-bg {
  border-radius: 8px;
}

:deep(.el-tabs__nav) {
  width: 100%;
}

:deep(.el-tabs__item) {
  padding: 15px !important;
  text-align: left;
  width: 100%;
}
</style>
