@page "/radios"

<h3>Radio 单选框</h3>

<h4>在一组备选项中进行单选</h4>

<Block Title="基础用法" Introduction="由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器" CodeFile="radio.1.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-4">
                <Radio Items="@DemoValues" OnStateChanged="@OnStateChanged"></Radio>
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="禁用单选框" Introduction='通过 <code>IsDisabled="true"</code> 单选框不可用状态' CodeFile="radio.2.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-4">
                <Radio State="CheckboxState.Checked" DisplayText="选中" IsDisabled="true"></Radio>
            </div>
            <div class="form-group col-4">
                <Radio State="CheckboxState.UnChecked" DisplayText="未选中" IsDisabled="true"></Radio>
            </div>
        </div>
    </div>
</Block>

<Block Title="Label 文字" Introduction="单选框显示文字" CodeFile="radio.3.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Radio DisplayText="显示文字"></Radio>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="绑定组件内变量，数据自动同步，绑定数据类型为 SelectedItem 类型数组" CodeFile="radio.4.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Radio Items="@Items" @bind-Value="@BindRadioItem" OnStateChanged="@OnItemChanged"></Radio>
            </div>
            <div class="form-group col-12">
                <div>Text: @BindRadioItem.Text Value: @BindRadioItem.Value</div>
            </div>
        </div>
    </div>
    <Logger @ref="BinderLog" class="mt-3" />
</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.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Radios
    {
        /// <summary>
        /// 
        /// </summary>
        private Logger? Trace { get; set; }
        /// <summary>
        /// 
        /// </summary>
        private Logger? BinderLog { get; set; }

        private IEnumerable<SelectedItem> DemoValues { get; set; } = new List<SelectedItem>(2)
        {
            new SelectedItem("1", "选项一"),
            new SelectedItem("2", "选项二")
        };

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnStateChanged(CheckboxState state, SelectedItem value)
        {
            Trace?.Log($"组件选中值: {value.Value} 显示值: {value.Text}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="state"></param>
        /// <param name="value"></param>
        private Task OnItemChanged(CheckboxState state, SelectedItem value)
        {
            BinderLog?.Log($"Selected Value: {value.Text}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 
        /// </summary>
        private string? BindValue { get; set; }

        /// <summary>
        /// 
        /// </summary>
        private IEnumerable<SelectedItem> Items { get; set; } = new SelectedItem[]
        {
            new SelectedItem("1", "北京") { Active = true },
            new SelectedItem("2", "上海")
        };

        private SelectedItem BindRadioItem { get; set; } = new SelectedItem();

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes()
        {
            return new AttributeItem[]
            {
                new AttributeItem() {
                    Name = "DisplayText",
                    Description = "显示文字",
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = "—"
                },
                new AttributeItem() {
                    Name = "IsDisabled",
                    Description = "是否禁用",
                    Type = "boolean",
                    ValueList = "true / false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "Items",
                    Description = "绑定数据源",
                    Type = "IEnumerable<TItem>",
                    ValueList = " — ",
                    DefaultValue = "—"
                },
                new AttributeItem() {
                    Name = "State",
                    Description = "控件类型",
                    Type = "CheckboxState",
                    ValueList = " Checked / UnChecked",
                    DefaultValue = "text"
                },
            };
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnStateChanged",
                Description="选择框状态改变时回调此方法",
                Type ="Func<CheckboxState, TItem, Task>"
            }
        };
    }
}