@page "/popconfirms"

<h3>Popconfirm 气泡确认框</h3>

<h4>点击元素，弹出气泡确认框。</h4>

<DemoBlock Title="基础用法" Introduction="<code>Popconfirm</code> 的属性与 <code>Popover</code> 很类似，因此对于重复属性，请参考 <a href='/popovers'><code>Popover</code><a> 的文档，在此文档中不做详尽解释。" Name="Normal">
    <div class="d-flex justify-content-center border p-3 rounded">
        <div class="d-flex flex-column w-100" style="height: 240px;">
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Bottom" ConfirmButtonColor="Color.Danger" Text="下面弹框" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-between m-4 align-items-center flex-fill">
                <PopConfirmButton Placement="Placement.Right" Text="右侧弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
                <PopConfirmButton Placement="Placement.Left" Text="左侧弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Top" Text="上面弹窗" Content="这是一段内容确定删除吗？" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
        </div>
    </div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Content 更改确认弹窗显示文字" Introduction="通过设置<code>Content</code> 属性更改确认弹窗显示文字" Name="Content">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa fa-exclamation-triangle text-danger" ConfirmButtonColor="Color.Danger" Text="删除确认按钮" Content="确定删除数据吗？" />
</DemoBlock>

<DemoBlock Title="异步确认" Introduction="通过设置<code>IsAsync</code> 属性点击确认按钮时异步进行数据提交" Name="IsAsync">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa fa-exclamation-triangle text-danger"
                      ConfirmButtonColor="Color.Danger" Text="异步确认" Content="确定删除数据吗？" Icon="fa fa-fa fa-fw" IsAsync="true"
                      OnConfirm="OnAsyncConfirm" />
</DemoBlock>

<DemoBlock Title="表单提交" Introduction="通过设置<code>ButtonType</code> 属性值为 <code>ButtonType.Submit</code> 使确认确认按钮点击后进行异步表单数据提交" Name="Form">
    <ValidateForm Model="@Model" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInValidSubmit">
        <div class="row g-3 form-inline">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="col-12">
                <PopConfirmButton Placement="Placement.Top" Color="Color.Primary" ConfirmIcon="fa fa-exclamation-triangle text-info"
                                  ConfirmButtonColor="Color.Success" Text="提交表单" Content="确定提交数据吗？" Icon="fa fa-save fa-fw"
                                  ButtonType="ButtonType.Submit" IsAsync="true" OnConfirm="OnAsyncSubmit" />
            </div>
        </div>
    </ValidateForm>
    <BlockLogger @ref="Trace1" class="mt-3" />
</DemoBlock>

<DemoBlock Title="超链接按钮" Introduction="通过设置<code>IsLink</code> 属性组件使用 <code>A</code> 标签进行渲染" Name="IsLink">
    <PopConfirmButton Placement="Placement.Top" ConfirmIcon="fa fa-exclamation-triangle text-danger" Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger" Text="我是超链接" Content="确定删除数据吗？" IsLink="true" />
</DemoBlock>

<DemoBlock Title="自定义样式" Introduction="设置 <code>CssClass</code> 自定义组件样式" Name="CssClass">
    <Pre>.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}
</Pre>
    <PopConfirmButton Placement="Placement.Top" ConfirmIcon="fa fa-exclamation-triangle text-danger" Color="Color.Danger"
                      ConfirmButtonColor="Color.Danger" Text="自定义样式按钮" Content="确定删除数据吗？" CssClass="custom-popover" />
</DemoBlock>

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

<EventTable Items="@GetEvents()" />

// 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.Forms;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class PopoverConfirms
{
    [NotNull]
    private Foo? Model { get; set; }

    /// <summary>
    /// 
    /// </summary>
    [NotNull]
    private BlockLogger? Trace { get; set; }

    /// <summary>
    /// 
    /// </summary>
    [NotNull]
    private BlockLogger? Trace1 { get; set; }

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

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

    /// <summary>
    /// 
    /// </summary>
    private Task OnClose()
    {
        // 点击确认按钮后此方法被回调，点击取消按钮时此方法不会被调用
        Trace.Log("OnClose Trigger");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 
    /// </summary>
    private Task OnConfirm()
    {
        // 点击确认按钮后此方法被回调，点击取消按钮时此方法不会被调用
        Trace.Log("OnConfirm Trigger");
        return Task.CompletedTask;
    }

    private static Task OnAsyncConfirm() => Task.Delay(3000);

    private async Task OnAsyncSubmit()
    {
        await Task.Delay(3000);
        Trace1.Log("异步提交");
    }

    private Task OnValidSubmit(EditContext context)
    {
        Trace1.Log("数据合规");
        return Task.CompletedTask;
    }

    private Task OnInValidSubmit(EditContext context)
    {
        Trace1.Log("数据非法");
        return Task.CompletedTask;
    }

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = nameof(PopConfirmButton.IsLink),
            Description = "是否为 A 标签渲染组件",
            Type = "bool",
            ValueList = "true/false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = "Text",
            Description = "显示标题",
            Type = "string",
            ValueList = "",
            DefaultValue = "删除"
        },
        new AttributeItem() {
            Name = "Icon",
            Description = "按钮图标",
            Type = "string",
            ValueList = "",
            DefaultValue = "fa fa-remove"
        },
        new AttributeItem() {
            Name = "CloseButtonText",
            Description = "关闭按钮显示文字",
            Type = "string",
            ValueList = "",
            DefaultValue = "关闭"
        },
        new AttributeItem() {
            Name = "CloseButtonColor",
            Description = "确认按钮颜色",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "Secondary"
        },
        new AttributeItem() {
            Name = "Color",
            Description = "颜色",
            Type = "Color",
            ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "ConfirmButtonText",
            Description = "确认按钮显示文字",
            Type = "string",
            ValueList = "",
            DefaultValue = "确定"
        },
        new AttributeItem() {
            Name = "ConfirmButtonColor",
            Description = "确认按钮颜色",
            Type = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
            ValueList = "",
            DefaultValue = "Primary"
        },
        new AttributeItem() {
            Name = "ConfirmIcon",
            Description = "确认框图标",
            Type = "string",
            ValueList = "",
            DefaultValue = "fa fa-exclamation-circle text-info"
        },
        new AttributeItem() {
            Name = "Content",
            Description = "显示文字",
            Type = "string",
            ValueList = "",
            DefaultValue = "确认删除吗？"
        },
        new AttributeItem() {
            Name = "Placement",
            Description = "位置",
            Type = "Placement",
            ValueList = "Auto / Top / Left / Bottom / Right",
            DefaultValue = "Auto"
        },
        new AttributeItem() {
            Name = "Title",
            Description = "Popover 弹窗标题",
            Type = "string",
            ValueList = "",
            DefaultValue = " "
        }
    };

    /// <summary>
    /// 获得事件方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnConfirm",
            Description="点击确认时回调方法",
            Type ="Func<Task>"
        },
        new EventItem()
        {
            Name = "OnClose",
            Description="点击关闭时回调方法",
            Type ="Func<Task>"
        },
        new EventItem()
        {
            Name = "OnBeforeClick",
            Description="点击确认弹窗前回调方法 返回真时弹出弹窗 返回假时不弹出",
            Type ="Func<Task<bool>>"
        }
    };
}