<script setup lang="ts">
import { Form } from '@/components/Form'
import { nextTick, ref } from 'vue'
import { FormSchema } from '@/types/form'
import { AppApi } from '@/api/new-ai/app'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['reload'])
const visible = ref(false)
const formData = ref({})
const formRef = ref()
const schemas = ref<FormSchema[]>([
  {
    field: 'name',
    label: '应用名称',
    component: 'Input',
    formItemProps: {
      required: true,
      rules: [
      { required: true, message: '请输入应用名称' },
      { min: 2, max: 20, message: '长度在2-20个字符' }
    ]
    },
    componentProps: {
      placeholder: '请输入应用名称'
    },
   
  },
  {
    field: 'description',
    label: '应用描述',
    component: 'Input',
    formItemProps: {
      required: true,
      rules: [
      { required: true, message: '请输入应用描述' },
      { min: 2, max: 200, message: '长度在2-200个字符' }
    ]
    },
    componentProps: {
      type: 'textarea',
      rows: 4,
      placeholder: '请输入应用描述'
    },
   
  },
  {
    field: 'icon',
    label: '应用图标',
    component: 'Input',
    formItemProps: {
      required: false,
    },
    componentProps: {
      placeholder: '请输入应用图标'
    }
  },
  {
    field: 'modelId',
    label: '关联模型',
    component: 'Input',
    formItemProps: {
      required: false,
    },
    componentProps: {
      placeholder: '请选择关联模型'
    }
  }
])
const isEdit = ref(false)
const loading = ref(false)

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

const show = async (data: any = {}) => {
  visible.value = true
  isEdit.value = !!data.id
  await nextTick()
  if (data.id) {
    loading.value = true
    try {
      const res = await AppApi.getApp(data.id)
      formRef.value.setValues(res.data)
    } catch (error) {
      ElMessage.error('获取应用详情失败')
    } finally {
      loading.value = false
    }
  } else {
    formRef.value.setValues(data)
  }
}

const handleSubmit = async () => {
  try {
    const form = formRef.value.getElFormRef()
    await form.validate()
    const values = formRef.value.formModel
    loading.value = true
    
    if (isEdit.value) {
      await AppApi.updateApp(values)
      ElMessage.success('更新应用成功')
    } else {
      await AppApi.createApp(values)
      ElMessage.success('创建应用成功')
    }
    close()
    emit('reload')
  } catch (error) {
    console.error('Failed to save app:', error)
    ElMessage.error(isEdit.value ? '更新应用失败' : '创建应用失败')
  } finally {
    loading.value = false
  }
}

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

<template>
  <el-dialog 
    v-model="visible" 
    :close-on-click-modal="!loading" 
    :close-on-press-escape="!loading" 
    draggable
    :title="isEdit ? '编辑应用' : '新增应用'" 
    width="500px"
    @close="close"
  >
    <Form 
      ref="formRef" 
      :model="formData" 
      :schema="schemas"
      v-loading="loading"
    />
    <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>
