<template>
  <LayoutContainer class="knowledge-manage">
    <template #left>
      <h4 class="p-16 pb-0">{{ $t('views.knowledge.title') }}</h4>
      <folder-tree
        :data="folderList"
        :currentNodeKey="currentFolder?.id"
        @handleNodeClick="folderClickHandel"
        class="p-8"
      />
    </template>
    <ContentContainer :header="currentFolder?.name">
      <template #search>
        <div class="flex">
          <div class="flex-between complex-search">
            <el-select
              class="complex-search__left"
              v-model="search_type"
              style="width: 120px"
              @change="search_type_change"
            >
              <el-option :label="$t('common.creator')" value="create_user" />

              <el-option :label="$t('common.name')" value="name" />
            </el-select>
            <el-input
              v-if="search_type === 'name'"
              v-model="search_form.name"
              @change="getList"
              :placeholder="$t('common.searchBar.placeholder')"
              style="width: 220px"
              clearable
            />
            <el-select
              v-else-if="search_type === 'create_user'"
              v-model="search_form.create_user"
              @change="getList"
              clearable
              style="width: 220px"
            >
              <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
            </el-select>
          </div>
          <el-button class="ml-16" type="primary"> {{ $t('common.create') }}</el-button>
        </div>
      </template>
      <div>
        <el-row v-if="datasetList.length > 0 || datasetFolderList.length > 0" :gutter="15">
          <template v-for="(item, index) in datasetFolderList" :key="index">
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
              <CardBox
                :title="item.name"
                :description="item.desc || $t('common.noData')"
                class="cursor"
              >
                <template #icon>
                  <el-avatar shape="square" :size="32" style="background: none">
                    <AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
                  </el-avatar>
                </template>
                <template #subTitle>
                  <el-text class="color-secondary lighter" size="small">
                    {{ $t('common.creator') }}: {{ item.username }}
                  </el-text>
                </template>
              </CardBox>
            </el-col>
          </template>
          <template v-for="(item, index) in datasetList" :key="index">
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
              <CardBox
                :title="item.name"
                :description="item.desc"
                class="cursor"
                @click="router.push({ path: `/knowledge/${item.id}/document` })"
              >
                <template #icon>
                  <el-avatar
                    v-if="item.type === '1'"
                    class="avatar-purple"
                    shape="square"
                    :size="32"
                  >
                    <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
                  </el-avatar>
                  <el-avatar
                    v-else-if="item.type === '2'"
                    class="avatar-purple"
                    shape="square"
                    :size="32"
                    style="background: none"
                  >
                    <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt="" />
                  </el-avatar>
                  <el-avatar v-else class="avatar-blue" shape="square" :size="32">
                    <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
                  </el-avatar>
                </template>
                <template #subTitle>
                  <el-text class="color-secondary" size="small">
                    <auto-tooltip :content="item.username">
                      {{ $t('common.creator') }}: {{ item.username }}
                    </auto-tooltip>
                  </el-text>
                </template>

                <template #footer>
                  <div class="footer-content flex-between">
                    <div>
                      <span class="bold mr-4">{{ item?.document_count || 0 }}</span>
                      <span class="color-secondary">{{
                        $t('views.knowledge.document_count')
                      }}</span>
                      <el-divider direction="vertical" />
                      <span class="bold mr-4">{{ numberFormat(item?.char_length) || 0 }}</span>
                      <span class="color-secondary">{{ $t('common.character') }}</span
                      ><el-divider direction="vertical" />
                      <span class="bold mr-4">{{ item?.application_mapping_count || 0 }}</span>
                      <span class="color-secondary">{{
                        $t('views.knowledge.relatedApp_count')
                      }}</span>
                    </div>
                  </div>
                </template>
                <template #mouseEnter>
                  <div @click.stop>
                    <el-dropdown trigger="click">
                      <el-button text @click.stop>
                        <el-icon><MoreFilled /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            icon="Refresh"
                            @click.stop="syncDataset(item)"
                            v-if="item.type === 1"
                            >{{ $t('views.knowledge.setting.sync') }}</el-dropdown-item
                          >
                          <el-dropdown-item @click.stop="reEmbeddingDataset(item)">
                            <AppIcon iconName="app-vectorization"></AppIcon>
                            {{ $t('views.knowledge.setting.vectorization') }}
                          </el-dropdown-item>
                          <!--

                          <el-dropdown-item
                            icon="Connection"
                            @click.stop="openGenerateDialog(item)"
                            >{{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
                          >
                          <el-dropdown-item
                            icon="Setting"
                            @click.stop="router.push({ path: `/dataset/${item.id}/setting` })"
                          >
                            {{ $t('common.setting') }}</el-dropdown-item
                          >
                          <el-dropdown-item @click.stop="export_dataset(item)">
                            <AppIcon iconName="app-export"></AppIcon
                            >{{ $t('views.document.setting.export') }} Excel</el-dropdown-item
                          >
                          <el-dropdown-item @click.stop="export_zip_dataset(item)">
                            <AppIcon iconName="app-export"></AppIcon
                            >{{ $t('views.document.setting.export') }} ZIP</el-dropdown-item
                          >
                          <el-dropdown-item icon="Delete" @click.stop="deleteDataset(item)">{{
                            $t('common.delete')
                          }}</el-dropdown-item> -->
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </template>
              </CardBox>
            </el-col>
          </template>
        </el-row>
        <el-empty :description="$t('common.noData')" v-else />
      </div>
    </ContentContainer>
  </LayoutContainer>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue'
import KnowledgeApi from '@/api/knowledge/knowledge'
import { MsgSuccess, MsgConfirm } from '@/utils/message'
import useStore from '@/stores'
import { numberFormat } from '@/utils/common'
import { t } from '@/locales'
import { useRouter } from 'vue-router'

const router = useRouter()
const { folder } = useStore()

const loading = ref(false)

const search_type = ref('name')
const search_form = ref<{
  name: string
  create_user: string
}>({
  name: '',
  create_user: '',
})

const user_options = ref<any[]>([])

const paginationConfig = reactive({
  current_page: 1,
  page_size: 30,
  total: 0,
})

const folderList = ref<any[]>([])
const datasetList = ref<any[]>([])
const datasetFolderList = ref<any[]>([])
const currentFolder = ref<any>({})

function reEmbeddingDataset(row: any) {
  KnowledgeApi.putReEmbeddingDataset('default', row.id).then(() => {
    MsgSuccess(t('common.submitSuccess'))
  })
}

const SyncWebDialogRef = ref()
function syncDataset(row: any) {
  SyncWebDialogRef.value.open(row.id)
}

const search_type_change = () => {
  search_form.value = { name: '', create_user: '' }
}

function getList() {
  const params = {
    folder_id: currentFolder.value?.id || 'root',
  }
  KnowledgeApi.getKnowledgeList('default', paginationConfig, params, loading).then((res) => {
    datasetFolderList.value = res.data?.folders
    paginationConfig.total = res.data.total
    datasetList.value = [...datasetList.value, ...res.data.knowledge.records]
  })
}

function getFolder() {
  const params = {}
  folder.asynGetFolder('default', 'KNOWLEDGE', params, loading).then((res: any) => {
    folderList.value = res.data
    currentFolder.value = res.data?.[0] || {}
    getList()
  })
}

function folderClickHandel(row: any) {
  currentFolder.value = row
  datasetFolderList.value = []
  getList()
}

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

<style lang="scss" scoped></style>
