@page "/datetimeranges"

<h3>DateTimeRange 日期时间段选择器</h3>

<h4>在同一个选择器里选择一段日期</h4>

<Block Title="基本功能" Introduction="以「日」为基本单位，选择一段时间">
    <DateTimeRange @bind-Value="@DateTimeRangeValue1" OnConfirm="OnConfirm" />
    <Logger @ref="DateLogger" class="mt-3" />
</Block>

<Block Title="数据双向绑定" Introduction="点击确认按钮时间选择框值与文本框值一致">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <DateTimeRange @bind-Value="@DateTimeRangeValue2" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <div>
                    @if (DateTimeRangeValue2.Start != DateTime.MinValue)
                    {
                        <span>时间范围：</span> @DateTimeRangeValue2.Start.ToString("yyyy-MM-dd");
                    }
                    @if (DateTimeRangeValue2.End != DateTime.MinValue)
                    {
                        <span> - </span> @DateTimeRangeValue2.End.ToString("yyyy-MM-dd");
                    }
                </div>
            </div>
        </div>
    </div>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入">
    <div class="form-inline">
        <div class="row">
            <div class="col-12">
                <DateTimeRange Value="@DateTimeRangeValue3" IsDisabled="true" />
            </div>
        </div>
    </div>
</Block>

<Block Title="带快捷键侧边栏" Introduction="设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏">
    <p>通过设置 <code>ShowSidebar</code> 参数开启显示侧边栏快捷选项功能，通过设置 <code>SidebarItems</code> 参数集合替换组件内置的默认快捷项</p>
    <div class="form-inline">
        <div class="row">
            <div class="col-12">
                <DateTimeRange Value="@DateTimeRangeValue4" ShowSidebar="true" />
            </div>
        </div>
    </div>
</Block>

<Block Title="显示今天按钮" Introduction="设置 <code>ShowToday</code> 属性值为 <code>true</code> 时，组件下方显示今天快捷按钮">
    <p>点击 <code>今天</code> 按钮时，时间范围为 <code>yyyy-MM-dd 00:00:00 到 yyyy-MM-dd 23:59:59</code></p>
    <div class="form-inline">
        <div class="row">
            <div class="col-12">
                <DateTimeRange Value="@DateTimeRangeValue4" ShowToday="true" />
            </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.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class DateTimeRanges
    {
        [NotNull]
        private Logger? DateLogger { get; set; }

        private DateTimeRangeValue DateTimeRangeValue1 { get; set; } = new DateTimeRangeValue();

        private DateTimeRangeValue DateTimeRangeValue2 { get; set; } = new DateTimeRangeValue();

        private DateTimeRangeValue DateTimeRangeValue3 { get; set; } = new DateTimeRangeValue() { Start = DateTime.Today, End = DateTime.Today.AddDays(3) };

        private DateTimeRangeValue DateTimeRangeValue4 { get; set; } = new DateTimeRangeValue();

        private Task OnConfirm(DateTimeRangeValue value)
        {
            DateLogger?.Log($"选择的时间范围是: {value.Start:yyyy-MM-dd} - {value.End:yyyy-MM-dd}");
            return Task.CompletedTask;
        }

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "OnConfirm",
                Description="确认按钮回调委托",
                Type ="Action"
            },
            new EventItem()
            {
                Name = "OnClearValue",
                Description="清空按钮回调委托",
                Type ="Action"
            } 
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            new AttributeItem() {
                Name = "ShowLabel",
                Description = "是否显示前置标签",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "ShowSidebar",
                Description = "是否显示快捷侧边栏",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowToday",
                Description = "是否显示今天快捷按钮",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name = "IsDisabled",
                Description = "是否禁用 默认为 fasle",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name = "ShowSidebar",
                Description = "是否显示快捷侧边栏 默认为 fasle",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem()
            {
                Name = "Placement",
                Description = "设置弹窗出现位置",
                Type = "Placement",
                ValueList = "top|bottom|left|right",
                DefaultValue = "auto"
            },
            new AttributeItem() {
                Name = "DisplayText",
                Description = "前置标签显示文本",
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "DateFormat",
                Description = "日期格式字符串 默认为 yyyy-MM-dd",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "yyyy-MM-dd"
            },
            new AttributeItem() {
                Name = "Value",
                Description = "包含开始时间结束时间的自定义类",
                Type = "DateTimeRangeValue",
                ValueList = "",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "SidebarItems",
                Description = "侧边栏快捷选项集合",
                Type = "IEnumerable<DateTimeRangeSidebarItem>",
                ValueList = "",
                DefaultValue = " — "
            }
        };
    }
}