import type { VbenFormProps, VxeGridProps } from '#/adapter';

import { RoleApi } from '#/api';
import { formatterStatus } from '#/api/model';

export const searchFormOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      fieldName: 'code',
      label: '编号',
    },
    {
      component: 'Input',
      fieldName: 'name',
      label: '名称',
    },
  ],
};

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

export const formOptions: VbenFormProps = {
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入编号',
      },
      fieldName: 'code',
      label: '编号',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
      fieldName: 'name',
      label: '名称',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入排序',
      },
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'remark',
      label: '备注',
    },
  ],
  wrapperClass: 'grid-cols-1',
};