function pagination() {
    return {
        type: 'pagination',
        layout: 'total,perPage,pager',
        model: 'normal',
        maxButtons: 10,
        showPageInput: false,
        perPageAvailable: [10, 15, 20, 50, 100],
        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: {
            type: 'crud',
            syncLocation: false,
            api: {
                method: 'get',
                url: '${base}/overview/news',
                data: {
                    page: '${page|default:1}',
                    count: '${count|default:10}',
                    filter_keyword: '${filter_keyword|default:undefined}',
                    filter_date: '${filter_date|default:undefined}',
                    filter_date_start: '${filter_date_start|default:undefined}',
                    filter_date_end: '${filter_date_end|default:undefined}',
                    filter_source: '${filter_source|default:undefined}',
                    filter_author: '${filter_author|default:undefined}',
                    filter_category: '${filter_category|default:undefined}',
                }
            },
            filterTogglable: true,
            filterDefaultVisible: false,
            mode: 'list',
            headerToolbar: [
                'reload',
                'filter-toggler',
                'pagination',
            ],
            footerToolbar: [],
            filter: {
                title: '搜索',
                mode: 'horizontal',
                horizontal: {
                    leftFixed: 'sm',
                },
                body: [
                    {
                        type: 'group',
                        body: [
                            {
                                type: 'input-text',
                                label: '关键字',
                                name: 'filter_keyword',
                                placeholder: '关键字搜索',
                            },
                        ]
                    },
                    {
                        type: 'group',
                        body: [
                            {
                                type: 'input-date',
                                label: '日期',
                                name: 'filter_date',
                                columnRatio: 4,
                            },
                            {
                                type: 'input-date-range',
                                label: '日期范围',
                                name: 'filter_date_start',
                                extraName: 'filter_date_end',
                                columnRatio: 8,
                            },
                        ]
                    },
                    {
                        type: 'group',
                        body: [
                            {
                                type: 'select',
                                label: '来源',
                                name: 'filter_source',
                                multiple: true,
                                searchable: true,
                                source: {
                                    method: 'get',
                                    url: '${base}/overview/all_source',
                                    adaptor: (payload, response, api, context) => {
                                        console.log(payload, response, api, context)
                                        return payload.map(i => {
                                            return {label: i, value: i}
                                        })
                                    }
                                }
                            },
                            {
                                type: 'select',
                                label: '作者',
                                name: 'filter_author',
                                multiple: true,
                                searchable: true,
                                source: {
                                    method: 'get',
                                    url: '${base}/overview/all_author',
                                    adaptor: (payload, response, api, context) => {
                                        console.log(payload, response, api, context)
                                        return payload.map(i => {
                                            return {label: i, value: i}
                                        })
                                    }
                                }
                            },
                            {
                                type: 'select',
                                label: '关键词',
                                name: 'filter_category',
                                multiple: true,
                                searchable: true,
                                source: {
                                    method: 'get',
                                    url: '${base}/overview/all_category',
                                    adaptor: (payload, response, api, context) => {
                                        console.log(payload, response, api, context)
                                        return payload.map(i => {
                                            return {label: i, value: i}
                                        })
                                    }
                                }
                            },
                        ]
                    }
                ],
                actions: [
                    {
                        type: 'reset',
                        label: '清空'
                    },
                    {
                        type: 'submit',
                        label: '搜索',
                        level: 'primary',
                    },
                ]
            },
            canAccessSuperData: false,
            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: 'action',
                                            label: '搜索',
                                            icon: 'fa fa-search',
                                            actionType: 'url',
                                            url: 'https://www.bing.com/search?q=${title}',
                                            blank: true,
                                        },
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        type: 'tpl',
                        className: 'text-current',
                        tpl: '${description}',
                    },
                    {
                        type: 'tpl',
                        className: 'text-blue-900 text-sm mt-2',
                        tpl: '${name}',
                    },
                    {
                        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: '#bd6464',
                            },
                        ]
                    },
                    {
                        type: 'each',
                        className: 'mt-2',
                        source: "${SPLIT(tags, ',')}",
                        items: {
                            type: 'tag',
                            label: '${item}',
                            displayMode: 'rounded',
                            color: '#6b3481',
                        }
                    }
                ]
            },
        },
    }
}