@page "/signature-responsive"
@inject IStringLocalizer<SignaturePadPageResponsive> Localizer

<h3>@Localizer["ResponsiveInterfaceText"]</h3>

<DemoBlock Title="@Localizer["ResponsiveInterfaceText"]"
           Introduction="@Localizer["TipsResponsive"]"
           Name="Base">
    @if (ShowSignaturePad)
    {
        <SignaturePad OnResult="OnResult" EnableChangeColorBtn="false" Responsive="true" BackgroundColor="#000" SignAboveLabel="" OnClose="OnClose" />
    }
    else if (Result != null)
    {
        <p class="mt-3">@Localizer["ResultText"]</p>
        <img src="@Result" style="background-color: beige ; max-width: 80%; " />
        <textarea type="text" class="form-control" style="min-width: 100px;max-width: 80%;" rows="6" @bind="Result" placeholder="Base64" />
        <button class="btn btn-primary" type="button" @onclick="(() => Result = null)">
            @Localizer["BackText"]
        </button>
    }
    else
    {
        <button class="btn btn-primary mt-3" type="button" @onclick="() => ShowSignaturePad = !ShowSignaturePad">
            @Localizer["SignatureText"]
        </button>
    }
</DemoBlock>

<a class="btn btn-primary mt-3" type="button" href="signature-pad">
    @Localizer["BackText"]
</a>

@code {
    /// <summary>
    /// 签名Base64
    /// </summary>
    public string? Result { get; set; }

    /// <summary>
    /// 显示响应式签名界面
    /// </summary>
    bool ShowSignaturePad { get; set; }

    /// <summary>
    /// 签名回调处理
    /// </summary>
    /// <param name="result"></param>
    /// <returns></returns>
    private Task OnResult(string result)
    {
        Result = result;
        ShowSignaturePad = (result == null);
        StateHasChanged();
        return Task.CompletedTask;
    }

    /// <summary>
    /// 关闭回调处理
    /// </summary>
    /// <returns></returns>
    private Task OnClose()
    {
        ShowSignaturePad = false;
        StateHasChanged();
        return Task.CompletedTask;
    }
}
