@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="Async">
    <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>

<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.Shared.Common;
using BootstrapBlazor.Shared.Components;
using Microsoft.AspNetCore.Components.Forms;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

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 = "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>>"
            },
    };
}