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

import { z } from '#/adapter/form';
import { getRoleOption } from '#/views/system/role/api';

const defaultPassword = 'Xk123456@';

export const modalFormProps: VbenFormProps = {
  wrapperClass: 'grid-cols-12', // 24栅格,
  commonConfig: {
    formItemClass: 'col-span-12',
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'VbenInput',
      fieldName: 'id',
      label: 'ID',
      formItemClass: 'col-span-6',
      dependencies: {
        show: false,
        triggerFields: ['id'],
      },
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入管理员昵称',
      },
      fieldName: 'nick_name',
      label: '昵称',
      rules: 'required',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Avatar',
      fieldName: 'avatar',
      label: '头像',
      rules: 'required',
      formItemClass: 'col-span-6',
    },
    // {
    //   component: 'UploadImage',
    //   fieldName: 'images',
    //   label: '其他图片',
    //   rules: 'required',
    //   formItemClass: 'col-span-6',
    // },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入管理员手机号码',
      },
      fieldName: 'phone',
      label: '手机号',
      rules: 'required',
      formItemClass: 'col-span-6',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        allowClear: true,
        filterOption: (input: string, option: any) => {
          // 自定义过滤逻辑，确保可以根据 name 进行搜索
          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        },
        showSearch: true,
        // 菜单接口转options格式
        afterFetch: (data: { id: number; name: string }[]) => {
          return data.map((item: any) => ({
            label: item.name,
            value: item.id,
          }));
        },
        api: getRoleOption,
        placeholder: '请选择',
      },
      fieldName: 'role_id',
      formItemClass: 'col-span-6',
      label: '角色',
      rules: 'required',
    },
    {
      fieldName: 'password',
      label: '密码',
      component: 'InputPassword',
      help: '5-18位数字、字母、特殊字符组成。',
      componentProps: {
        placeholder: '请输入密码',
        allowClear: true,
      },
      defaultValue: defaultPassword,
      rules: z
        .string()
        .regex(
          /^(?=.*[A-Z0-9])(?=.*[!@#$%^&*])[A-Z0-9!@#$%^&*]{5,18}$/i,
          '密码由5-18位数字、字母、特殊字符组成。',
        ),
      dependencies: {
        if({ id }) {
          return !id;
        },
        triggerFields: ['id'],
      },
      formItemClass: 'col-span-6',
    },
    {
      fieldName: 'confirmPassword',
      label: '确认密码',
      component: 'InputPassword',
      componentProps: {
        placeholder: '请输入确认密码',
        allowClear: true,
      },
      defaultValue: defaultPassword,
      rules: z
        .string()
        .regex(/[\w!@#$%^&*]{5,18}/, '密码由5-18位数字、字母、特殊字符组成。'),
      dependencies: {
        if({ id }) {
          return !id;
        },
        triggerFields: ['id', 'confirmPassword'],
        rules: (values) => {
          return z
            .string()
            .regex(
              /[\w!@#$%^&*]{5,18}/,
              '密码由5-18位数字、字母、特殊字符组成。',
            )
            .refine(
              (confirmPassword) => {
                return confirmPassword === values.password;
              },
              {
                message: '确认密码必须与密码一致',
              },
            );
        },
      },
      formItemClass: 'col-span-6',
    },
  ],
  showDefaultActions: false,
};
