function pagination() {
    return {
        type: 'pagination',
        layout: 'total,perPage,pager',
        model: 'normal',
        maxButtons: 10,
        showPageInput: false,
        perPageAvailable: [10, 15, 20],
        activePage: '${page|default:1}',
        total: '${total|default:0}',
        className: 'text-right',
        onEvent: {
            change: {
                actions: [
                    {
                        actionType: 'reload',
                        componentId: 'news_list',
                        args: {
                            page: '${event.data.page}',
                            count: '${event.data.perPage}',
                        }
                    }
                ]
            }
        }
    }
}

function overviewTab() {
    return {
        title: '总览',
        tab: {
            id: 'news_list',
            columnClassName: 'px-2 pt-2',
            type: 'service',
            api: {
                method: 'get',
                url: '${base}/overview/news',
                data: {
                    page: '${page|default:1}',
                    count: '${count|default:10}',
                }
            },
            body: [
                {
                    type: 'action',
                    icon: 'fa fa-refresh',
                    label: '刷新',
                    className: 'mb-2',
                    actionType: 'reload',
                    target: 'news_list',
                },
                {
                    ...pagination(),
                    className: 'float-right',
                },
                {
                    type: 'list',
                    listItem: {
                        body: [
                            {
                                type: 'grid',
                                columns: [
                                    {
                                        body: {
                                            type: 'wrapper',
                                            size: 'none',
                                            className: 'py-2',
                                            body: [
                                                {
                                                    type: 'wrapper',
                                                    className: 'text-md font-bold',
                                                    size: 'none',
                                                    body: [
                                                        '${title}'
                                                    ]
                                                },
                                                {
                                                    type: 'wrapper',
                                                    className: 'text-sm font-medium text-secondary',
                                                    size: 'none',
                                                    body: [
                                                        '${subtitle}'
                                                    ]
                                                },
                                            ]
                                        }
                                    },
                                    {
                                        sm: 2,
                                        md: 2,
                                        lg: 2,
                                        columnClassName: 'content-center',
                                        body: {
                                            type: 'operation',
                                            className: 'text-right',
                                            buttons: [
                                                {
                                                    visibleOn: '${!iframe}',
                                                    type: 'action',
                                                    label: '原文',
                                                    icon: 'fa fa-paperclip',
                                                    actionType: 'url',
                                                    url: '${url}',
                                                    blank: true,
                                                },
                                                {
                                                    visibleOn: '${iframe}',
                                                    type: 'action',
                                                    label: '原文',
                                                    icon: 'fa fa-firefox',
                                                    actionType: 'dialog',
                                                    dialog: {
                                                        title: '原文',
                                                        ...readOnlyDialogOptions(),
                                                        size: 'xl',
                                                        body: {
                                                            type: 'iframe',
                                                            src: '${url}',
                                                            height: 1000,
                                                        }
                                                    }
                                                },
                                            ]
                                        }
                                    }
                                ]
                            },
                            {
                                type: 'tpl',
                                className: 'text-current',
                                tpl: '${description}',
                            },
                            {
                                type: 'wrapper',
                                size: 'none',
                                className: 'mt-2',
                                body: [
                                    {
                                        type: 'tag',
                                        label: '${DATETOSTR(DATE(createTime), \'YYYY-MM-DD HH:mm\')}',
                                        displayMode: 'rounded',
                                        color: '#4096ff',
                                    },
                                    {
                                        type: 'tag',
                                        label: '${category}',
                                        displayMode: 'rounded',
                                        color: '#2fa15d',
                                    },
                                    {
                                        type: 'tag',
                                        label: '${author}',
                                        displayMode: 'rounded',
                                        color: '#ff8888',
                                    },
                                ]
                            },
                        ]
                    },
                },
                pagination(),
            ]
        }
    }
}