@inherits BootstrapComponentBase
@page "/tables/wrap"

<h3>Table 换行示例</h3>

<h4>当表头或者行内单元格内容超长时，通过样式更改实现省略、换行等效果</h4>

<p><b>注意：</b>由于 <code>Table</code> 组件已实现适配移动端功能，此演示需在电脑端查看</p>

<DemoBlock Title="表头超长示例" Introduction="在某种特殊情况下可能表头比较长，需要将表头控制在一个固定宽度内，鼠标移动到表头上时显示 <code>Tooltip</code> 来显示完整表头信息" Name="WarpHeader">
    <p>可以拖动窗口大小，窗口过小时自动出现横向滚动条</p>
    <div class="table-wrap-header-demo">
        <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems">
            <TableColumns>
                <TableColumn @bind-Field="@context.DateTime" Width="180" Text="我是超级长的时间表头" />
                <TableColumn @bind-Field="@context.Name" Text="我是超级长的姓名表头" />
                <TableColumn @bind-Field="@context.Address" Text="我是超级长的地址表头" />
            </TableColumns>
        </Table>
    </div>
</DemoBlock>

<DemoBlock Title="表头超长折行" Introduction="通过设置 <code>HeaderTextWrap</code> 使超长表头折行" Name="HeaderTextWrap">
    <p>可以拖动窗口大小，窗口过小时自动出现横向滚动条后，表头会自动折行</p>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" HeaderTextWrap="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="我是超级长的时间表头" />
            <TableColumn @bind-Field="@context.Name" Text="我是超级长的姓名表头" />
            <TableColumn @bind-Field="@context.Address" Text="我是超级长的地址表头" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="单元格数据超长折行示例" Introduction="在某种特殊情况下可能单元格内容比较长，需要进行折行处理" Name="LongData">
    <ul class="ul-demo mb-3">
        <li>可以拖动窗口大小，窗口过小时 <b>地址</b> 列自动进行折行处理</li>
        <li>通过设置 <code>TextWrap</code> 来开启自动换行功能</li>
        <li><b>注意：</b>推荐使用 <code>Width</code> 对列宽度进行设置</li>
    </ul>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
            <TableColumn @bind-Field="@context.Name" Text="姓名" />
            <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextWrap="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="单元格数据超长省略示例" Introduction="在某种特殊情况下可能单元格内容比较长，需要进行省略处理" Name="DataResizing">
    <ul class="ul-demo mb-3">
        <li>可以拖动窗口大小，窗口过小时 <b>地址</b> 列自动进行省略处理</li>
        <li>通过设置 <code>TextEllipsis</code> 来开启文本超长省略功能</li>
        <li><b>注意：</b>推荐使用 <code>Width</code> 对列宽度进行设置，如未设置列宽内部自动使用 200px 宽度</li>
        <li>单元格内文本被省略后，可以通过 <code>ShowTips</code> 属性来控制鼠标悬停是否显示全部文本，默认为 <code>false</code></li>
        <li>拖动地址列，单元格显示内容自动增加与减少</li>
    </ul>
    <Table TItem="Foo" IsBordered="true" IsStriped="true" AllowResizing="true" IsPagination="true"
           OnQueryAsync="OnQueryAsync" PageItemsSource="new int[] {4, 8, 20}">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
            <TableColumn @bind-Field="@context.Name" Text="姓名" />
            <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" ShowTips="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义单元格内排版" Introduction="使用模板对单元格内数据进行特殊布局" Name="CustomCell">
    <Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
            <TableColumn @bind-Field="@context.Name" Text="姓名" />
            <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" ShowTips="true" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete">
                <Template Context="v">
                    <div>
                        <div>状态:@v.Value</div>
                        <div>时间:@v.Row.DateTime)</div>
                    </div>
                </Template>
            </TableColumn>
        </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 Microsoft.JSInterop;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// 折行演示示例代码
/// </summary>
public sealed partial class TablesWrap
{
    [NotNull]
    private IEnumerable<Foo>? CellItems { get; set; }

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

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

        CellItems = Foo.GenerateFoo(Localizer, 4);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        var items = Foo.GenerateFoo(Localizer);

        // 设置记录总数
        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
        });
    }

    /// <summary>
    /// OnAfterRenderAsync 方法
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("$.table_wrap");
        }
    }
}