@page "/tables/row"

<h3>Table 表格</h3>

<h4>用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</h4>

<DemoBlock Title="显示行号" Introduction="通过设置 <code>ShowLineNo</code> 属性为 <code>true</code> 时表格显示行号了，默认值为 <code>false</code>"  Name="RowNubmer">
    <p>设置 <code>LineNoText</code> 属性值来设置行号列头显示文本，默认为 <code>行号</code></p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowLineNo="true" LineNoText="序号"
           ShowDefaultButtons="false" ClickToSelect="true"
           OnQueryAsync="@OnQueryAsync">
        <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" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="点击单元格选中整行效果" Introduction="通过设置 <code>ClickToSelect</code> 属性值可以实现点击任意单元格选中整行效果，选中行样式被设置为 <code>active</code>" Name="ClickToSelect">
    <p>可以设置 <code>OnClickRowCallback</code> 回调委托方法对点击行做相应处理，点击表格中任意一行后在下方显示选中行绑定数据的 <code>Name</code> 值</p>
    <p>注意：此回调委托内部不进行 UI 渲染，需要 UI 数据更新操作时，请手动显式调用 <code>StateHasChanged</code> 方法</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true"
           ShowDefaultButtons="false" ClickToSelect="true" OnClickRowCallback="@ClickRow"
           OnQueryAsync="@OnQueryAsync">
        <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" />
        </TableColumns>
    </Table>
    <p>当前选中行：@(CurrentItem?.Name ?? "无")</p>
</DemoBlock>

<DemoBlock Title="双击单元格编辑本行效果" Introduction="通过设置 <code>DoubleClickToEdit</code> 属性值可以实现双击任意单元格编辑本行效果，此功能前提是 <code>Edit</code> 功能可用" Name="DoubleClickToEdit">
    <p>移动端（CardView）模式暂时不支持双击编辑当前行功能</p>
    <p>多选模式下同样支持双击编辑功能，如果设置 <code>ClickToSelect</code> 点击选择效果后，双击编辑功能会导致行选中状态交替选中，请自行设置 <code>ClickToSelect=false</code> 关闭此功能</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDeleteButton="false"
           ClickToSelect="true" DoubleClickToEdit="true"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync">
        <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" />
        </TableColumns>
        <EditTemplate>
            <div class="row g-3">
                <div class="col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空，50字以内" maxlength="50">
                    </BootstrapInput>
                </div>
                <div class="col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空，50字以内" maxlength="50">
                    </BootstrapInput>
                </div>
                <div class="col-12 col-sm-6">
                    <DateTimePicker @bind-Value="@context.DateTime">
                    </DateTimePicker>
                </div>
                <div class="col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@context.Count">
                    </BootstrapInput>
                </div>
            </div>
        </EditTemplate>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义行双击事件" Introduction="本功能仅限 <code>Table</code> 组件单选模式下生效，通过设置 <code>DoubleClickRowCallback</code> 属性值可以实现双击任意单元格自定义回调委托方法，实现自己的需求功能"  Name="DoubleClickRowCallback">
    <p>移动端（CardView）模式暂时不支持双击编辑当前行功能</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true"
           ShowDefaultButtons="false" OnDoubleClickRowCallback="@DoubleClickRowCallback"
           OnQueryAsync="@OnQueryAsync">
        <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" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义行高亮" Introduction="通过设置 <code>SetRowClassFormatter</code> 属性值可以实现通过行数据逻辑对行样式进行设置,实现自己高亮需求功能" Name="SetRowClassFormatter">
    <p>本例中 <code>SetRowClassFormatter</code> 方法通过判断绑定数据的 <code>Count > 60</code> 时行高亮显示</p>
    <Table TItem="Foo" SetRowClassFormatter="@SetRowClassFormatter"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true"
           ShowDefaultButtons="false" OnDoubleClickRowCallback="@DoubleClickRowCallback"
           OnQueryAsync="@OnQueryAsync">
        <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" />
        </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>
/// Table 组件行示例代码
/// </summary>
public partial class TablesRow
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

    [Inject]
    [NotNull]
    private ToastService? ToastService { get; set; }

    private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

    [NotNull]
    private List<Foo>? Items { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(Localizer);
    }

    private static Task<Foo> OnAddAsync() => Task.FromResult(new Foo() { DateTime = DateTime.Now });

    private Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
    {
        // 增加数据演示代码
        if (changedType == ItemChangedType.Add)
        {
            item.Id = Items.Max(i => i.Id) + 1;
            Items.Add(item);
        }
        else
        {
            var oldItem = Items.FirstOrDefault(i => i.Id == item.Id);
            if (oldItem != null)
            {
                oldItem.Name = item.Name;
                oldItem.Address = item.Address;
                oldItem.DateTime = item.DateTime;
                oldItem.Count = item.Count;
                oldItem.Complete = item.Complete;
                oldItem.Education = item.Education;
            }
        }
        return Task.FromResult(true);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        IEnumerable<Foo> items = Items;

        // 设置记录总数
        var total = items.Count();

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

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

    private async Task DoubleClickRowCallback(Foo item)
    {
        var cate = ToastCategory.Success;
        var title = "双击行回调委托示例";
        var content = $"选中行数据为名称 {item.Name} 的数据";
        await ToastService.Show(new ToastOption()
        {
            Category = cate,
            Title = title,
            Content = content
        });
    }

    private static string? SetRowClassFormatter(Foo item) => item.Count > 60 ? "highlight" : null;

    private Foo? CurrentItem { get; set; }

    private Task ClickRow(Foo item)
    {
        CurrentItem = item;
        StateHasChanged();
        return Task.CompletedTask;
    }
}