@page "/multiselects"

<h3>MultiSelect 多项选择器</h3>

<h4>当进行多项选项时，使用下拉菜单展示并提供搜索多项选择内容</h4>

<Block Title="颜色" Introduction="提供各种颜色的多选下拉框">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Items="@Items"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Color="Color.Primary" Items="@Items"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Color="Color.Success" Items="@Items"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Color="Color.Danger" Items="@Items"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Color="Color.Warning" Items="@Items"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Color="Color.Info" Items="@Items"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Color="Color.Secondary" Items="@Items"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <MultiSelect TValue="string" Color="Color.Dark" Items="@Items"></MultiSelect>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定值字符串" Introduction="绑定一个逗号字符串分割的字符串">
    <p>本例中通过双向绑定 <code>SelectedItemsValue</code> 变量，通过下拉框选择更改其值</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Button Icon="fa fa-plus" Text="添加" OnClick="@AddItems" class="mr-1"></Button>
                <Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveItems"></Button>
            </div>
        </div>
    </div>
    <div>@SelectedItemsValue</div>
</Block>

<Block Title="双向绑定值集合" Introduction="绑定一个泛型 <code>IEnumerable<T></code> 集合">
    <p>本例中通过双向绑定 <code>SelectedArrayValues</code> 集合变量，通过下拉框选择更改其值</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <MultiSelect Items="@Items" @bind-Value="@SelectedArrayValues"></MultiSelect>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Button Icon="fa fa-plus" Text="添加" OnClick="@AddListItems" class="mr-1"></Button>
                <Button Icon="fa fa-minus" Text="减少" OnClick="@RemoveListItems"></Button>
            </div>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</Block>

<Block Title="双向绑定枚举集合" Introduction="绑定一个泛型 <code>IEnumerable<Enum></code> 集合">
    <p>本例中通过双向绑定 <code>SelectedEnumValues</code> 集合变量，通过下拉框选择更改其值</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <MultiSelect  @bind-Value="@SelectedEnumValues"></MultiSelect>
            </div>
        </div>
    </div>
    <div>@(string.Join(",", SelectedEnumValues))</div>
</Block>

<Block Title="搜索功能" Introduction="通过设置 <code>ShowSearch</code> 值开启搜索功能">
    <p>本例中设置搜索回调委托方法 <code>OnSearchTextChanged</code> 进行自定义搜索结果，如果未设置时内部使用显示文本进行模糊匹配</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" ShowSearch="true" OnSearchTextChanged="@OnSearch"></MultiSelect>
            </div>
        </div>
    </div>
    <div>@SelectedItemsValue</div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用功能" Introduction="通过设置 <code>IsDisabled</code> 值设置组件禁用状态">
    <p>禁用状态时组件无任何响应</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" IsDisabled="true" />
            </div>
        </div>
    </div>
    <div>@SelectedItemsValue</div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="选项改变时事件" Introduction="通过设置 <code>IsDisabled</code> 值设置组件禁用状态">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" OnSelectedItemsChanged="@OnSelectedItemsChanged" />
            </div>
        </div>
    </div>
    <Logger @ref="Trace" />
</Block>

<Block Title="客户端验证" Introduction="下拉框未选择时，点击提交按钮时拦截。">
    <p>内置到 <code>ValidateForm</code> 组件时，自动开启客户端验证功能，绑定模型拥有 <code>Required</code> 标签</p>
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12 col-sm-8">
                <MultiSelect @bind-Value="@Model.Education" />
            </div>
            <div class="form-group col-12 col-sm-4 align-items-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm class="form-inline" Model="@Foo">
        <div class="row">
            <div class="form-group col-12">
                <MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Foo.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Foo.Name" />
            </div>
        </div>
    </div>
    <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Foo.Name" DisplayText="自定义姓名" ShowLabel="true" />
            </div>
        </div>
    </div>
</Block>

<Block Title="选项超长文字" Introduction="候选项文字特别长">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" DisplayText="超长文字" ShowLabel="true"></MultiSelect>
    </div>
</Block>

<Block Title="全选与反选按钮" Introduction="通过设置 <code>ShowSelectAllButton</code> 值设置组件显示全选与反选按钮">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" ShowToolbar="true" ShowSearch="true"></MultiSelect>
    </div>
</Block>

<Block Title="设置选项最大数与最小数" Introduction="通过设置 <code>Max</code> <code>Min</code> 值设置组件可选项数量限制">
    <div style="max-width: 300px">
        <p>最多可选择两个选项</p>
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedMaxItemsValue" Max="2"></MultiSelect>
    </div>
    <div style="max-width: 300px" class="mt-3">
        <p>最少选择两个选项</p>
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedMinItemsValue" Min="2"></MultiSelect>
    </div>
</Block>

<Block Title="扩展工具栏按钮" Introduction="通过设置 <code>ButtonTemplate</code> 自定义工具栏按钮实现自定义功能">
    <div style="max-width: 300px">
        <MultiSelect Items="@LongItems" @bind-Value="@SelectedLongItemsValue" ShowToolbar="true" ShowDefaultButtons="false">
            <ButtonTemplate>
                <button class="btn" @onclick="@OnClickButton">测试</button>
            </ButtonTemplate>
        </MultiSelect>
    </div>
</Block>

<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.Pages.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Foo = BootstrapBlazor.Shared.Pages.Components.Foo;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    ///
    /// </summary>
    public partial class MultiSelects
    {
        /// <summary>
        /// 获得/设置 Logger 实例
        /// </summary>
        private Logger? Trace { get; set; }

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private readonly IEnumerable<SelectedItem> Items = new SelectedItem[]
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州"),
            new SelectedItem ("Shenzhen", "深圳"),
            new SelectedItem ("Chengdu", "成都"),
            new SelectedItem ("Wuhan", "武汉"),
            new SelectedItem ("Dalian", "大连"),
            new SelectedItem ("Hangzhou", "杭州"),
            new SelectedItem ("Lianyungang", "连云港"),
        };

        /// <summary>
        /// 获得 默认数据集合
        /// </summary>
        private readonly IEnumerable<SelectedItem> LongItems = new SelectedItem[]
        {
            new SelectedItem ("1", "特别甜的东瓜(特别甜的东瓜)"),
            new SelectedItem ("2", "特别甜的西瓜(特别甜的西瓜)"),
            new SelectedItem ("3", "特别甜的南瓜(特别甜的南瓜)"),
            new SelectedItem ("4", "特别甜的傻瓜(特别甜的傻瓜)"),
            new SelectedItem ("5", "特别甜的金瓜(特别甜的金瓜)"),
            new SelectedItem ("6", "特别甜的木瓜(特别甜的木瓜)"),
            new SelectedItem ("7", "特别甜的水瓜(特别甜的水瓜)"),
            new SelectedItem ("8", "特别甜的火瓜(特别甜的火瓜)"),
            new SelectedItem ("9", "特别甜的土瓜(特别甜的土瓜)"),
        };

        private string SelectedLongItemsValue { get; set; } = "";
        private string SelectedMaxItemsValue { get; set; } = "";
        private string SelectedMinItemsValue { get; set; } = "";

        private string SelectedItemsValue { get; set; } = "Beijing,Chengdu";

        private void AddItems()
        {
            SelectedItemsValue = "Beijing,Chengdu,Hangzhou,Lianyungang";
        }

        private void RemoveItems()
        {
            SelectedItemsValue = "Beijing,Chengdu";
        }

        private void AddListItems()
        {
            SelectedArrayValues = "Beijing,Chengdu,Hangzhou,Lianyungang".Split(',');
        }

        private void RemoveListItems()
        {
            SelectedArrayValues = "Beijing,Chengdu".Split(',');
        }

        private IEnumerable<string> SelectedArrayValues { get; set; } = Enumerable.Empty<string>();
        private IEnumerable<EnumEducation> SelectedEnumValues { get; set; } = new List<EnumEducation> { EnumEducation.Middel, EnumEducation.Primary };

        private IEnumerable<SelectedItem> OnSearch(string searchText)
        {
            return Items.Where(i => i.Text.Contains(searchText, System.StringComparison.OrdinalIgnoreCase));
        }

        private Task OnSelectedItemsChanged(IEnumerable<SelectedItem> items)
        {
            Trace?.Log($"选中项集合：{string.Join(",", items.Select(i => i.Value))}");
            return Task.CompletedTask;
        }

        private Foo Model { get; set; } = new Foo();

        private Foo Foo { get; set; } = new Foo();

        private void OnClickButton()
        {

        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnSelectedItemChanged",
                Description="下拉框选项改变时触发此事件",
                Type ="Func<SelectedItem, Task>"
            },
            new EventItem()
            {
                Name = "OnSearchTextChanged",
                Description="搜索文本发生变化时回调此方法",
                Type ="Func<string, IEnumerable<SelectedItem>>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "ShowCloseButton",
                Description = "是否显示前置标签关闭按钮",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "ShowToolbar",
                Description = "是否显示功能按钮",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowDefaultButtons",
                Description = "是否显示默认功能按钮",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "PlaceHolder",
                Description = "未选择时的占位显示文字",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "点击进行多选 ..."
            },
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Color",
                Description = "颜色",
                Type = "Color",
                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                DefaultValue = "Primary"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Items",
                Description = "数据集合",
                Type = "IEnumerable<SelectedItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ButtonTemplate",
                Description = "扩展按钮模板",
                Type = "RenderFragment<IEnumerable<SelectedItem>>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}