<script lang="ts" setup>
/**
 * AI 厂商模型新增/编辑弹窗
 */
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';

import { createAiModel, updateAiModel } from '../api/model';
import { STATUS_OPTIONS } from '../config/constants';

const isUpdate = ref(false);
const onSuccess = ref<null | (() => void)>(null);
const [Form, formApi] = useVbenForm({
  wrapperClass: 'grid-cols-12',
  commonConfig: {
    formItemClass: 'col-span-12',
    componentProps: { class: 'w-full' },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'VbenInput',
      fieldName: 'id',
      label: 'ID',
      dependencies: { show: false, triggerFields: ['id'] },
    },
    {
      component: 'VbenInput',
      fieldName: 'platform_id',
      label: '平台ID',
      dependencies: { show: false, triggerFields: ['platform_id'] },
    },
    {
      component: 'VbenInput',
      fieldName: 'code',
      label: '模型编码',
      rules: 'required',
      formItemClass: 'col-span-6',
      help: '调用 API 的 model 参数，如 lite / deepseek-chat',
      componentProps: { placeholder: 'deepseek-chat' },
    },
    {
      component: 'VbenInput',
      fieldName: 'name',
      label: '展示名称',
      rules: 'required',
      formItemClass: 'col-span-6',
      componentProps: { placeholder: 'DeepSeek Chat' },
    },
    {
      component: 'VbenSelect',
      fieldName: 'status',
      label: '状态',
      formItemClass: 'col-span-4',
      componentProps: { options: STATUS_OPTIONS },
      defaultValue: 1,
    },
    {
      component: 'InputNumber',
      fieldName: 'sort',
      label: '排序',
      formItemClass: 'col-span-4',
      componentProps: { min: 0 },
      defaultValue: 0,
    },
    {
      component: 'VbenSelect',
      fieldName: 'is_default',
      label: '设为默认',
      formItemClass: 'col-span-4',
      componentProps: {
        options: [
          { label: '否', value: 0 },
          { label: '是', value: 1 },
        ],
      },
      defaultValue: 0,
    },
    {
      component: 'VbenInput',
      fieldName: 'description',
      label: '说明',
      componentProps: { type: 'textarea', rows: 2, placeholder: '模型简介' },
      defaultValue: '',
    },
  ],
  showDefaultActions: false,
});

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    const e = await formApi.validate();
    if (!e.valid) return;
    const values = await formApi.getValues();
    modalApi.setState({ confirmLoading: true });
    try {
      const api = isUpdate.value ? updateAiModel : createAiModel;
      await api(values);
      message.success('保存成功');
      onSuccess.value?.();
      modalApi.close();
    } finally {
      modalApi.setState({ confirmLoading: false });
    }
  },
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formApi.resetForm();
      onSuccess.value = null;
      return;
    }
    const data = modalApi.getData<Record<string, any>>() || {};
    isUpdate.value = !!data.update;
    onSuccess.value = typeof data.onSuccess === 'function' ? data.onSuccess : null;
    if (data.values && data.update) {
      formApi.setValues({ ...data.values });
    } else {
      formApi.resetForm();
      formApi.setValues({
        platform_id: data.platform_id || data.values?.platform_id || 0,
        sort: 0,
        status: 1,
        is_default: 0,
      });
    }
  },
});
</script>

<template>
  <Modal :title="`${isUpdate ? '编辑' : '新增'}模型`" class="w-[560px]">
    <Form />
  </Modal>
</template>
