@page "/tables/autorefresh"

<h3>自动刷新表格功能</h3>

<h4>在某种应用场景中，数据源的变化需要重新刷新表格组件</h4>

<DemoBlock Title="自动刷新" Introduction="本示例演示在后台线程中对数据源进行监控，当数据源变化时通知表格组件进行数据刷新" Name="AutoRefresh">
    <p>通过设置 <code>IsAutoRefresh</code> 属性值来开启自动刷新功能，<code>AutoRefreshInterval</code> 属性值默认为 2000 毫秒，此值为自动刷新时间间隔，周期性调用组件的 <code>QueryAsync</code> 方法使表格具有自动刷新功能</p>
    <p>本例中每间隔 2 秒钟数据增加一条新数据并保持最多 10 条数据</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           IsAutoRefresh="true" AutoRefreshInterval="2000"
           OnQueryAsync="@OnRefreshQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="通过设置变量控制是否自动更新" Introduction="本示例通过设置变量控制是否自动更新" Name="Control">
    <p>
        <div>通过点击按钮开始/关闭是否自动更新功能</div>
        <Button Text="更改 Auto" OnClick="@ClickIsAutoRefresh" /> <span>IsAutoRefresh 当前值：@IsAutoRefresh</span>
    </p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           IsAutoRefresh="@IsAutoRefresh" AutoRefreshInterval="2000"
           OnQueryAsync="@OnRefreshQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// 
/// </summary>
public partial class TablesAutoRefresh
{
    private static readonly Random random = new();

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

    private List<Foo> AutoItems { get; set; } = new List<Foo>();

    private bool IsAutoRefresh { get; set; } = false;

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        // 模拟异步获取数据耗时 100ms
        await Task.Delay(100);

        AutoItems = Foo.GenerateFoo(Localizer).Take(2).ToList();
    }

    private void ClickIsAutoRefresh() => IsAutoRefresh = !IsAutoRefresh;

    private Task<QueryData<Foo>> OnRefreshQueryAsync(QueryPageOptions options)
    {
        // 设置记录总数
        var total = AutoItems.Count;
        var foo = Foo.Generate(Localizer);
        foo.Id = total++;
        foo.Name = Localizer["Foo.Name", total.ToString("D4")];
        foo.Address = Localizer["Foo.Address", $"{random.Next(1000, 2000)}"];

        AutoItems.Insert(0, foo);

        if (AutoItems.Count > 10)
        {
            AutoItems.RemoveRange(10, 1);
            total = 10;
        }

        // 内存分页
        var items = AutoItems.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<Foo>()
        {
            Items = items,
            TotalCount = total
        });
    }
}