<!--
  - Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
  -
  - Licensed under the GNU Affero General Public License, Version 3 (the "License");
  - you may not use this file except in compliance with the License.
  - You may obtain a copy of the License at
  -
  -     https://www.gnu.org/licenses/agpl-3.0.html
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -->

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { DocsApi } from '@/api/new-ai/docs'
import { ElMessage } from 'element-plus'
import { FormSchema } from '@/types/form'
import { isNullOrWhitespace } from '@/utils/is'
import { useForm } from '@/hooks/web/useForm'
import { useRoute } from 'vue-router'
const route = useRoute()
const emit = defineEmits(['reload'])
const showModal = ref(false)
const loading = ref(false)
const { methods, elFormRef, register } = useForm()
const formRef = ref()
const editFlag = ref(false)
const formSchema = ref<FormSchema[]>([
  {
    label: '文档名称',
    field: 'name',
    component: 'Input',
    componentProps: {
      placeholder: '请输入文档名称'
    },
    formItemProps: {
      rules: [{ required: true, message: '请输入文档名称', trigger: ['blur'] }]
    }
  },
  {
    label: '文档内容',
    field: 'content',
    component: 'Input',
    componentProps: {
      placeholder: '请输入文档内容',
      type: 'textarea',
      autosize: {
        minRows: 10,
        maxRows: 20
      }
    },
    formItemProps: {
      rules: [{ required: true, message: '请输入文档内容', trigger: ['blur'] }]
    }
  }
])

async function show(knowledgeId: string, id?: string) {
  showModal.value = true
  await nextTick()
  if (id) {
    editFlag.value = true
    const res = await DocsApi.getDocsById(id)
    methods.setValues(res)
  }
}

async function handleSubmit() {
  await elFormRef.value?.validate()
  const formData =await methods.getFormData() as Record<string, any>
  console.log(formData)
  formData.knowledgeId = route.params.id as string
  if (!formData.name) {
    ElMessage.error('请完善表单')
    return
  }

  try {
    if (isNullOrWhitespace(formData.id)) {
      await DocsApi.addDocs(formData)
      ElMessage.success('新增成功')
    } else {
      await DocsApi.updateDocs(formData)
      ElMessage.success('修改成功')
    }
    showModal.value = false
    emit('reload')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

defineExpose({ show })
</script>

<template>
  <el-dialog
    v-model="showModal"
    :title="editFlag ? '编辑文档' : '新增文档'"
    width="500px"
    :close-on-click-modal="!loading"
    :close-on-press-escape="!loading"
    destroy-on-close
  >
    <Form :schema="formSchema" ref="formRef" @register="register" />
    <template #footer>
      <el-button @click="showModal = false" :loading="loading">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
    </template>
  </el-dialog>
</template>

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