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

    import type {GetRowFontStyle, OnClick} from "@ticatec/uniface-element/types";
    import type {FilterFn} from "@ticatec/uniface-element/ListBox";

    import type {ActionsColumn, DataColumn, IndicatorColumn} from "@ticatec/uniface-element/DataTable";
    import {onMount, type Snippet} from "svelte";
    import i18nRes from "../../i18nRes";
    import type {PageAttrs, PageInitialize} from "@ticatec/uniface-micro-frame/common";
    import {useManagedList} from "../../common/useManagedList.svelte";
    import LoadDataErrorPage from "../../common/LoadDataErrorPage.svelte";
    import FilterablePageBar from "../../common/FilterablePageBar.svelte";
    import CommonPage from "@ticatec/uniface-micro-frame/CommonPage";
    import SimpleDataTableBoard from "../SimpleDataTableBoard.svelte";
    import type {ButtonActions} from "@ticatec/uniface-element/ActionBar";
    import type ListDataManager from "../../common/ListDataManager";

    interface Props {
        dataManager: ListDataManager;
        initializeData?: PageInitialize | null;
        indicatorColumn: IndicatorColumn;
        columns: Array<DataColumn>;
        actionsColumn?: ActionsColumn;
        selectedRows?: Array<any>;
        list?: Array<any>;
        onCreateNewClick?: OnClick;
        filterFn?: FilterFn | null;
        page$attrs: PageAttrs;
        busyIndicator?: string | null;
        rowHeight?: number;
        roundTable?: boolean;
        canBeClosed?: boolean;
        emptyText?: string;
        placeholder?: string;
        showInfo?: boolean;
        actions?: ButtonActions | null;
        round?: boolean;
        shadow?: boolean;
        getRowFontStyle?: GetRowFontStyle;
        sidebar?: Snippet;
        onError?: (ex: any) => void;
    }

    let {
        dataManager,
        initializeData = null,
        indicatorColumn,
        columns,
        actionsColumn = null as unknown as ActionsColumn,
        selectedRows = $bindable([]),
        list = $bindable([]),
        onCreateNewClick,
        filterFn = null,
        page$attrs,
        busyIndicator = null,
        rowHeight = undefined,
        roundTable = false,
        canBeClosed = false,
        emptyText = undefined,
        placeholder = '',
        showInfo = true,
        actions = null,
        round = true,
        shadow = true,
        getRowFontStyle = undefined,
        sidebar,
        onError = undefined
    }: Props = $props();

    const managed = useManagedList({
        dataManager: () => dataManager,
        initializeData: () => initializeData,
        busyIndicator: () => busyIndicator,
        defaultBusyText: i18nRes.app.busyIndicator(),
        onError: () => onError,
        onLoaded: (loadedList) => {
            list = loadedList;
        }
    });

    export function loadList() {
        return managed.load();
    }

    onMount(() => managed.initialize());

    const onRefreshClick: OnClick = async () => {
        await loadList();
    }

    let filterText: string = $state('');

</script>
{#if managed.loaded}
    <CommonPage {round} {shadow} {page$attrs} {canBeClosed}
                content$style="padding: 12px; box-sizing: border-box; overflow: hidden" {sidebar}>
        {#snippet headerExtra()}
            <FilterablePageBar bind:filter={filterText} filterable={filterFn != null} {placeholder} {onCreateNewClick}
                               {onRefreshClick} {actions}/>
        {/snippet}
        {#if managed.error}
            <LoadDataErrorPage message={managed.error} onRetry={() => managed.initialize()}/>
        {:else }
            <SimpleDataTableBoard {filterFn} {rowHeight} {roundTable} {emptyText} {filterText} {getRowFontStyle}
                                  {indicatorColumn} {columns} {actionsColumn} bind:selectedRows {list} {showInfo}/>
        {/if}
    </CommonPage>
{/if}
