<script lang="ts" setup>
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";
const Route = useRoute()
const Router = useRouter()
const active = ref('1')
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
  }
])
</script>

<template>
  <div class="children flex">
    <div class="flex flex-col mr-30px w-350px">
      <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">
          <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">
          <el-form-item label="知识库ID">
            <el-input />
          </el-form-item>
          <el-form-item label="关联向量数据库">
            <el-input />
          </el-form-item>
          <el-form-item label="关联向量化模型">
            <el-input />
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <div class="flex-1">
      <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 h-full overflow-y-auto">
            <component :is="item.component" />
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.children {
  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 3)) !important;
  box-sizing: border-box;

  & > div {
    height: 100%;
    background-color: #ffffff;
    padding: 20px;
    box-sizing: border-box;
  }
}
:deep(.el-scrollbar__view) {
  height: 100%;
}
</style>
