<script setup lang="ts">
import { useVbenForm } from '#/adapter/form';
import { inject, ref, watch } from 'vue';

import {
  apiMethodOptions,
  apiVersionOptions,
  resultTypeOptions,
  dataSourceOptions,
} from '../data';
import type { ErpApiConfig } from '#/api/erp/api';

const apiData = inject<ref<ErpApiConfig>>('apiData')!;

const schema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'apiId',
    label: 'API ID',
    dependencies: {
      show: () => false,
      triggerFields: ['apiId'],
    },
  },
  {
    component: 'Input',
    fieldName: 'apiName',
    label: 'API名称',
    rules: 'required',
    componentProps: {
      placeholder: '请输入API名称',
    },
  },
  {
    component: 'Input',
    fieldName: 'apiPath',
    label: 'API路径',
    rules: 'required',
    componentProps: {
      placeholder: '例如：/erp/dynamic/v1/customer_list',
    },
  },
  {
    component: 'Select',
    fieldName: 'apiMethod',
    label: 'HTTP方法',
    rules: 'required',
    componentProps: {
      options: apiMethodOptions,
    },
  },
  {
    component: 'InputTextArea',
    fieldName: 'apiDesc',
    label: 'API描述',
    componentProps: {
      placeholder: '请输入API描述',
      rows: 2,
    },
  },
  {
    component: 'Select',
    fieldName: 'apiVersion',
    label: 'API版本',
    componentProps: {
      options: apiVersionOptions,
    },
  },
  {
    component: 'Select',
    fieldName: 'dataSource',
    label: '数据源',
    componentProps: {
      options: dataSourceOptions,
    },
  },
  {
    component: 'InputTextArea',
    fieldName: 'sqlTemplate',
    label: 'SQL模板',
    rules: 'required',
    componentProps: {
      placeholder: '请输入SQL模板，支持参数占位符 #{paramName}',
      rows: 6,
    },
    helpMessage: '使用 #{paramName} 作为参数占位符，例如：SELECT * FROM table WHERE #{id} IS NOT NULL THEN id = #{id}',
  },
  {
    component: 'Select',
    fieldName: 'resultType',
    label: '结果类型',
    rules: 'required',
    componentProps: {
      options: resultTypeOptions,
    },
  },
  {
    component: 'Switch',
    fieldName: 'supportPagination',
    label: '支持分页',
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
  },
  {
    component: 'Input',
    fieldName: 'pageParamName',
    label: '页码参数名',
    dependencies: {
      show: (values) => values.supportPagination === 1,
      triggerFields: ['supportPagination'],
    },
    componentProps: {
      placeholder: '默认：pageNum',
    },
  },
  {
    component: 'Input',
    fieldName: 'sizeParamName',
    label: '页大小参数名',
    dependencies: {
      show: (values) => values.supportPagination === 1,
      triggerFields: ['supportPagination'],
    },
    componentProps: {
      placeholder: '默认：pageSize',
    },
  },
  {
    component: 'Switch',
    fieldName: 'requireAuth',
    label: '需要认证',
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
  },
  {
    component: 'Input',
    fieldName: 'permissionCode',
    label: '权限标识',
    dependencies: {
      show: (values) => values.requireAuth === 1,
      triggerFields: ['requireAuth'],
    },
    componentProps: {
      placeholder: '例如：erp:customer:list',
    },
  },
  {
    component: 'Switch',
    fieldName: 'enableCache',
    label: '启用缓存',
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
  },
  {
    component: 'Input',
    fieldName: 'cacheKeyTemplate',
    label: '缓存键模板',
    dependencies: {
      show: (values) => values.enableCache === 1,
      triggerFields: ['enableCache'],
    },
    componentProps: {
      placeholder: '支持参数占位符',
    },
  },
  {
    component: 'InputNumber',
    fieldName: 'cacheTtl',
    label: '缓存过期时间',
    dependencies: {
      show: (values) => values.enableCache === 1,
      triggerFields: ['enableCache'],
    },
    componentProps: {
      placeholder: '秒',
      min: 1,
    },
  },
  {
    component: 'Input',
    fieldName: 'sourceTable',
    label: '来源表名',
    componentProps: {
      disabled: true,
      placeholder: '如果是从表导入生成的，会显示来源表名',
    },
  },
  {
    component: 'InputTextArea',
    fieldName: 'remark',
    label: '备注',
    componentProps: {
      placeholder: '请输入备注',
      rows: 2,
    },
  },
];

const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    labelWidth: 120,
  },
  schema: schema(),
  showDefaultActions: false,
});

// 监听数据变化，同步到表单
watch(apiData, (newData) => {
  if (newData) {
    formApi.setValues(newData);
  }
}, { immediate: true, deep: true });

// 获取表单数据（供父组件调用）
function getFormValues() {
  return formApi.getValues();
}

// 验证表单（供父组件调用）
async function validateForm() {
  const { valid } = await formApi.validate();
  return valid;
}

// 暴露方法给父组件
defineExpose({
  getFormValues,
  validateForm,
});
</script>

<template>
  <BasicForm />
</template>