@page "/dialogs"

<h3>Dialog 对话框组件</h3>

<h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>

<p>组件使用介绍：</p>

<p class="code-label">1. 注入服务 <code>DialogService</code></p>
<Pre>@inject DialogService DialogService</Pre>
<Pre>[Inject]
[NotNull]
private DialogService? DialogService { get; set; }
</Pre>
<p class="code-label">2. 调用其实例 <code>api</code></p>
<Pre>var op = new DialogOption()
{
    Title = "数据查询窗口",
    ShowFooter = false,
    BodyContext = DataPrimaryId
};
op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
{
    [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
});
await DialogService.Show(op);</Pre>

<DemoBlock Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" Name="Keyboard">
    <div>
        <p>通过设置 <code>DialogOption</code> <code>IsKeyboard</code> 参数，开启弹窗是否支持 <kbd>ESC</kbd>，请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p>
        <Button OnClick="@OnClick">点击打开 Dialog</Button>
        <Button OnClick="@OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
    </div>
</DemoBlock>

<DemoBlock Title="自定义标题栏" Introduction="通过设置 <code>HeaderTemplate</code> 属性对模态框标题栏进行自定义设置" Name="CustomerHeader">
    <div>
        <Button OnClick="@OnCustomerHeaderClick" Text="弹窗" />
    </div>
</DemoBlock>

<DemoBlock Title="弹出复杂组件" Introduction="通过调用 <code>Show<Counter>()</code> 来弹出一个自定义组件" Name="Component">
    <p>
        本例中弹出对话框中包含一个示例网站的自带 <code>Counter</code> 组件
    </p>
    <Button @onclick="@OnClickCounter">点击打开 Dialog</Button>
</DemoBlock>

<DemoBlock Title="弹窗传参" Introduction="通过设置 <code>BodyContext</code> 属性值，可以把参数传递给弹窗中的组件内" Name="BodyContext">
    <p>
        本例中点击按钮时设置 <code>BodyContext</code> 值为 <code>我是传参</code>，弹窗内容为自定义组件 <code>DemoComponent</code>，组件内通过级联参数获取到其值
    </p>
    <Button @onclick="@OnClickParameter">Dialog 传参示例</Button>
</DemoBlock>

<DemoBlock Title="实战应用" Introduction="本例中通过传递一个主键，在弹窗内的组件通过此主键进行数据查询，并将结果显示在弹窗内" Name="Apply">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select @bind-Value="@DataPrimaryId" DisplayText="主键参数" ShowLabel="true">
                <Options>
                    <SelectOption Text="1" Value="1"></SelectOption>
                    <SelectOption Text="2" Value="2"></SelectOption>
                    <SelectOption Text="3" Value="3"></SelectOption>
                    <SelectOption Text="4" Value="4"></SelectOption>
                    <SelectOption Text="5" Value="5"></SelectOption>
                    <SelectOption Text="6" Value="6"></SelectOption>
                    <SelectOption Text="7" Value="7"></SelectOption>
                    <SelectOption Text="8" Value="8"></SelectOption>
                    <SelectOption Text="9" Value="9"></SelectOption>
                    <SelectOption Text="10" Value="10"></SelectOption>
                </Options>
            </Select>
        </div>
        <div class="col-12 col-sm-6 align-self-end">
            <Button @onclick="@OnClickShowDataById">弹窗</Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="代码关闭弹窗" Introduction="本例讲解如何通过代码打开与关闭弹窗" Name="CloseDialogByCode">
    <p>利用弹窗参数 <code>DialogOption</code> 实例，弹窗弹出后实例中的 <code>Dialog</code> 属性值即为当前弹窗句柄，通过调用其 <code>Toggle/Close</code> 方法即可关闭弹窗</p>

    <Button @onclick="@Show">Dialog</Button>
</DemoBlock>

<DemoBlock Title="禁用 Header 中的关闭按钮" Introduction="本例讲解如何通过代码打开与关闭弹窗" Name="DisableHeaderCloseButton">
    <p>设置参数 <code>ShowHeaderCloseButton</code> 禁止弹窗 <code>Header</code> 右侧显示 <b>关闭</b> 按钮</p>

    <Button @onclick="@ShowNoHeaderCloseButtonDialog">Dialog</Button>
</DemoBlock>

<DemoBlock Title="多级弹窗" Introduction="点击弹窗内部按钮继续弹出对话窗" Name="MultipleDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出对话窗</li>
        <li>切换弹窗内 <code>Tab</code> 组件的第三个标签页 <b>角色管理</b></li>
        <li>点击标签页中的弹窗继续弹出对话框</li>
        <li>关闭当前对话框后之前打开的对话框 <b>保持状态</b></li>
    </ul>

    <Button OnClick="@ShowDialogLoop">弹窗</Button>
</DemoBlock>

<DemoBlock Title="模态对话框" Introduction="通过 <code>ShowModal</code> 方法弹出线程阻塞模式的对话框" Name="ModalDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出模态弹窗</li>
        <li>更改模态弹窗内数值点击 <code>确认</code> 按钮时数值 <b>更新</b></li>
        <li>更改模态弹窗内数值点击 <code>取消</code> 或者 <code>关闭</code> 按钮时数值 <b>不更新</b></li>
        <li>再次点击弹出模态弹窗时，数值保持一致</li>
    </ul>
    <Button OnClick="@OnResultDialogClick">点击打开 Dialog</Button>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="编辑对话框" Introduction="通过 <code>ShowEditDialog</code> 方法弹出保存对话框" Name="EditDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出编辑弹窗</li>
        <li>通过 <code>EditDialogOption</code> 参数对弹窗进行设置</li>
        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成带客户端验证的表单窗口</li>
    </ul>
    <Button OnClick="@OnEditDialogClick">编辑弹窗</Button>
</DemoBlock>

<DemoBlock Title="搜索对话框" Introduction="通过 <code>ShowSearchDialog</code> 方法弹出保存对话框" Name="SearchDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出搜索弹窗</li>
        <li>通过 <code>SearchDialogOption</code> 参数对弹窗进行设置</li>
        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成搜索窗口</li>
    </ul>
    <Button OnClick="@OnSearchDialogClick">搜索弹窗</Button>
</DemoBlock>

<DemoBlock Title="保存对话框" Introduction="通过 <code>ShowSaveDialog</code> 方法弹出保存对话框" Name="SaveDialog">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出保存弹窗</li>
        <li>设计出发点通过给定 <code>TComponent</code> 自动生成保存窗口，通过设置 <code>saveCallback</code> 在保存回调方法中进行数据处理，<code>TComponent</code> 泛型组件所需要参数可以通过 <code>parameters</code> 进行传递</li>
    </ul>
    <Button OnClick="@OnSaveDialogClick">保存弹窗</Button>
</DemoBlock>

<DemoBlock Title="对话框大小" Introduction="通过设置 <code>Size</code> <code>FullScreenSize</code> 参数组合可以实现非常灵活的窗体大小控制" Name="ModalDialog">
    <Button OnClick="@OnSizeDialogClick">全屏弹窗(< 1200px)</Button>
</DemoBlock>

<DemoBlock Title="打印按钮" Introduction="通过设置 <code>ShowPrintButton</code> 使 <code>Header</code> 上显示一个打印预览按钮" Name="PrintDialog">
    <p>通过设置 <code>@nameof(DialogOption.PrintButtonText)</code> 更改 <b>打印预览</b> 按钮文字</p>
    <Button OnClick="@OnPrintDialogClick">点击打开 Dialog</Button>
</DemoBlock>

<DemoBlock Title="全屏弹窗" Introduction="通过设置 <code>ShowMaximizeButton</code> 使 <code>Header</code> 上显示一个窗口最大化按钮" Name="PrintDialog">
    <Button OnClick="@OnMaximizeDialogClick">点击打开 Dialog</Button>
</DemoBlock>

<DemoBlock Title="实战演练" Introduction="模拟一个邮件应用，弹窗选择收件人后填入下方的收件人框。" Name="Email">
    <p>功能介绍</p>
    <ul class="ul-demo mb-3">
        <li>点击按钮弹出模态弹窗</li>
        <li>通过级联传参 <code>BodyContext</code> 传递 <b>10</b> 到弹窗中初始化数据</li>
        <li>选中 <code>Table</code> 组件中的行数据，通过双向绑定对 <code>SelectedRows</code> 数据进行 <b>更新</b></li>
        <li>点击 <b>选中</b> 按钮通过双向绑定对 <code>Emails</code> 数据进行 <b>更新</b></li>
        <li>点击 <code>取消</code> 或者 <code>关闭</code> 按钮时 <code>Emails</code> 值 <b>不更新</b></li>
        <li>再次点击弹出模态弹窗时，组件内行选中状态保持一致</li>
        <li>弹窗中未选择用户时禁止关闭弹窗</li>
    </ul>
    <label class="form-label">收件人：</label>
    <div class="input-group">
        <BootstrapInput PlaceHolder="请输入 ..." Value="@InputValue"></BootstrapInput>
        <Button Icon="fa fa-vcard-o" OnClick="@OnEmailButtonClick"></Button>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="DialogOption 属性" />

// 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.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.Localization;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 弹窗组件示例代码
/// </summary>
public sealed partial class Dialogs
{
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 获得 弹窗注入服务
    /// </summary>
    [Inject]
    [NotNull]
    private DialogService? DialogService { get; set; }

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

    private bool IsKeyboard { get; set; }

    private void OnClickKeyboard()
    {
        IsKeyboard = !IsKeyboard;
    }

    private async Task TriggerUpdateBodyAsync(string val)
    {
        if (BodyFooComponent != null)
        {
            await BodyFooComponent.UpdateAsync(val);
        }
    }

    private DialogBodyFoo? BodyFooComponent { get; set; }

    private Task OnCustomerHeaderClick() => DialogService.Show(new DialogOption()
    {
        HeaderTemplate = BootstrapDynamicComponent.CreateComponent<DialogHeaderFoo>(new Dictionary<string, object?>
        {
            [nameof(DialogHeaderFoo.OnValueChanged)] = new Func<string, Task>(val => TriggerUpdateBodyAsync(val))
        }).Render(),
        BodyTemplate = builder =>
        {
            builder.OpenComponent<DialogBodyFoo>(0);
            builder.AddComponentReferenceCapture(1, obj => BodyFooComponent = (DialogBodyFoo)obj);
            builder.CloseComponent();
        },
    });

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private Task OnClick() => DialogService.Show(new DialogOption()
    {
        IsKeyboard = IsKeyboard,
        Title = "我是服务创建的弹出框",
        BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.ChildContent)] = new RenderFragment(builder => builder.AddContent(0, "我是服务创建的按钮"))
        })
        .Render()
    });

    private async Task Show()
    {
        var option = new DialogOption()
        {
            Title = "利用代码关闭弹出框",
        };
        option.BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.Text)] = "点击关闭弹窗",
            [nameof(Button.OnClick)] = EventCallback.Factory.Create<MouseEventArgs>(this, async () => await option.Dialog.Close())
        }).Render();
        await DialogService.Show(option);
    }

    private async Task ShowNoHeaderCloseButtonDialog()
    {
        var option = new DialogOption()
        {
            Title = "Header 中无关闭按钮",
            ShowHeaderCloseButton = false
        };
        option.BodyTemplate = BootstrapDynamicComponent.CreateComponent<Button>(new Dictionary<string, object?>
        {
            [nameof(Button.Text)] = "点击关闭弹窗",
            [nameof(Button.OnClick)] = EventCallback.Factory.Create<MouseEventArgs>(this, async () => await option.Dialog.Close())
        }).Render();
        await DialogService.Show(option);
    }

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private Task OnClickCounter() => DialogService.Show(new DialogOption()
    {
        Title = "自带的 Counter 组件",
        Component = BootstrapDynamicComponent.CreateComponent<Counter>()
    });

    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private Task OnClickParameter() => DialogService.Show(new DialogOption()
    {
        Title = "自带的 Counter 组件",
        BodyContext = "我是传参",
        BodyTemplate = builder =>
        {
            var index = 0;
            builder.OpenComponent<DemoComponent>(index++);
            builder.CloseComponent();
        }
    });

    private int DataPrimaryId { get; set; } = 1;

    private async Task OnClickShowDataById()
    {
        var op = new DialogOption()
        {
            Title = "数据查询窗口",
            ShowFooter = false,
            BodyContext = DataPrimaryId
        };
        op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
        {
            [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
        }).Render();

        await DialogService.Show(op);
    }

    private int DemoValue1 { get; set; } = 1;
    private async Task OnResultDialogClick()
    {
        var result = await DialogService.ShowModal<ResultDialogDemo>(new ResultDialogOption()
        {
            Title = "带返回值模态弹出框",
            ComponentParamters = new Dictionary<string, object>
            {
                [nameof(ResultDialogDemo.Value)] = DemoValue1,
                [nameof(ResultDialogDemo.ValueChanged)] = EventCallback.Factory.Create<int>(this, v => DemoValue1 = v)
            }
        });

        Trace.Log($"弹窗返回值为: {result} 组件返回值为: {DemoValue1}");
    }

    private Task OnSizeDialogClick() => DialogService.Show(new DialogOption()
    {
        Title = "全屏窗口",
        FullScreenSize = FullScreenSize.ExtraLarge,
        BodyTemplate = builder => builder.AddContent(0, "屏幕小于 1200px 时全屏显示")
    });

    private async Task OnPrintDialogClick()
    {
        var op = new DialogOption()
        {
            Title = "数据查询窗口",
            ShowPrintButton = true,
            ShowPrintButtonInHeader = true,
            ShowFooter = false,
            BodyContext = DataPrimaryId
        };
        op.BodyTemplate = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
        {
            [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
        }).Render();

        await DialogService.Show(op);
    }

    private async Task OnMaximizeDialogClick()
    {
        await DialogService.Show(new DialogOption()
        {
            Title = $"可控制最大化弹窗",
            ShowMaximizeButton = true,
            BodyTemplate = builder =>
            {
                builder.AddContent(0, "点击 Header 中最大化按钮弹窗可全屏");
            }
        });
    }

    private string? InputValue { get; set; }

    private IEnumerable<string> Emails { get; set; } = Array.Empty<string>();

    private async Task OnEmailButtonClick()
    {
        var result = await DialogService.ShowModal<ResultDialogDemo2>(new ResultDialogOption()
        {
            Title = "选择收件人",
            BodyContext = new ResultDialogDemo2.FooContext() { Count = 10, Emails = InputValue },
            ButtonYesText = "选择",
            ButtonYesIcon = "fa fa-search",
            ComponentParamters = new Dictionary<string, object>
            {
                // 用于初始化已选择的用户邮件
                [nameof(ResultDialogDemo2.Emails)] = Emails,
                [nameof(ResultDialogDemo2.EmailsChanged)] = EventCallback.Factory.Create<IEnumerable<string>>(this, v => Emails = v)
            }
        });

        if (result == DialogResult.Yes)
        {
            InputValue = string.Join(";", Emails);
        }
    }

    private async Task ShowDialogLoop()
    {
        await DialogService.Show(new DialogOption()
        {
            Title = $"弹窗 {DateTime.Now}",
            Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
        });
    }

    private async Task OnEditDialogClick()
    {
        var option = new EditDialogOption<Foo>()
        {
            Title = "编辑弹窗",
            Model = new Foo(),
            RowType = RowType.Inline,
            ItemsPerRow = 2,
            ItemChangedType = ItemChangedType.Update
        };
        await DialogService.ShowEditDialog(option);
    }

    private async Task OnSearchDialogClick()
    {
        var option = new SearchDialogOption<Foo>()
        {
            Title = "搜索弹窗",
            Model = new Foo(),
            RowType = RowType.Inline,
            ItemsPerRow = 2,
        };
        await DialogService.ShowSearchDialog(option);
    }

    private async Task OnSaveDialogClick()
    {
        var foo = Foo.Generate(Localizer);
        await DialogService.ShowSaveDialog<DialogSaveDetail>("保存", () =>
        {
            // 此处可以访问 foo 实例进行入库操作等
            return Task.FromResult(true);
        }, parameters =>
        {
            parameters.Add(nameof(DialogSaveDetail.Value), foo);
        });
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = "Component",
            Description = "对话框 Body 中引用的组件的参数",
            Type = "DynamicComponent",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyContext",
            Description = "弹窗传参",
            Type = "object",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "HeaderTemplate",
            Description = "模态主体 ModalHeader 模板",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "BodyTemplate",
            Description = "模态主体 ModalBody 组件",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "FooterTemplate",
            Description = "模态底部 ModalFooter 组件",
            Type = "RenderFragment",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "IsCentered",
            Description = "是否垂直居中",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "IsScrolling",
            Description = "是否弹窗正文超长时滚动",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "ShowCloseButton",
            Description = "是否显示关闭按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowHeaderCloseButton",
            Description = "是否显示标题栏右侧关闭按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = "ShowFooter",
            Description = "是否显示 Footer",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "true"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowPrintButton),
            Description = "是否显示打印按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowPrintButtonInHeader),
            Description = "打印按钮是否显示在 Header 中",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Size",
            Description = "尺寸",
            Type = "Size",
            ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
            DefaultValue = "Large"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.FullScreenSize),
            Description = "小于特定尺寸时全屏",
            Type = "Size",
            ValueList = "None / Always / Small / Medium / Large / ExtraLarge",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "弹窗标题",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " 未设置 "
        },
        new AttributeItem() {
            Name = nameof(DialogOption.PrintButtonText),
            Description = "打印按钮显示文字",
            Type = "string",
            ValueList = " — ",
            DefaultValue = "资源文件中设定值"
        },
        new AttributeItem() {
            Name = nameof(DialogOption.ShowMaximizeButton),
            Description = "是否显示最大化按钮",
            Type = "boolean",
            ValueList = "true|false",
            DefaultValue = "false"
        }
    };
}