import type { VbenFormProps } from '#/adapter/form';

import { getMenuTreeOptionSelect } from '#/views/system/menu/api';
import { getRoleOption } from '#/views/system/role/api';

export const modalFormProps: VbenFormProps = {
  wrapperClass: 'grid-cols-12', // 24栅格,
  commonConfig: {
    formItemClass: 'col-span-6',
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'VbenInput',
      fieldName: 'id',
      label: 'ID',
      dependencies: {
        show: false,
        triggerFields: ['id'],
      },
    },
    {
      component: 'ApiSelect',
      componentProps: {
        api: getRoleOption,
        labelField: 'name',
        valueField: 'id',
        placeholder: '请选择角色',
      },
      fieldName: 'role_id',
      label: '角色',
      rules: 'required',
    },
    {
      component: 'ApiTreeSelect',
      componentProps: {
        childrenField: 'children',
        labelField: 'title',
        valueField: 'id',
        api: getMenuTreeOptionSelect,
        placeholder: '请选择菜单（选择后自动填充标题、图标、地址）',
        onChange: (value: any, formApi: any) => {
          // 选择菜单后，自动填充title、icon、url
          if (value) {
            // 这里需要通过API获取菜单详情来填充
            // 暂时由后端处理
          }
        },
      },
      fieldName: 'menu_id',
      label: '菜单',
      defaultValue: 0,
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入标题',
      },
      fieldName: 'title',
      label: '标题',
      rules: 'required',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入图标',
      },
      fieldName: 'icon',
      label: '图标',
      rules: 'required',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入跳转地址',
      },
      fieldName: 'url',
      label: '跳转地址',
      rules: 'required',
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入颜色（如：#00d8ff）',
      },
      fieldName: 'color',
      label: '颜色',
      defaultValue: '#00d8ff',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入排序',
      },
      defaultValue: 0,
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
  ],
  showDefaultActions: false,
};
