@page "/transfers"

<h3>Transfer 穿梭框</h3>

<Block Title="基础用法" Introduction="">
    <Transfer Items="@Items" ItemsChanged="@OnItemsChanged"
              LeftPanelText="候选项列表" RightPanelText="已选项列表" />

    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="可自定义" Introduction="可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。">
    <Transfer Items="@Items"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边" />
</Block>

<Block Title="可搜索" Introduction="在数据很多的情况下，可以对数据进行搜索和过滤。">
    <Transfer Items="@Items"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边"
              LeftPannelSearchPlaceHolderString="请输入" RightPannelSearchPlaceHolderString="请输入"
              ShowSearch="true" />
</Block>

<Block Title="双向绑定" Introduction="组件数据发生变化时，更新绑定数据源 <code>Items</code>">
    <p>本例中 <code>Transfer</code> 组件双向绑定数据源 <code>Item1</code>，左右移动数据后，源集合中 <code>Active = false</code> 的为左侧面板中数据集合，<code>Active = true</code> 的为右侧面板中数据集合</p>
    <Transfer @bind-Items="@Items1"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边" />
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入">
    <Transfer Items="@Items" IsDisabled="true"
              LeftPanelText="左侧列表" RightPanelText="右侧列表"
              LeftButtonText="到左边" RightButtonText="到右边"
              LeftPannelSearchPlaceHolderString="请输入" RightPannelSearchPlaceHolderString="请输入"
              ShowSearch="true" />
</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 Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Linq;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Transfers : ComponentBase
    {
        /// <summary>
        /// 
        /// </summary>
        private IEnumerable<SelectedItem>? Items { get; set; }

        private IEnumerable<SelectedItem>? Items1 { get; set; }

        /// <summary>
        /// 
        /// </summary>
        private Logger? Trace { get; set; }

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

            Items = Enumerable.Range(1, 20).Select(i => new SelectedItem()
            {
                Text = $"备选 {i:d2}",
                Value = i.ToString()
            });

            Items1 = Enumerable.Range(1, 20).Select(i => new SelectedItem()
            {
                Text = $"数据 {i:d2}",
                Value = i.ToString()
            });
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="items"></param>
        private void OnItemsChanged(IEnumerable<SelectedItem> items)
        {
            Trace?.Log(string.Join(" ", items.Where(i => i.Active).Select(i => i.Text)));
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Items",
                Description = "组件绑定数据项集合",
                Type = "IEnumerable<SelectedItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "LeftButtonText",
                Description = "左侧按钮显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "LeftPanelText",
                Description = "左侧面板 Header 显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "列表 1"
            },
            new AttributeItem() {
                Name = "RightButtonText",
                Description = "右侧按钮显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "RightPanelText",
                Description = "右侧面板 Header 显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "列表 2"
            },
            new AttributeItem() {
                Name = "ShowSearch",
                Description = "是否显示搜索框",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "LeftPannelSearchPlaceHolderString",
                Description = "左侧面板中的搜索框 placeholder 字符串",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "RightPannelSearchPlaceHolderString",
                Description = "右侧面板中的搜索框 placeholder 字符串",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = "true / false",
                DefaultValue = "false"
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnItemsChanged",
                Description="组件绑定数据项集合选项变化时回调方法",
                Type ="Action<IEnumerable<SelectedItem>>"
            }
        };
    }
}