@page "/calendars"

<h3>Calendar 日历框</h3>

<h4>按照日历形式展示数据的容器。当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。</h4>

<Block Title="基础用法" Introduction="基础的日历显示。">
    <Calendar ValueChanged="@OnValueChanged" />
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="数据双向绑定" Introduction="日历框选择时间时数据自动更新文本框">
    <Calendar @bind-Value="@BindValue" />
    <BootstrapInput TItem="DateTime" @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
</Block>

<Block Title="按周展示" Introduction="通过设置属性 <code></code>">
    <Calendar ViewModel="CalendarViewModel.Week" />
</Block>

<Block Title="实战应用" Introduction="课堂表">
    <p>目前按周内组件暂时为统一使用 <code>ChildContext</code> 来进行渲染，所有单元格内的数据相关操作组件均未进行封装，稍后完善</p>
    <Calendar ViewModel="CalendarViewModel.Week">
        <tr>
            <td class="none">无</td>
            <td rowspan="4"><div class="less ch">语文</div></td>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td rowspan="3"><div class="less en">英语</div></td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td style="background-color: #f8f9fa;" colspan="7">午休</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td class="none">无</td>
        </tr>
    </Calendar>
</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;
using System.Collections.Generic;

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

        private DateTime BindValue { get; set; } = DateTime.Today;

        private void OnValueChanged(DateTime ts)
        {
            Trace?.Log($"{ts:yyyy-MM-dd}");
        }

        private string Formatter(DateTime ts) => ts.ToString("yyyy-MM-dd");

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "ValueChanged",
                Description="值改变时回调委托",
                Type ="EventCallback<DateTime>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Value",
                Description = "组件值",
                Type = "DateTime",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "子组件",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
        };
    }
}