@page "/displays"

<h3>Display 显示组件</h3>

<h4>显示静态文本数据</h4>

<Block Title="基础用法" Introduction="仅显示">
    <div class="row">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <Display TValue="string" Value="@Model.Name" />
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="通过双向绑定可以自动获取资源文件中的显示标签">
    <p><code>Display</code> 组件开启双向绑定时，会根据绑定的 <code>Model</code> 属性值去自动获取 <code>Display/DisplayName</code> 标签值并且显示为前置 <code>Label</code>，通过 <code>DisplayText</code> 属性可以自定义显示前置标签，或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <div class="form-inline">
        <div class="row">
            <Divider Text="自定义标签" />
            <div class="form-group col-12">
                <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
            </div>
            <div class="form-group col-12">
                <Display @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
            </div>
            <Divider Text="占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
            </div>
            <div class="form-group col-12">
                <Display @bind-Value="@Model.Name" ShowLabel="true" />
            </div>
            <Divider Text="不占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
            </div>
            <div class="form-group col-12">
                <Display @bind-Value="@Model.Name" />
            </div>
        </div>
    </div>
</Block>

<Block Title="泛型绑定" Introduction="<code>Display</code> 组件内置对 <code>枚举</code> <code>集合</code> <code>数组</code> 进行处理，如不符合条件时，请自定义格式化或者回调委托方法">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="集合" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="数组" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Display Value="@DateTime.Now" ShowLabel="true" DisplayText="DateTime" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Display Value="@DateTimeOffset.Now" ShowLabel="true" DisplayText="DateTimeOffset" />
            </div>
        </div>
    </div>
</Block>

<Block Title="表单内使用" Introduction="<code>Display</code> 组件在表单组件 <code>EditorForm</code> 中使用，多用于明细页，不可编辑模式">
    <p><b><code>form-inline form-group</code></b> 模式</p>
    <EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
        <FieldItems>
            <EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
        </FieldItems>
    </EditorForm>

    <p><b><code>form-inline</code></b> 模式</p>
    <div class="form-inline">
        <div class="row">
            <div class="col-12 col-sm-6"><Display @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" /></div>
            <div class="col-12 col-sm-6"><Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" /></div>
        </div>
    </div>
</Block>

<Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时，组件显示的时间格式为年月日">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">FormatString</code></div>
            <div class="form-group col-12 col-sm-6">
                <Display Value="DateTime.Now" FormatString="yyyy-MM-dd" />
            </div>
            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
            <div class="form-group col-12 col-sm-6">
                <Display Value="DateTime.Now" FormatterAsync="@DateTimeFormatter" />
            </div>
        </div>
    </div>
    <p class="mt-3"><code>Display</code> 组件绑定 <code>byte[]</code> 数组，格式化成 <code>base64</code> 编码字符串示例</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">设置 <code class="ml-1">Formatter</code></div>
            <div class="form-group col-12 col-sm-6">
                <Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
            </div>
        </div>
    </div>
</Block>

<Block Title="自动翻译为 Text" Introduction="设置 <code>Data</code> 值为 <code>IEnumerable&lt;SelectedItem&gt;</code> 集合，组件将通过此数据集，进行通过 <code>Value</code> 显示 <code>Text</code> 翻译工作">
    <p>
        <div>本例中组件 <code>Value="@@IntValue"</code> 设置 <code>Data="@@IntValueSource"</code> 组件将 <code>Value</code> 值对应的 <code>Text</code> 显示出来</div>
        <div><b>InitValue</b>: 1,2,3</div>
        <div><b>IntValueSource</b>: Text1,Text2,Text3</div>
    </p>
    <div class="form-inline">
        <div class="row">
            <div class="col-12 col-sm-6">
                <Display Value="@IntValue" Data="@IntValueSource" />
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

// 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 BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.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.Pages
{
    /// <summary>
    /// Display 组件示例
    /// </summary>
    public partial class Displays
    {
        [NotNull]
        private Foo? Model { get; set; }

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

        [NotNull]
        private IEnumerable<SelectedItem>? Hobbys { get; set; }

        private byte[] ByteArray { get; set; } = new byte[] { 0x01, 0x12, 0x34, 0x56 };

        private IEnumerable<int> IntValue { get; set; } = new[] { 1, 2, 3 };

        private IEnumerable<SelectedItem> IntValueSource { get; set; } = new[]
        {
            new SelectedItem("1", "Text1"),
            new SelectedItem("2", "Text2"),
            new SelectedItem("3", "Text3")
        };

        private static async Task<string> ByteArrayFormatter(byte[] source)
        {
            await Task.Delay(10);
            return Convert.ToBase64String(source);
        }

        private static Task<string> DateTimeFormatter(DateTime source) => Task.FromResult(source.ToString("yyyy-MM-dd"));

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

            Model = Foo.Generate(Localizer);
            Model.Hobby = Foo.GenerateHobbys(Localizer).Take(3).Select(i => i.Text);
            Hobbys = Foo.GenerateHobbys(Localizer);
        }

        private static IEnumerable<AttributeItem> GetAttributes() => new[]
        {
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FormatString",
                Description = "数值格式化字符串",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Formatter",
                Description = "TableHeader 实例",
                Type = "RenderFragment<TItem>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}