import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { DepartmentApi, EnumApi, PostApi, UserApi } from '#/api';
import { formatterStatus } from '#/api/model';

export const searchFormOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      fieldName: 'account',
      label: '账号',
    },
    {
      component: 'Input',
      fieldName: 'name',
      label: '姓名',
    },
  ],
};

export const gridOptions: VxeGridProps<UserApi.RecordItem> = {
  toolbarConfig: {
    refresh: true,
    print: false,
    export: false,
    zoom: true,
    custom: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    {
      align: 'left',
      field: 'account',
      title: '账号',
      width: 200,
    },
    { align: 'left', field: 'realName', title: '姓名', width: 120 },
    { align: 'left', field: 'remark', title: '备注' },
    {
      field: 'status',
      title: '状态',
      width: 60,
      formatter: formatterStatus,
    },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 160,
    },
  ],
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await UserApi.getPage({
          pageIndex: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};

export const formOptions: VbenFormProps = {
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入账号',
      },
      fieldName: 'account',
      label: '账号',
      rules: 'required',
    },
    {
      component: 'InputPassword',
      componentProps: {
        placeholder: '请输入密码',
      },
      fieldName: 'password',
      label: '密码',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入姓名',
      },
      fieldName: 'realName',
      label: '姓名',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入昵称',
      },
      fieldName: 'nickName',
      label: '昵称',
    },
    {
      component: 'ApiRadio',
      componentProps: {
        placeholder: '请输入',
        api: {
          type: 'enum',
          params: EnumApi.EnumType.Gender,
        },
      },
      fieldName: 'sex',
      label: '性别',
    },
    {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'birthday',
      label: '生日',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入电话',
      },
      fieldName: 'phone',
      label: '电话',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      fieldName: 'email',
      label: '邮箱',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'remark',
      label: '备注',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      fieldName: 'otherinfo',
      label: '其他信息',
      component: 'Divider',
      formItemClass: 'col-span-2 items-baseline',
      hideLabel: true,
      renderComponentContent: () => {
        return {
          default: () => {
            return '其他信息';
          },
        };
      },
    },
    {
      component: 'ApiTreeSelect',
      componentProps: {
        placeholder: '请输入组织',
        api: {
          url: DepartmentApi.getTreeOptions,
        },
        showSearch: true,
      },
      fieldName: 'departmentId',
      label: '组织',
      rules: 'required',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请输入职位',
        api: {
          url: PostApi.getOptions,
        },
        showSearch: true,
      },
      fieldName: 'postId',
      label: '职位',
    },
  ],
  wrapperClass: 'grid-cols-2',
};
