@page "/swals"
@inject SwalService SwalService

<h3>SweetAlert 弹窗组件</h3>

<h4>模态对话框，多用于动作过程中进行询问后继续，或者显示执行结果</h4>

<Block Title="基础用法" Introduction="通过注入服务调用 <code>Swal</code> 来弹出一个对话框">
    <div class="form-inline">
        <div class="row swal-demo">
            <div class="form-group col-12">
                <div class="text-success">成功</div>
                <div>
                    <div class="swal2-icon swal2-success">
                        <div class="swal2-success-circular-line-left"></div>
                        <span class="swal2-success-line-tip"></span><span class="swal2-success-line-long"></span>
                        <div class="swal2-success-ring"></div><div class="swal2-success-fix"></div>
                        <div class="swal2-success-circular-line-right"></div>
                    </div>
                </div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@(e => OnSwal(SwalCategory.Success))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">失败</div>
                <div>
                    <div class="swal2-icon swal2-error">
                        <span class="swal2-x-mark">
                            <span class="swal2-x-mark-line-left"></span>
                            <span class="swal2-x-mark-line-right"></span>
                        </span>
                    </div>
                </div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Danger" OnClick="@(e => OnSwal(SwalCategory.Error))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">警告</div>
                <div><div class="swal2-icon swal2-warning"></div></div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Warning" OnClick="@(e => OnSwal(SwalCategory.Warning))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">提示</div>
                <div><div class="swal2-icon swal2-info"></div></div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Info" OnClick="@(e => OnSwal(SwalCategory.Information))" />
                </div>
            </div>
            <div class="form-group col-12">
                <div class="text-success">疑问</div>
                <div><div class="swal2-icon swal2-question"></div></div>
                <div>
                    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Secondary" OnClick="@(e => OnSwal(SwalCategory.Question))" />
                </div>
            </div>
        </div>
    </div>
</Block>

<Block Title="设置显示内容" Introduction="通过设置 <code>Title</code> <code>Content</code> 用于显示弹窗标题与内容">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Button Icon="fa fa-fa" Text="Title" Color="Color.Success" OnClick="@ShowTitle" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Button Icon="fa fa-fa" Text="Content" Color="Color.Success" OnClick="@ShowContent" />
            </div>
        </div>
    </div>
</Block>

<Block Title="自定义按钮" Introduction="通过设置 <code>ButtonTemplate</code> 自定义弹窗内按钮">
    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@ShowButtons" />
</Block>

<Block Title="显示自定义组件" Introduction="通过设置 <code>Component</code> 弹窗内容为自定义组件">
    <Button Icon="fa fa-fa" Text="弹窗" Color="Color.Success" OnClick="@ShowComponent" />
</Block>

<Block Title="模态对话框" Introduction="通过调用 <code>await SwalService.ShowModal</code> 方法弹出模态框，点击弹窗内按钮关闭弹窗后，后续代码继续执行">
    <p>本示例代码通过调用 <code>await SwalService.ShowModal</code> 方法弹出模态框，只有关闭弹窗后，后续代码才继续执行</p>
    <p><code>IsConfirm</code> 参数表示弹窗为确认窗口，自动生成 <code>取消</code> <code>确认</code> 两个按钮</p>
    <Pre class="no-highlight">var ret = await SwalService.ShowModal(op);

// ShowModal 返回后下面代码才执行
Trace?.Log($"模态弹窗返回值为：{ret}");
</Pre>
    <Button Icon="fa fa-fa" Text="模态对话框" Color="Color.Success" OnClick="@ShowModal" />

    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="显示 Footer 信息" Introduction="通过设置 <code>FooterTemplate</code> 自定义 Footer 模板">
    <p>参数 <code>ShowFooter</code> 默认为 <code>false</code> 不显示页脚模板，需要显示设置为 <code>true</code></p>
    <Button Icon="fa fa-fa" Text="带 Footer 弹窗" Color="Color.Success" OnClick="@ShowFooterComponent" />
</Block>

<Block Title="自动关闭功能" Introduction="通过设置 <code>IsAutoHide</code> <code>Delay</code> 属性，自定义自动关闭时间">
    <p>
        参数 <code>IsAutoHide</code> 默认为 <code>false</code> 不启用自动关闭功能
        <br />
        参数 <code>Delay</code> 默认为 4000 毫秒
    </p>
    <Button Icon="fa fa-fa" Text="自动关闭弹窗" Color="Color.Success" OnClick="@ShowAutoCloseSwal" />
</Block>

<Tips class="mt-3">
    <p>
        需要在使用本组件的页面中内置 <code>SweetAlert</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：
    </p>
</Tips>

<Pre>&lt;SweetAlert /&gt;</Pre>

<SweetAlert />

<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.AspNetCore.Components.Web;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class SweetAlerts
    {
        private Task OnSwal(SwalCategory cate) => SwalService.Show(new SwalOption()
        {
            Category = cate,
            Title = "Sweet 弹窗"
        });

        private Task ShowTitle() => SwalService.Show(new SwalOption()
        {
            Category = SwalCategory.Success,
            Title = "我是 Title"
        });

        private Task ShowContent() => SwalService.Show(new SwalOption()
        {
            Category = SwalCategory.Success,
            Content = "我是 Content"
        });

        private async Task ShowButtons()
        {
            var op = new SwalOption()
            {
                Category = SwalCategory.Success,
                Title = "我是 Title",
                Content = "我是 Content",
                ShowClose = false
            };
            op.ButtonTemplate = new RenderFragment(builder =>
            {
                builder.OpenComponent<Button>(0);
                builder.AddAttribute(1, nameof(Button.Text), "自定义关闭按钮");
                builder.AddAttribute(2, nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, async () => await op.Close()));
                builder.CloseComponent();
            });
            await SwalService.Show(op);
        }

        private async Task ShowComponent()
        {
            var op = new SwalOption()
            {
                BodyTemplate = new RenderFragment(builder =>
                {
                    builder.OpenElement(0, "div");
                    builder.AddAttribute(1, "class", "text-center");
                    builder.OpenComponent<Counter>(2);
                    builder.CloseComponent();
                    builder.CloseElement();
                })
            };
            await SwalService.Show(op);
        }

        private async Task ShowFooterComponent()
        {
            var op = new SwalOption()
            {
                Category = SwalCategory.Error,
                Title = "Oops...",
                Content = "Something went wrong!",
                ShowFooter = true,
                FooterTemplate = DynamicComponent.CreateComponent<SwalFooter>().Render()
            };
            await SwalService.Show(op);
        }

        private async Task ShowAutoCloseSwal()
        {
            var op = new SwalOption()
            {
                Category = SwalCategory.Error,
                Title = "Oops...",
                Content = "Something went wrong!",
                ShowFooter = true,
                IsAutoHide = true,
                Delay = 4000,
                FooterTemplate = DynamicComponent.CreateComponent<SwalFooter>().Render()
            };
            await SwalService.Show(op);
        }

        private Logger? Trace { get; set; }

        private async Task ShowModal()
        {
            var op = new SwalOption()
            {
                Title = "模态对话框示例",
                Content = "模态对话框内容，不同按钮返回不同值",
                IsConfirm = true
            };
            var ret = await SwalService.ShowModal(op);

            Trace?.Log($"模态弹窗返回值为：{ret}");
        }

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "Category",
                    Description = "弹出框类型",
                    Type = "SwalCategory",
                    ValueList = "Success/Error/Information/Warning/Question",
                    DefaultValue = "Success"
                },
                new AttributeItem() {
                    Name = "Title",
                    Description = "弹窗标题",
                    Type = "string",
                    ValueList = "—",
                    DefaultValue = ""
                },
                new AttributeItem() {
                    Name = "Cotent",
                    Description = "弹窗内容",
                    Type = "string",
                    ValueList = "—",
                    DefaultValue = ""
                },
                new AttributeItem() {
                    Name = "Delay",
                    Description = "自动隐藏时间间隔",
                    Type = "int",
                    ValueList = "—",
                    DefaultValue = "4000"
                },
                new AttributeItem() {
                    Name = "IsAutoHide",
                    Description = "是否自动隐藏",
                    Type = "boolean",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "ShowClose",
                    Description = "是否显示关闭按钮",
                    Type = "boolean",
                    ValueList = "true|false",
                    DefaultValue = "true"
                },
                new AttributeItem() {
                    Name = "ShowFooter",
                    Description = "是否显示页脚模板",
                    Type = "boolean",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "IsConfirm",
                    Description = "是否为确认弹窗模式",
                    Type = "boolean",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "KeepChildrenState",
                    Description = "是否保持弹窗内组件状态",
                    Type = "boolean",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "BodyContext",
                    Description = "弹窗传参",
                    Type = "object",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "BodyTemplate",
                    Description = "模态主体显示组件",
                    Type = "RenderFragment",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "FooterTemplate",
                    Description = "模态主体页脚组件",
                    Type = "RenderFragment",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem() {
                    Name = "ButtonTemplate",
                    Description = "模态按钮模板",
                    Type = "RenderFragment",
                    ValueList = " — ",
                    DefaultValue = " — "
                }
            };
        }
    }
}