<script setup lang="ts">
import {Form} from '@/components/Form'
import {nextTick, ref} from 'vue'
import {FormSchema} from "@/types/form";
import {EmbedStoreApi} from "@/api/new-ai/embed-store";
import {ElMessage} from "element-plus";
import {ProviderConst} from './composables'

const emit = defineEmits(['reload'])
const visible = ref(false)
const formData = ref({})
const formRef = ref()
const isEdit = ref(false)
const loading = ref(false)
const schemas = ref<FormSchema[]>([
  {
    field: 'name',
    label: '数据库别名',
    component: 'Input',
    formItemProps: {
      required: true,
    }
  },
  {
    field: 'provider',
    label: '供应商',
    component: 'Select',
    componentProps: {
      options: ProviderConst,
    },
    formItemProps: {
      required: true,
    }
  },
  {
    field: 'dimension',
    label: '向量纬度',
    component: 'InputNumber',
    formItemProps: {
      required: true,
    },
    componentProps: {
      min: 1,
    },
  },
  {
    field: 'host',
    label: '数据库地址',
    component: 'Input',
    formItemProps: {
      required: true,
    }
  },
  {
    field: 'port',
    label: '数据库端口',
    component: 'InputNumber',
    formItemProps: {
      required: true,
    },
    componentProps: {
      min: 1,
      max: 65535,
    },
  },
  {
    field: 'databaseName',
    label: '数据库名称',
    component: 'Input',
    formItemProps: {
      required: true,
    }
  },
  {
    field: 'username',
    label: '数据库用户名',
    component: 'Input',
    formItemProps: {
      required: true,
    }
  },
  {
    field: 'password',
    label: '数据库密码',
    component: 'Input',
    componentProps: {
      type: 'password',
      showPassword: true,
    },
    formItemProps: {
      required: true,
    }
  },
])

const close = () => {
  visible.value = false
  formRef.value.clearForm()
}

const show = async (data: any = {}) => {
  visible.value = true
  isEdit.value = !!data.id
  await nextTick()
  formRef.value.setValues(data)
}

const handleSubmit = async () => {
  try {
    const form = formRef.value.getElFormRef()
    await form.validate()
    const values = formRef.value.formModel
    
    if (isEdit.value) {
      await EmbedStoreApi.updateEmbedStore(values);
      ElMessage.success('更新向量数据库成功');
    } else {
      await EmbedStoreApi.createEmbedStore(values);
      ElMessage.success('创建向量数据库成功');
    }
    close();
    emit('reload');
  } catch (error) {
    console.error('Failed to save embed store:', error);
    ElMessage.error(isEdit.value ? '更新向量数据库失败' : '创建向量数据库失败');
  }
}

defineExpose({
  show,
  close
})
</script>

<template>
  <el-dialog v-model="visible" :close-on-click-modal="!loading" :close-on-press-escape="!loading" draggable :title="isEdit ? '编辑向量数据库' : '新增向量数据库'" width="800px" @close="close">
    <Form ref="formRef" :model="formData" :schema="schemas" />
    <template #footer>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
      <el-button @click="close" :loading="loading">取消</el-button>
    </template>
  </el-dialog>
</template>

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