@page "/validateforms"

<h3>ValidateForm 表单组件</h3>

<h4>可供数据合规检查的表单组件</h4>

<Block Title="基础用法" Introduction="放置到 <code>ValidateForm</code> 中的组件提交时自动进行数据合规检查">
    <p>组件说明：</p>
    <ul class="ul-demo">
        <li><code>ValidateForm</code> 组件支持异步设置 <code>Model</code> 值</li>
        <li>表单事件为 <code>OnValidSubmit</code> <code>OnInvalidSubmit</code></li>
        <li><code>Model</code> 参数为必填项不允许为空</li>
        <li>表单内可以放置多个按钮，通过设置 <code>ButtonType="ButtonType.Submit"</code> 参数是否提交表单</li>
        <li>客户端验证机制支持模型的 <code>Required</code> 标签，通过设置 <code>ErrorMessage</code> 参数设置提示信息，未设置时使用默认的英文提示信息</li>
        <li>表单默认检查表单内绑定字段值是否合法，如需要检查模型所有字段时可设置 <code>ValidateAllProperties</code> 属性值为 <code>true</code></li>
        <li>通过设置提交按钮 <code>Button</code> 属性 <code>IsAsync</code> 值，设置异步提交表单</li>
    </ul>
    <p>注意事项：</p>
    <ul class="ul-demo">
        <li>
            表单内组件通常用法都是使用双向绑定技术对 <code>Model</code> 的属性值进行双向绑定，当其值改变时会导致所在组件 <code>StateHasChanged</code>
            方法被调用，即其所在组件或者页面进行刷新重新渲染
        </li>
    </ul>
    <div class="form-demo">
        <ValidateForm Model="@Model" OnInvalidSubmit="@OnInvalidSubmit1"
                      OnValidSubmit="@OnValidSubmit1">
            <div class="row g-3">
                <div class="col-12">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="col-12">
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-fw fa-save" Text="提交表单" IsAsync="true" />
                </div>
            </div>
        </ValidateForm>
        <BlockLogger @ref="Trace" class="mt-3" />
    </div>
</Block>

<Block Title="内置组件" Introduction="放置支持表单组件到 <code>ValidateForm</code> 中">
    <div class="form-demo">
        <label class="legend">支持表单验证的组件示例</label>
        <p>示例说明</p>
        <ul>
            <li>姓名为字符串类型</li>
            <li>年龄为整数类型</li>
            <li>生日为时间类型</li>
            <li>教育为枚举类型</li>
            <li>爱好为集合类型</li>
        </ul>
        <p>本例中通过设置 <b>提交按钮</b> 属性 <code>IsAsync</code> 来异步提交表单，点击提交后禁用自身，异步操作完毕后恢复</p>
        <ValidateForm Model="@Model" OnValidSubmit="@OnValidSubmit"
                      OnInvalidSubmit="@OnInvalidSubmit">
            <div class="row g-3">
                <div class="col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="col-12 col-sm-6">
                    <BootstrapInputNumber @bind-Value="@Model.Count" />
                </div>
                <div class="col-12 col-sm-6">
                    <DateTimePicker @bind-Value="@Model.DateTime" />
                </div>
                <div class="col-12 col-sm-6">
                    <Select @bind-Value="@Model.Education" />
                </div>
                <div class="col-12">
                    <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
                </div>
                <div class="col-12">
                    <Button ButtonType="@ButtonType.Submit" Icon="fa fa-fw fa-save" IsAsync="true" Text="提交表单" />
                </div>
            </div>
        </ValidateForm>
        <BlockLogger @ref="Trace2" class="mt-3" />
    </div>
</Block>

<Block Title="自定义显示错误信息" Introduction="通过调用 <code>SetError</code> 方法设置自定义错误信息">
    <p>
        <b>应用场景</b>
        <div>
            客户端验证通过后进行数据库保存操作，如果出现其他问题，后仍然可以进行表单自定义错误提示，本例中数据验证合法后，点击 <code>提交表单</code> 按钮后，姓名字段会显示 <code>数据库中已存在</code>
            这样的自定义提示信息
        </div>
    </p>
    <ValidateForm @ref="FooForm" Model="@Model" OnValidSubmit="@OnValidSetError">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="验证所有字段值" Introduction="此组件默认检查表单内模型绑定字段值，如需要检查模型所有字段值时设置 <code>ValidateAllProperties</code> 值">
    <p>
        本例中未放置 <code>Address</code>，由于设置 <code>ValidateAllProperties</code> 参数值为 <code>true</code>，所以
        <code>Address</code> 字段仍然被检查，及时表单内所有数据均合法后，提交数据时仍然触发 <code>OnInvalidSubmit</code> 回调委托
    </p>
    <ValidateForm Model="@Model" OnInvalidSubmit="@OnInvalidSubmitAddress"
                  ValidateAllProperties="true">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <Select @bind-Value="@Model.Education" />
            </div>
            <div class="col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace3" class="mt-3" />
</Block>

<Block Title="复杂类型支持" Introduction="支持任意复杂类型的绑定与验证">
    <p>
        本示例中第二个绑定的是一个超级复杂类型 <code>ComplexModel.Dummy.Dummy2.Name</code> 清空值后，点击 <b>提交表单</b> 会对数据进行验证。第二个文本框验证合规后，通过调用
        <code>SetError</code> 再次显示错误提示
    </p>
    <Pre>ComplexForm.SetError("Dummy.Dummy2.Name", "数据库中已存在");</Pre>
    <ValidateForm @ref="ComplexForm" Model="@ComplexModel" OnInvalidSubmit="@OnInvalidComplexModel"
                  OnValidSubmit="@OnValidComplexModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Name" />
            </div>
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Dummy.Dummy2.Name" />
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace4" class="mt-3" />
</Block>

<Block Title="动态调整表单内组件" Introduction="通过代码更改表单内组件，验证表单仍然可以正确的进行验证">
    <p>
        点击 <b>更改组件</b> 按钮后 <code>地址</code> 组件变更为 <code>数量</code> 组件，<b>重置组件</b> 按钮恢复，<code>姓名</code> <code>地址</code>
        组件为必填项，<code>数量</code> 组件有默认值 <code>0</code> 所以可以通过数据检查
    </p>
    <ValidateForm Model="@DynamicModel" OnInvalidSubmit="@OnInvalidDynamicModel"
                  OnValidSubmit="@OnValidDynamicModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <BootstrapInput @bind-Value="@DynamicModel.Name" />
            </div>
            <div class="col-12 col-sm-6">
                @if (ShowAddress)
                {
                    <BootstrapInput @bind-Value="@DynamicModel.Address" />
                }
                else
                {
                    <BootstrapInput @bind-Value="@DynamicModel.Count" />
                }
            </div>
            <div class="col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
                <Button Text="更改组件" OnClick="OnValidateChange" class="ms-3" />
                <Button Text="重置组件" OnClick="OnValidateReset" class="ms-3" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace5" class="mt-3" />
</Block>

<Block Title="表单内设置组件标签右对齐" Introduction="通过样式统一设置全站或者特定表单内标签对齐方式">
    <ValidateForm Model="@Model">
        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right">
            <FieldItems>
                <EditorItem @bind-Field="@context.Hobby" Data="@Hobbys" />
            </FieldItems>
        </EditorForm>
    </ValidateForm>
</Block>

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

<MethodTable Items="@GetMethods()" />

// 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.AspNetCore.Components.Forms;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    ///
    /// </summary>
    public partial class ValidateForms
    {
        [NotNull]
        private BlockLogger? Trace { get; set; }

        [NotNull]
        private BlockLogger? Trace2 { get; set; }

        [NotNull]
        private BlockLogger? Trace3 { get; set; }

        [NotNull]
        private BlockLogger? Trace4 { get; set; }

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

        [NotNull]
        private Foo? Model { get; set; }

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

        [NotNull]
        private ValidateForm? FooForm { get; set; }

        [NotNull]
        private ValidateForm? ComplexForm { get; set; }

        [NotNull]
        private ComplexFoo? ComplexModel { get; set; }

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

            // 切换线程 模拟异步通过 webapi 加载数据
            await Task.Yield();

            Model = new() { Name = "Name", Education = EnumEducation.Primary, DateTime = DateTime.Now };

            // 初始化参数
            Hobbys = Foo.GenerateHobbys(LocalizerFoo);
            ComplexModel = new ComplexFoo()
            {
                Dummy = new Dummy1() { Dummy2 = new Dummy2() },
            };
        }

        private Task OnInvalidSubmit1(EditContext context)
        {
            Trace.Log("OnInvalidSubmit 回调委托: 验证未通过");
            return Task.CompletedTask;
        }

        private async Task OnValidSubmit1(EditContext context)
        {
            await Task.Delay(1000);
            Trace.Log("OnValidSubmit 回调委托: 验证通过");
        }

        private async Task OnValidSubmit(EditContext context)
        {
            Trace2.Log("OnValidSubmit 回调委托: Starting ...");
            await Task.Delay(3000);
            Trace2.Log("OnValidSubmit 回调委托: Done!");
        }

        private Task OnInvalidSubmit(EditContext context)
        {
            Trace2.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnInvalidSubmitAddress(EditContext context)
        {
            Trace3.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnInvalidComplexModel(EditContext context)
        {
            Trace4.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnValidComplexModel(EditContext context)
        {
            Trace4.Log("OnValidSubmit 回调委托");
            ComplexForm.SetError("Dummy.Dummy2.Name", "数据库中已存在");
            return Task.CompletedTask;
        }

        private Task OnValidSetError(EditContext context)
        {
            FooForm.SetError<Foo>(f => f.Name, "数据库中已存在");
            return Task.CompletedTask;
        }

        #region 动态更改表单内验证组件
        [NotNull]
        private BlockLogger? Trace5 { get; set; }

        private bool ShowAddress { get; set; }

        private Foo DynamicModel { get; set; } = new Foo();

        private Task OnInvalidDynamicModel(EditContext context)
        {
            Trace5.Log("OnInvalidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private Task OnValidDynamicModel(EditContext context)
        {
            Trace5.Log("OnValidSubmit 回调委托");
            return Task.CompletedTask;
        }

        private void OnValidateChange()
        {
            ShowAddress = true;
        }

        private void OnValidateReset()
        {
            ShowAddress = false;
        }
        #endregion

        private class ComplexFoo : Foo
        {
            [NotNull]
            public Dummy1? Dummy { get; set; }
        }

        private class Dummy1
        {
            [NotNull]
            public Dummy2? Dummy2 { get; set; }
        }

        private class Dummy2
        {
            [Required]
            public string? Name { get; set; }
        }

        #region 参数说明
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Model",
                Description = "表单组件绑定的数据模型，必填属性",
                Type = "object",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ValidateAllProperties",
                Description = "是否检查所有字段",
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowRequiredMark",
                Description = "表单内必填项是否显示 * 标记",
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "子组件模板实例",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnValidSubmit",
                Description = "表单提交时数据合规检查通过时的回调委托",
                Type = "EventCallback<EditContext>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnInvalidSubmit",
                Description = "表单提交时数据合规检查未通过时的回调委托",
                Type = "EventCallback<EditContext>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<MethodItem> GetMethods() => new MethodItem[]
        {
            new MethodItem()
            {
                Name = "SetError",
                Description="设置验证失败方法",
                Parameters ="PropertyName, ErrorMessage",
                ReturnValue = " — "
            }
        };
        #endregion
    }
}