<template>
  <el-dialog
    :title="$t('views.chatLog.selectKnowledge')"
    v-model="dialogVisible"
    width="600"
    class="select-knowledge-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <template #header="{ titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">{{ '文档迁移到' }}</h4>
    </template>
    <el-form
      class="p-24"
      ref="FormRef"
      :model="form"
      label-position="top"
      require-asterisk-position="right"
      v-loading="loading"
    >
      <el-form-item :label="$t('views.chatLog.selectKnowledge')" required>
        <el-tree-select
          v-model="form.selectKnowledge"
          :data="knowledgeList"
          :props="defaultProps"
          node-key="id"
        >
          <template #default="{ data }">
            <div class="flex align-center">
              <KnowledgeIcon class="mr-12" :size="20" v-if="data.resource_type" :type="data.type" />
              <el-avatar v-else class="mr-12" shape="square" :size="20" style="background: none">
                <img
                  src="@/assets/knowledge/icon_file-folder_colorful.svg"
                  style="width: 100%"
                  alt=""
                />
              </el-avatar>

              {{ data.name }}
            </div>
          </template>
        </el-tree-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
        <el-button
          type="primary"
          @click="submitHandle"
          :disabled="!form.selectKnowledge || loading"
        >
          {{ $t('common.confirm') }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import documentApi from '@/api/shared/document'

import useStore from '@/stores/modules-shared-system'
const { knowledge } = useStore()
const route = useRoute()
const {
  params: { id }, // id为knowledgeID
} = route as any

const emit = defineEmits(['refresh'])

const loading = ref<boolean>(false)

const dialogVisible = ref<boolean>(false)
const knowledgeList = ref<any>([])
const documentList = ref<any>([])

const defaultProps = {
  children: 'children',
  label: 'name',
  disabled: (data: any, node: any) => {
    console.log(data, node)
    return data.id === id || (node?.isLeaf && !data.resource_type)
  },
}

const form = ref<any>({
  selectKnowledge: '',
})

watch(dialogVisible, (bool) => {
  if (!bool) {
    form.value.selectKnowledge = ''
    knowledgeList.value = []
    documentList.value = []
  }
})

const open = (list: any) => {
  documentList.value = list
  getKnowledge()
  dialogVisible.value = true
}
const submitHandle = () => {
  documentApi
    .putMigrateMulDocument(id, form.value.selectKnowledge, documentList.value, loading)
    .then((res) => {
      emit('refresh')
      dialogVisible.value = false
    })
}

function getKnowledge() {
  knowledge.asyncGetTreeRootKnowledge(loading).then((res: any) => {
    knowledgeList.value = res || []
    console.log(knowledgeList.value)
  })
}

defineExpose({ open })
</script>
<style lang="scss">
.select-knowledge-dialog {
  padding: 0;
  .el-dialog__header {
    padding: 24px 24px 0 24px;
  }
  .el-dialog__body {
    padding: 8px !important;
  }
  .el-dialog__footer {
    padding: 0 24px 24px;
  }
}
</style>
