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

import { getupperCamelCaseListApi } from '../api';

interface RowType {
    id: string;
    name: string;
    logo: string;
    introduce: string;
    created_at: string;
}

export const gridOptions: VxeGridProps<RowType> = {
    checkboxConfig: {
        highlight: true,
        labelField: '',
    },
    columnConfig: {
        useKey: true,
    },
    rowConfig: {
        useKey: true,
    },
    columns: [
        { type: 'checkbox', width: 60 },
        { field: 'id', align: 'left', title: 'ID', width: 100 },
        // 生成的列表字段
        { field: 'created_at', title: '创建时间' },
        { field: 'updated_at', title: '编辑时间' },
        { type: 'html', title: '操作', slots: { default: 'action' } },
    ],
    keepSource: true,
    pagerConfig: {},
    proxyConfig: {
        ajax: {
            // 请求后端接口方法
            query: async ({ page }, formValues) => {
                return await getupperCamelCaseListApi({
                    page: page.currentPage,
                    pageSize: page.pageSize,
                    ...formValues,
                });
            },
        },
    },
    height: 'auto',
    border: false,
    toolbarConfig: {
        // 是否显示搜索表单控制按钮
        // @ts-ignore 正式环境时有完整的类型声明
        search: true,
        refresh: true, // 刷新
        print: false, // 打印
        export: false, // 导出
        // custom: true, // 自定义列
        zoom: true, // 最大化最小化
        slots: {
            buttons: 'toolbar-buttons',
        },
        custom: {
            // 自定义列-图标
            icon: 'vxe-icon-menu',
        },
    },
    showOverflow: false,
};