@page "/switchs"

<h3>Switch 开关</h3>

<h4>提供最普通的开关应用</h4>

<Block Title="基础用法" Introduction="点击按钮切换状态">
    <p>点击第一个开关有值输出日志</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch ValueChanged="@OnValueChanged" Value="@BindValue" OnColor="Color.Secondary" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Warning" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Info" OnText="开启" OffText="关闭"></Switch>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch Value="true" OnColor="Color.Dark" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </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-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Primary" IsDisabled="true" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="开关颜色" Introduction="通过设置 <code>OnColor</code> <code>OffColor</code> 属性值，设置开关状态颜色">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Switch OnColor="Color.Danger" OffColor="Color.Success" OnText="开启" OffText="关闭"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="双向绑定" Introduction="绑定组件内变量，数据自动同步">
    <p><code>Switch</code> 组件开启双向绑定时，会根据绑定的 <code>Model</code> 属性值去自动获取 <code>DisplayName</code> 标签值并且显示为前置 <code>Label</code>，通过 <code>DisplayText</code> 属性可以自定义显示前置标签，或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="双向绑定示例"></Switch>
            </div>
            <div class="form-group col-12">
                <div>绑定数值: @Model.BindValue</div>
            </div>
            <Divider Text="自定义标签" />
            <div class="form-group col-12">
                <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
            </div>
            <div class="form-group col-12">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="自定义标签" ShowLabel="true"></Switch>
            </div>
            <Divider Text="占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
            </div>
            <div class="form-group col-12">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" ShowLabel="true"></Switch>
            </div>
            <Divider Text="不占位" />
            <div class="form-group col-12">
                <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
            </div>
            <div class="form-group col-12">
                <Switch OnColor="Color.Success" OffColor="Color.Danger" OnText="开启" OffText="关闭" @bind-Value="@Model.BindValue" DisplayText="不显示" ShowLabel="false"></Switch>
            </div>
        </div>
    </div>
</Block>

<Block Title="显示内置文字" Introduction="通过设置 <code>ShowInnerText</code> 属性控制组件显示内置文字">
    <p>通过设置 <code>OnInnerText</code> <code>OffInnerText</code> 属性更改内置文字，默认情况下建议使用一个汉字，可自定义组件宽度来增加内置文字数量</p>
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <label class="control-label">默认文字：</label>
                <Switch OnColor="Color.Primary" ShowInnerText="true" />
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <label class="control-label">自定义文字：</label>
                <Switch OnColor="Color.Primary" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </div>
        </div>
    </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.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System.Collections.Generic;
using System.ComponentModel;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    ///
    /// </summary>
    public sealed partial class Switchs
    {
        private class Foo
        {
            /// <summary>
            /// 
            /// </summary>
            [DisplayName("绑定标签")]
            public bool BindValue { get; set; }
        }

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

        /// <summary>
        /// 
        /// </summary>
        private bool BindValue { get; set; } = true;

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

        /// <summary>
        ///
        /// </summary>
        /// <param name="val"></param>
        private void OnValueChanged(bool val)
        {
            BindValue = val;
            Trace?.Log($"Switch CurrentValue: {val}");
        }

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Class",
                Description = "样式",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Height",
                Description = "控件高度",
                Type = "int",
                ValueList = "—",
                DefaultValue = "20"
            },
            new AttributeItem() {
                Name = "IsDisabled",
                Description = "是否禁用",
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "OffColor",
                Description = "关颜色设置",
                Type = "Color",
                ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "OnColor",
                Description = "开颜色设置",
                Type = "Color",
                ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
                DefaultValue = "Color.Success"
            },
            new AttributeItem() {
                Name = "OnText",
                Description = "组件 On 时显示文本",
                Type = "string",
                ValueList = "—",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "OffText",
                Description = "组件 Off 时显示文本",
                Type = "string",
                ValueList = "—",
                DefaultValue = "—"
            },
            new AttributeItem() {
                Name = "OnInnerText",
                Description = "组件 On 时内置显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "开"
            },
            new AttributeItem() {
                Name = "OffInnerText",
                Description = "组件 Off 时内置显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "关"
            },
            new AttributeItem() {
                Name = "ShowInnerText",
                Description = "是否显示内置显示文本",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Width",
                Description = "组件宽度",
                Type = "int",
                ValueList = "—",
                DefaultValue = "40"
            },
            new AttributeItem() {
                Name = "Value",
                Description = "获取值",
                Type = "boolean",
                ValueList = " ",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnValueChanged",
                Description = "值发生改变时回调委托方法",
                Type = "Func<bool, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "ValueChanged",
                Description="获取选择改变的值",
                Type ="EventCallback<bool>"
            }
        };
    }
}