<!--
    常规的分页查询页面，上部为查询条件面板和操作按钮区，中间为数据表格，底部为分页指示器
-->
<script lang="ts">


    import type {ActionsColumn, DataColumn, IndicatorColumn} from "@ticatec/uniface-element/DataTable";
    import i18nRes from "../i18nRes";
    import PaginationPanel from "@ticatec/uniface-element/PaginationPanel";
    import Box from "@ticatec/uniface-element/Box";
    import DataTable from "@ticatec/uniface-element/DataTable";
    import type {OnPageChange, OnRowCountChanged} from "@ticatec/uniface-element/PaginationPanel";
    import {i18nUtils} from "@ticatec/i18n";
    import type {GetRowFontStyle} from "@ticatec/uniface-element/types";

    export let indicatorColumn: IndicatorColumn | undefined = undefined;
    export let columns: Array<DataColumn>;
    export let actionsColumn: ActionsColumn | undefined = undefined;
    export let selectedRows: Array<any> = [];
    export let list: Array<any>;
    export let roundTable: boolean = false;
    export let total: number;
    export let pageCount: number;
    export let pageNo: number;
    export let onRowCountChanged: OnRowCountChanged;
    export let onPageChange: OnPageChange;
    export let rowHeight: number = null as unknown as number;
    export let emptyIndicator: string | undefined = undefined;
    export let getRowFontStyle: GetRowFontStyle | undefined = undefined;
    const generateInfo = () => {
        return i18nUtils.formatText(i18nRes.app.pagingInfo, {})
    }


</script>

<div class="common-page-container">
    <slot name="header"/>
    <Box style="border: 1px solid var(--uniface-editor-border-color, #F8FAFC); width: 100%; height: 100%" round={roundTable}>
        <DataTable style="height: 100%; width: 100%" {rowHeight} {columns} {indicatorColumn} {actionsColumn} bind:selectedRows {emptyIndicator}
                   {list} {getRowFontStyle}></DataTable>
    </Box>
    <div style="width: 100%; padding: 8px 12px; box-sizing: border-box; flex: 0 0 auto; border-top: 1px solid var(--uniface-page-divid-color, #F0F0F0)">
        <slot name="footer">
            <PaginationPanel {pageCount} {pageNo} {total} {onRowCountChanged} {onPageChange} {generateInfo}
                             rowCountLabel={i18nRes.app.rowCountLabel}/>
        </slot>
    </div>
</div>