@page "/imageviewers"

<h3>ImageViewer 图片</h3>

<h4>图片容器，在保留原生 img 的特性下，支持懒加载，自定义占位、加载失败等</h4>

<DemoBlock Title="基本用法" Introduction="加载并显示图片文件" Name="Normal">
    <ul class="ul-demo">
        <li><code>object-fit: fill</code> 填充 默认值 使图片拉伸填满整个容器, 不保证保持原有的比例</li>
        <li><code>object-fit: contain</code> 包含 保持原有尺寸比例缩放 保证整个图片都可以出现在容器中，因此此参数可能会在容器内留下空白</li>
        <li><code>object-fit: cover</code> 覆盖 保持原有尺寸比例缩放，宽度和高度至少有一个和容器一致（尺寸小的一致）因此此参数可能会让图片部分区域不可见</li>
        <li><code>object-fit: none</code> 无 保持原有尺寸比例，同时保持图片原始尺寸大小，多出的部分隐藏</li>
        <li><code>object-fit: scale-down</code> 降低 就好像依次设置了 <b>none</b> 或 <b>contain</b> 最终呈现的是尺寸比较小的那个</li>
    </ul>
    <div class="images mt-3">
        <div class="images-item">
            <div>Fill</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" FitMode="ObjectFitMode.Fill" />
        </div>
        <div class="images-item">
            <div>Contain</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" FitMode="ObjectFitMode.Contain" />
        </div>
        <div class="images-item">
            <div>Cover</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" FitMode="ObjectFitMode.Cover" />
        </div>
        <div class="images-item">
            <div>None</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" FitMode="ObjectFitMode.None" />
        </div>
        <div class="images-item">
            <div>ScaleDown</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" FitMode="ObjectFitMode.ScaleDown" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="占位内容" Introduction="可通过设置 <code>ShowPlaceHolder</code> 开启占位符功能，通过设置 <code>PlaceHolderTemplate</code> 自定义占位内容" Name="PlaceHolder">
    <div>图片加载后浏览器默认会缓存，建议 <kbd>F12</kbd> 关闭缓存体验此功能</div>
    <div class="images img-ph mt-3">
        <div class="images-item">
            <div>默认</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true" />
        </div>
        <div class="images-item">
            <div>自定义</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true">
                <PlaceHolderTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">加载中 ...</div>
                    </div>
                </PlaceHolderTemplate>
            </ImageViewer>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="占位模板" Introduction="可通过设置 <code>PlaceHolderTemplate</code> 开启占位模板功能，未设置 <code>Url</code> 或者正在加载时显示此模板内容" Name="PlaceHolderTemplate">
    <div>图片加载后浏览器默认会缓存，建议 <kbd>F12</kbd> 关闭缓存体验此功能</div>
    <div class="images img-ph mt-3">
        <div class="images-item">
            <div>未设置 Url</div>
            <ImageViewer Url="">
                <PlaceHolderTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">占位模板</div>
                    </div>
                </PlaceHolderTemplate>
            </ImageViewer>
        </div>
        <div class="images-item">
            <div>加载时显示</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true">
                <PlaceHolderTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">占位模板</div>
                    </div>
                </PlaceHolderTemplate>
            </ImageViewer>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="加载失败" Introduction="可通过设置 <code>ErrorTemplate</code> 开启错误模板功能，参数 <code>Url</code> 无法加载图片时显示此模板内容" Name="ErrorTemplate">
    <div class="images img-ph mt-3">
        <div class="images-item">
            <div>Url 路径错误</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/error-image.jpeg" HandleError="true" />
        </div>
        <div class="images-item">
            <div>自定义</div>
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/error-image.jpeg">
                <ErrorTemplate>
                    <div class="bb-img-holder">
                        <div class="bb-img-loading">加载失败</div>
                    </div>
                </ErrorTemplate>
            </ImageViewer>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="大图预览" Introduction="可通过设置 <code>PreviewList</code> 开启预览大图的功能" Name="PreviewList">
    <div class="images img-ph mt-3">
        <div class="images-item">
            <ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" PreviewList="PreviewList" />
        </div>
    </div>
</DemoBlock>

<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;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Images 示例类
/// </summary>
public partial class ImageViewers
{
    private List<string> PreviewList { get; } = new();

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

        PreviewList.AddRange(new string[]
        {
            "_content/BootstrapBlazor.Shared/images/ImageList1.jpeg",
            "_content/BootstrapBlazor.Shared/images/ImageList2.jpeg"
        });
    }

    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        new AttributeItem() {
            Name = nameof(ImageViewer.Url),
            Description = "图片 Url",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.Alt),
            Description = "原生 alt 属性",
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.ShowPlaceHolder),
            Description = "是否显示占位符 适用于大图片加载",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.HandleError),
            Description = "加载失败时是否显示错误占位符",
            Type = "bool",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.PlaceHolderTemplate),
            Description = "占位模板 未设置 Url 或者正在加载大图时生效",
            Type = "RenderFragment",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.ErrorTemplate),
            Description = "错误模板 图片路径错误时生效",
            Type = "RenderFragment",
            ValueList = "true|false",
            DefaultValue = "false"
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.FitMode),
            Description = "原生 object-fit 属性",
            Type = "ObjectFitMode",
            ValueList = "fill|contain|cover|none|scale-down",
            DefaultValue = "fill"
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.ZIndex),
            Description = "原生 z-index 属性",
            Type = "int",
            ValueList = " — ",
            DefaultValue = "2050"
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.PreviewList),
            Description = "预览大图链接集合",
            Type = "List<string>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.OnLoadAsync),
            Description = "图片加载成功时回调方法",
            Type = "Func<string, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = nameof(ImageViewer.OnErrorAsync),
            Description = "图片加载失败时回调方法",
            Type = "Func<string, Task>",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };
}